如何導入和使用angular2中的pubnub

我想在我的angular2項目中使用pubnub。（它是實時的對瀏覽器得到一個訂單）如何導入和使用angular2中的pubnub

我angular.module使用pubnub-angular2

我增加和進口pubnub模塊。我想我是同道的pubnub指南，但它根本不起作用，除了它造成'窗口'未定義的錯誤。

這是我做的導入pubnub。

NPM安裝pubnub
NPM安裝pubnub-angular2
提供商：[windows.PubNubAngular]在app.module

而且，這是我的package.json。

{ 
 
    "name": "test", 
 
    "version": "0.0.0", 
 
    "license": "MIT", 
 
    "angular-cli": {}, 
 
    "scripts": { 
 
    "start": "ng serve", 
 
    "lint": "tslint \"src/**/*.ts\"", 
 
    "test": "ng test", 
 
    "pree2e": "webdriver-manager update", 
 
    "e2e": "protractor" 
 
    }, 
 
    "private": true, 
 
    "dependencies": { 
 
    "@angular/common": "~2.0.0", 
 
    "@angular/compiler": "~2.0.0", 
 
    "@angular/core": "~2.0.0", 
 
    "@angular/forms": "~2.0.0", 
 
    "@angular/http": "~2.0.0", 
 
    "@angular/material": "^2.0.0-beta.0", 
 
    "@angular/platform-browser": "~2.0.0", 
 
    "@angular/platform-browser-dynamic": "~2.0.0", 
 
    "@angular/router": "~3.0.0", 
 
    "@types/moment-timezone": "^0.2.33", 
 
    "angular-cli": "^1.0.0-beta.17", 
 
    "angular2-jwt": "^0.1.25", 
 
    "bootstrap": "^3.3.7", 
 
    "bourbon": "^4.2.7", 
 
    "core-js": "^2.4.1", 
 
    "es6-promise": "^4.0.5", 
 
    "font-awesome": "^4.7.0", 
 
    "hammerjs": "^2.0.8", 
 
    "moment": "^2.17.1", 
 
    "moment-timezone": "^0.5.10", 
 
    "node-sass": "^3.13.0", 
 
    "primeng": "^1.1.0", 
 
    "pubnub-angular2": "^1.0.0-beta.6", 
 
    "rxjs": "5.0.0-beta.12", 
 
    "ts-helpers": "^1.1.1", 
 
    "zone.js": "^0.6.23" 
 
    }, 
 
    "devDependencies": { 
 
    "@types/hammerjs": "^2.0.33", 
 
    "@types/jasmine": "^2.2.30", 
 
    "@types/moment": "^2.13.0", 
 
    "@types/moment-timezone": "^0.2.33", 
 
    "@types/node": "^6.0.42", 
 
    "angular-cli": "1.0.0-beta.17", 
 
    "bootstrap-sass": "^3.3.7", 
 
    "codelyzer": "~0.0.26", 
 
    "jasmine-core": "2.4.1", 
 
    "jasmine-spec-reporter": "2.5.0", 
 
    "karma": "1.2.0", 
 
    "karma-chrome-launcher": "^2.0.0", 
 
    "karma-cli": "^1.0.1", 
 
    "karma-jasmine": "^1.0.2", 
 
    "karma-remap-istanbul": "^0.2.1", 
 
    "protractor": "4.0.9", 
 
    "ts-node": "1.2.1", 
 
    "tslint": "3.13.0", 
 
    "typescript": "2.0.2" 
 
    } 
 
}

這是app.module

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

 
import { AppComponent } from './app.component'; 
 
import { HomeComponent } from './home/home.component'; 
 
import { DeliveryComponent } from './delivery/delivery.component'; 
 
import { AreaManagementComponent } from './area-management/area-management.component'; 
 
import { CountryComponent } from './area-management/country/country.component'; 
 

 
import { routing } from './app.routing'; 
 

 
import { AreaService } from "./area-management/area-management.service"; 
 
import { FDeliveryService } from "./f-delivery-setting/f-delivery.service"; 
 
import { ProvinceComponent } from './area-management/province/province.component'; 
 
import { SigninComponent } from './signin/signin.component'; 
 
import { CityComponent } from './area-management/city/city.component'; 
 
import { AreaComponent } from './area-management/area/area.component'; 
 
import { DeliveryAreaComponent } from './area-management/delivery-area/delivery-area.component'; 
 
import { FDeliverySettingComponent } from './f-delivery-setting/f-delivery-setting.component'; 
 
import { TermsComponent } from './terms/terms.component'; 
 
import { TermsListComponent } from './terms-list/terms-list.component'; 
 
import { TermsListService } from "./terms-list/terms-list.service"; 
 
import { TermsService } from "./terms/terms.service"; 
 
import { UserManagementComponent } from './user-management/user-management.component'; 
 
import { UserService} from "./user-management/user.service"; 
 
import { NavComponent } from './nav/nav.component'; 
 

 
import { MaterialModule } from '@angular/material'; 
 
import 'hammerjs'; 
 

 
import { 
 
    DialogModule, 
 
    ButtonModule, 
 
    DataTableModule, 
 
    InputTextModule, 
 
    TabViewModule, 
 
    DropdownModule, 
 
    EditorModule, 
 
    SharedModule, 
 
    AutoCompleteModule, 
 
    PanelMenuModule, 
 
    MenuModule, 
 
    ContextMenuModule, 
 
    PasswordModule, 
 
    FileUploadModule, 
 
    InputTextareaModule, 
 
    RadioButtonModule, 
 
    CalendarModule, 
 
    CheckboxModule, 
 
    ConfirmDialogModule, 
 
    ConfirmationService, InputMaskModule 
 
} from "primeng/primeng"; 
 
import { SignupComponent } from './signin/signup.component'; 
 
import { LicenseComponent } from './license/license.component'; 
 
import { TermsShowComponent } from './terms-show/terms-show.component'; 
 
import { AuthGuardService } from "./signin/auth-guard.service"; 
 
import { AuthService } from "./signin/auth.service"; 
 
import { UserDetailComponent } from './user-detail/user-detail.component'; 
 
import { LicenseDetailComponent } from './license/license-detail/license-detail.component'; 
 
import { UserDetailService } from "./user-detail/user-detail.service"; 
 
import { LicenseService } from "./license/license.service"; 
 
import { BranchManagementComponent } from './branch-management/branch-management.component'; 
 
import { BranchService } from "./branch-management/branch.service"; 
 
import { BranchDetailComponent } from './branch-management/branch-detail/branch-detail.component'; 
 
import { InternalComponent } from './home/internal/internal.component'; 
 
import { ExternalComponent } from './home/external/external.component'; 
 
import { ClassificationComponent } from './classification/classification.component'; 
 
import { ClientComponent } from './client/client.component'; 
 
import { DmBillingComponent } from './payment-billing/dm-billing/dm-billing.component'; 
 
import { PartnerBillingComponent } from './payment-billing/partner-billing/partner-billing.component'; 
 
import { WowbillingComponent } from './payment-billing/wowbilling/wowbilling.component'; 
 
import { DailyReportingComponent } from './daily-reporting/daily-reporting.component'; 
 
import { AccountClosingComponent } from './account-closing/account-closing.component'; 
 
import { AccountingComponent } from "./accounting-balance/accounting-balance.component"; 
 
import { DeliveryService } from "./delivery/delivery.service"; 
 
import { UserAddComponent } from './user-add/user-add.component'; 
 
import { NavService } from "./nav/nav.service"; 
 
import { PartnerService } from "./shared/partner.service"; 
 
import { ClientService } from "./shared/client.service"; 
 
import { PartnerComponent } from './partner/partner.component'; 
 
import { PartnerDetailComponent } from './partner/partner-detail/partner-detail.component'; 
 
import { NewBranchComponent } from './branch-management/new-branch/new-branch.component'; 
 
import { ForgetPasswordComponent } from './signin/forget-password/forget-password.component'; 
 
import { DeliveryDetailComponent } from './delivery/delivery-detail/delivery-detail.component'; 
 
import {FileUploadService} from "./shared/file-upload.service"; 
 
import { PartnerEditComponent } from './partner/partner-edit/partner-edit.component'; 
 

 
@NgModule({ 
 
    declarations: [ 
 
    AppComponent, 
 
    HomeComponent, 
 
    DeliveryComponent, 
 
    AreaManagementComponent, 
 
    CountryComponent, 
 
    ProvinceComponent, 
 
    SigninComponent, 
 
    CityComponent, 
 
    AreaComponent, 
 
    DeliveryAreaComponent, 
 
    FDeliverySettingComponent, 
 
    TermsComponent, 
 
    TermsListComponent, 
 
    UserManagementComponent, 
 
    NavComponent, 
 
    SignupComponent, 
 
    LicenseComponent, 
 
    TermsShowComponent, 
 
    UserDetailComponent, 
 
    LicenseDetailComponent, 
 
    BranchManagementComponent, 
 
    BranchDetailComponent, 
 
    InternalComponent, 
 
    ExternalComponent, 
 
    AccountingComponent, 
 
    ClassificationComponent, 
 
    ClientComponent, 
 
    DmBillingComponent, 
 
    PartnerBillingComponent, 
 
    WowbillingComponent, 
 
    DailyReportingComponent, 
 
    AccountClosingComponent, 
 
    UserAddComponent, 
 
    PartnerComponent, 
 
    PartnerDetailComponent, 
 
    NewBranchComponent, 
 
    ForgetPasswordComponent, 
 
    DeliveryDetailComponent, 
 
    PartnerEditComponent 
 
    ], 
 
    imports: [ 
 
    BrowserModule, 
 
    FormsModule, 
 
    HttpModule, 
 
    routing, 
 
    MaterialModule.forRoot(), 
 
    ReactiveFormsModule, 
 

 
    //primeNG 
 
    InputTextareaModule, 
 
    InputTextModule, 
 
    DataTableModule, 
 
    DialogModule, 
 
    DropdownModule, 
 
    ButtonModule, 
 
    TabViewModule, 
 
    EditorModule, 
 
    SharedModule, 
 
    PanelMenuModule, 
 
    MenuModule, 
 
    ContextMenuModule, 
 
    PasswordModule, 
 
    FileUploadModule, 
 
    RadioButtonModule, 
 
    CalendarModule, 
 
    CheckboxModule, 
 
    ConfirmDialogModule, 
 
    InputMaskModule 
 
    ], 
 
    providers: [ 
 
    AreaService, 
 
    FDeliveryService, 
 
    TermsListService, 
 
    TermsService, 
 
    UserService, 
 
    AuthGuardService, 
 
    AuthService, 
 
    UserDetailService, 
 
    LicenseService, 
 
    BranchService, 
 
    DeliveryService, 
 
    NavService, 
 
    PartnerService, 
 
    ClientService, 
 
    ConfirmationService, 
 
    FileUploadService, 
 
    
 
    window.PubNubAngular 
 
    ], 
 
    bootstrap: [AppComponent] 
 
}) 
 
export class AppModule { }

它使錯誤。我有一個導入pubnub的問題，所以我沒有任何關於此的代碼。我所做的導入在app.module中只添加了windows.PubNubAngular到providers。

Uncaught Error: Invalid provider for the NgModule 'AppModule' - only instances of Provider and Type are allowed

如果你知道如何導入和angular2使用pubnub，請大家給一點建議。

預先感謝您！

來源

2016-12-27 Mingyu Jeon

你可能想分享一些關於你的代碼的細節。另外，你在什麼環境中運行它？瀏覽器？還有別的嗎？ –

是的，請分享你的代碼。 –

對不起，我現在添加詳細信息 –

使用的版本與typescript不兼容，新版本已經兼容，您必須重新下載並按照最後一個文檔。

來源

2016-12-30 02:06:30

你的意思是'pubnub-angular2 @ 1.0.0-beta7'嗎？ –

這個新版本與TS兼容 –

如何導入和使用angular2中的pubnub

回答

相關問題