Question

我想将PubNub添加到angular2-cli项目中。问题在于链接;但是，我按照npmjs.com上pubnub-angular2包的说明操作。

当我尝试在浏览器中加载它时，错误信息为：

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

提前致谢。

Answer 1

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

AlarmManager

这是<script src="node_modules/pubnub/dist/web/pubnub-angular2.js"></script>正在被充分发挥作用的掠夺者。

plunker

修改

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

NPM安装npm install pubnub

npm install pubnub-angular2

将脚本包含到index.html（参见上面的脚本

导入到app.module pudnub

将提供商添加到app.module import { PubNubAngular } from 'pubnub-angular2';

使用pubnub服务providers: [ PubNubAngular ]

导入任何组件
Angular-cli EDIT

从index.html中删除import { PubNubAngular } from 'pubnub-angular2';标记，并将其添加到<script>文件中，如下所示...

angular-cli.json

将pubnub添加到angular2 cli项目中

1 个答案: