2017-03-13 7 views
2

私はangular2-cliプロジェクトにPubNubを追加したいと思います。問題はリンクの問題です。しかし、私はnpmjs.comのpubnub-angular2パッケージの指示に従った。angular2 cliプロジェクトにpubnubを追加

私はブラウザにロードしようとすると、エラーメッセージがこれです:

例外:PubNubはグローバルスコープではありません。 ライブラリは、角度アダプタapp.module.ts

前に含まれているpubnub.js v4のを確認し、私は次のようしている:で

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プロバイダを見ないことに注意してください。

ありがとうございます。

+1

私はこのライブラリを使用することはありませんが、誤りが非常に簡単です、あなたがメインのライブラリちょうど角度アダプタをインポートdidin'tようです。あなたは 'import" myLibrary "のようにvendor.tsにライブラリを含めるか、index.htmlにそれを追加する必要があります。それを使用するコンポーネント/サービスで 'pubnub-angular2'をインポートします。 – n00dl3

+0

はい、本当にシームです。しかし、その解決策は私にとってそれほど些細なことではありません。 vendor.tsは私が変更できない第三者のライブラリですが、index.htmlからnode_modulesディレクトリを参照するとブラウザーは何も見つけることができません(ノードモジュールはsrcと同じレベルにあり、index.htmlはsrcフォルダ)。 –

答えて

2

私はここで

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

がplunkerです...あなたはこれを追加してください、あなたはおそらく不足していることができる唯一の事はあなたのindex.htmlに必要なスクリプトタグは、あなたのコードから伝えることができるものから、 pudnubが適切に組み込まれています。

plunker

EDITあなたがいずれかをスキップdidntは確保する

すべてのステップ...

  1. NPM pubnub

  2. NPMがpubnub-angular2

    をインストールNPMをインストールするインストール
  3. 任意のコンポーネント使用pubnubサービスimport { PubNubAngular } from 'pubnub-angular2';

    providers: [ PubNubAngular ]

  4. インポートをapp.moduleするプロバイダーを追加import { PubNubAngular } from 'pubnub-angular2';

  5. をapp.moduleするためのスクリプト上記

  6. インポートを参照してください(index.htmlのにスクリプトを含めます

角膜炎EDIT

インデックスから<script>タグを削除します。htmlと、このようなあなたのangular-cli.jsonファイルに追加...

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

+0

ありがとうございます。 pubnub-angular2をインストールした後、あなたが引用したパスは ''となります。あるレベルのnode_modulesがあるので、 "../"で始めることも試みました。どちらの場合も、404エラーがスローされます。 –

+0

@HorvathAdamはあなたの 'node_modules'フォルダに移動します。' pubnub-angular2'が表示されますか? – Bean0341

+0

@HorvathAdamまた、実際には '

関連する問題