将pubnub添加到angular2 cli项目

我想将PubNub添加到angular2-cli项目。问题在于链接;但是，我遵循npmjs.com上的pubnub-angular2软件包的说明。将pubnub添加到angular2 cli项目

当我尝试加载它在浏览器中，该错误信息是这样的：

例外：PubNub是不是在全球范围内。确保pubnub.js V4 库角适配器

在app.module.ts之前包括在内，我有以下几点：

import {BrowserModule} from '@angular/platform-browser'; 
 
import {NgModule} from '@angular/core'; 
 
import {FormsModule} from '@angular/forms'; 
 
import {HttpModule} from '@angular/http'; 
 

 
import {PubNubAngular} from 'pubnub-angular2'; 
 
import {AppComponent} from './app.component'; 
 

 
@NgModule({ 
 
    declarations: [ 
 
     AppComponent 
 
    ], 
 
    imports: [ 
 
     BrowserModule, 
 
     FormsModule, 
 
     HttpModule 
 
    ], 
 
    providers: [PubNubAngular], 
 
    bootstrap: [AppComponent] 
 
}) 
 

 
export class AppModule {}

在app.component.ts，我有以下代码：

import {Component, Injectable, Class} from '@angular/core'; 
 
import {PubNubAngular} from "pubnub-angular2"; 
 

 
@Component({ 
 
    selector: 'app-root', 
 
    templateUrl: './app.component.html', 
 
    styleUrls: ['./app.component.css'] 
 
}) 
 

 
export class AppComponent { 
 

 
    title = 'Pubnub Chat Service'; 
 
    private channel = 'chat-demo-app'; 
 

 
    constructor(private pubnubService: PubNubAngular) { 
 
     pubnubService.init({ 
 
      publishKey: 'pub-c-***', 
 
      subscribeKey: 'sub-c-***' 
 
     }); 
 
    } 
 

 
    sendMessage(message: string): void { 
 
     this.pubnubService.publish({ 
 
      channel: this.channel, 
 
      message: message 
 
     }); 
 
    } 
 

 
}

需要注意的是，如果我删除了进口的AppComponent，该组件没有看到PubNubAngular提供商。

在此先感谢。

来源

2017-03-13 Horvath Adam

我从来没有使用过这个库，但似乎错误是非常简单的，你didin't导入主库只是角度适配器。您需要将库包含在您的vendor.ts中，例如'import“myLibrary”'或将其添加到index.html。在使用它的组件/服务中导入'pubnub-angular2'之前。 – n00dl3

是的，它真的很直接;然而，解决方案对我来说并不是那么微不足道。 vendor.ts是我无法更改的第三方库，而当我引用index.html中的node_modules目录时，浏览器找不到任何内容（节点模块与src位于同一级别，index.html位于src文件夹）。 –

从我可以从你的代码告诉你可能被唯一缺少的是在您的index.html所需的脚本代码，请务必在添加此...

<script src="node_modules/pubnub/dist/web/pubnub-angular2.js"></script>

这里是一个plunker的pudnub被适当地提升。

plunker

编辑

所有步骤，以确保你没有跳过任何...

NPM安装NPM安装pubnub
NPM安装pubnub，angular2
包括脚本的index.html（见上面的脚本
进口app.module import { PubNubAngular } from 'pubnub-angular2';
使用pubnub服务import { PubNubAngular } from 'pubnub-angular2';
添加提供商app.module providers: [ PubNubAngular ]
导入任何组件

Angular-cli EDIT

从您的索引中删除<script>标记。HTML并将其添加到您的angular-cli.json文件中像这样...

"scripts": ["../node_modules/pubnub/dist/web/pubnub.js", "./node_modules/pubnub-angular2/dist/pubnub-angular2.js" ],

来源

2017-03-13 15:30:26 Bean0341

谢谢。在安装pubnub-angular2之后，它的路径是另一个引用：''。由于我有一个级别的node_modules，我也试着用“../”开头。在这两种情况下，都会引发404错误。 –

@HorvathAdam导航到你的'node_modules'文件夹，你看到'pubnub-angular2'吗？ – Bean0341

@HorvathAdam另外，您可能实际上并不需要'

将pubnub添加到angular2 cli项目

回答

相关问题