将 pubnub 添加到 angular2 cli 项目

Question

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

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

EXCEPTION: PubNub is not in global scope. Ensure that pubnub.js v4 library is included before the angular adapter

在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 提供程序。

提前致谢。

Answer 1

据我从您的代码中可以看出，您唯一可能缺少的是 index.html 中所需的脚本标记，确保添加此...

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

这里是 pudnub 的 plunker 被正确地实现了。

plunker

编辑

确保您没有跳过任何步骤的所有步骤...

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

Angular-cli 编辑

从您的 index.html 中删除 <script> 标签，然后像这样将其添加到您的 angular-cli.json 文件中...

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

将 pubnub 添加到 angular2 cli 项目

Add pubnub to angular2 cli project

command-line-interface

pubnub

angular