将pubnub添加到angular2 cli项目 [英] Add pubnub to angular2 cli project

问题描述

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

I want to add PubNub to an angular2-cli project. The problem is with the linking; however, I followed the instructions of the pubnub-angular2 package on npmjs.com.

当我尝试将其加载到浏览器中时，错误消息是这样的:

When I try to load it in the browser, the error message is this:

例外:PubNub不在全球范围内.确保pubnub.js v4 库包含在角度适配器之前

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

在 app.module.ts 中，我具有以下内容:

In the app.module.ts, I have the following:

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中，我有以下代码:

In the app.component.ts, I have the following code:

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

Note that if I remove the import in the AppComponent, the component does not see the PubNubAngular provider.

谢谢.

推荐答案

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

From what I can tell from your code the only thing you could possibly be missing is the script tag needed in your index.html, make sure you add this...

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

这是pudnub的一个小插曲.

朋克车

编辑

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

all steps to ensure you didnt skip any...

1. NPM安装npm安装pubnub

1. NPM install npm install pubnub

npm install pubnub-angular2

npm install pubnub-angular2

将脚本包含到index.html中(请参见上面的脚本

Include script to index.html (see above script

导入到app.module import { PubNubAngular } from 'pubnub-angular2';

import to app.module import { PubNubAngular } from 'pubnub-angular2';

将提供程序添加到app.module providers: [ PubNubAngular ]

Add provider to app.module providers: [ PubNubAngular ]

使用pubnub服务导入到任何组件import { PubNubAngular } from 'pubnub-angular2';

Import to any component using pubnub service import { PubNubAngular } from 'pubnub-angular2';

Angular-cli编辑

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

Remove the <script> tag from your index.html and add it to your angular-cli.json file like this...

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

这篇关于将pubnub添加到angular2 cli项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！