将 pubnub 添加到 angular2 cli 项目

2024-04-20

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

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

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

In the 应用程序模块.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 提供程序。

提前致谢。


从我从你的代码中可以看出,你可能缺少的唯一一件事是你的index.html中需要的脚本标签,确保你添加这个......

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

这是一个笨蛋pudnub得到妥善实施。

plunker https://plnkr.co/edit/jz9z6wArruL04qa2IY6h?p=preview

EDIT

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

  1. npm 安装 npm 安装 pubnub

  2. npm 安装 pubnub-angular2

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

  4. 导入到app.moduleimport { PubNubAngular } from 'pubnub-angular2';

  5. 将提供者添加到app.moduleproviders: [ PubNubAngular ]

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

Angular-cli 编辑

去除<script>标签从你的index.html并将其添加到你的angular-cli.json像这样的文件...

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 pubnub 添加到 angular2 cli 项目 的相关文章

随机推荐

  • MySQL 的 COUNT 运行总计

    我知道set running sum 0 running sum running sum 方法 但是 它似乎不适用于我的情况 我的查询 SELECT DISTINCT date COUNT AS count FROM table1 WHER
  • 如何知道我的项目上运行的是哪个版本的 PyMongo

    我正在开发一个python项目 在需求文件中我有三种不同类型的PyMongo Flask PyMongo 0 3 1 pymongo 2 7 flask mongoengine 0 7 1 如何定义我正在使用哪个版本 如果你有pip安装后
  • 从 Android 打印到 AirPrint 打印机 [关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 有谁听说过有人在 Android 上
  • 如何使用where子句从存储在PostgreSQL中jsonb列类型的JSON数组中修改或删除特定的JSON对象?

    在我的 Postgres 数据库中 我有一个具有 jsonb 数据类型的表列 在该列中 我存储 JSON 数组 现在 我想删除或修改数组内的特定 JSON 对象 我的 JSON 数组看起来像 ModuleId 1 ModuleName XY
  • 使用一项识别服务保护 2 个不同的 Web 应用程序

    使用一项识别服务保护 2 个不同的 Web 应用程序 身份服务 Thinktecture身份服务V2应用1 Asp net MVC 5应用应用2 Asp net Web API应用 上述应用程序1和应用程序2是不同的项目并托管在不同的服务器
  • 编译器是否优化了净零位移?

    我有一些代码 如下面的代码块 我不允许发布原始代码 cpp我认为正在编译的文件clang Ubuntu clang version 3 5 2 3ubuntu1 tags RELEASE 352 final based on LLVM 3
  • mysql 中的 Rank() 优于 Partition by

    我完全困惑于在mysql中从rank over partition by x order by y desc 创建一个新列 LoginRank 在sql server中 我将编写以下查询 以创建一个按 login 分组并按 id 排序的列
  • 在 AS3 中快速设置关键帧上的实例名称

    现在在 Flash CS3 及更高版本 使用 Actionscript 3 中 如果您在图层中的多个关键帧中使用相同的实例 并且您决定稍后分配或更改实例名称 则必须转到每个关键帧并设置实例名称 这是一个很大的麻烦 有没有更快或更好的方法来做
  • 为什么 _ destroy 在语句末尾?

    我看到了其他一些问题answers https stackoverflow com a 25877389 221955说明let foo 在语句末尾而不是在作用域退出时销毁结果 这就是let a foo does 我找不到任何官方描述 也找
  • 在android中通过滑动删除应用程序时关闭服务

    当用户从当前运行的应用程序列表中删除应用程序时 我想关闭服务 在这里 我正在做的事情是 当用户启动应用程序时 服务就会启动并保持进行中 但是 当用户通过滑动删除应用程序时 就会创建新服务 我想关闭该服务 下面是我的代码 Start serv
  • 解析 ksoap2 响应

    我使用 ksoap2 lib 从 Android 客户端与 SOAP Web 服务进行通信 ksoap 团队做得很好 但问题是 没有任何好的例子如何在不同方面正确使用它 例如 我得到肥皂响应以下数据 anyType StatusSettin
  • 为什么 Mongodb 中的 ISO 日期显示提前一天?

    存储的日期如下所示 date of birth ISODate 1920 01 02T00 00 00Z 使用 moment 它在模型中被格式化 以便填充用于更新文档的输入 如下所示 AuthorSchema virtual date of
  • 如何从 JPEG 中裁剪多个矩形或正方形?

    我有一个 jpeg 我想从其中裁剪包含图形的部分 底部的部分 截至目前 我使用此代码来实现相同的目的 from PIL import Image img Image open r D aakash graph2 jpg area 20 32
  • 如何跳转到 vim 中不同选项卡内的标记?

    我使用 MacVim 通常会打开许多 选项卡 我希望能够在任何打开的文件中放置标记并在它们之间跳转 mK and K当标记位于同一个选项卡中时效果很好 但我必须使用gt找到选项卡 然后K找到标记 一定有更好的方法吗 这是一个快速而肮脏的技巧
  • WPF 文本框插入符消失

    我正在开发一个 WPF 应用程序TextBox成分 我的文本框插入符有问题 看来 取决于地点TextBox插入符号本身在某些特定位置消失 插入符号显示 插入符号消失 插入符返回 The TextBox风格很简单
  • 如何将 GPS 数据从 Android 发送到网站?

    我是 Android 和 Web 服务开发新手 目前我正在开发Android程序 该程序将发送经度和纬度信息到asp net网站 以显示位置更改网站地图 问题是 如何将此数据发送到网站 最佳实践 对合适框架的任何建议 从Android应用程
  • 如何将三个列表压缩到嵌套字典中

    我有三个清单 z1 A A B B z2 k1 k2 k1 k2 z3 v1 v2 v3 v4 当我写时 print dict zip z2 z3 这是我的输出 k2 v4 k1 v3 我期望这样 A k1 v1 k2 v2 B k1 v3
  • 为什么 for(var i in Math) 不迭代 Javascript 中的 Math.* ?

    由于某种原因 for var i in Math console log i 没有显示 Javascript 中预期的 tan cos atan2 E PI Because Math是一个内置对象 其属性已标记不可枚举 许多内置对象都有这种
  • 我可以使用 Meteor 将 this._id 值从一个模板助手传递到另一个模板助手吗?

    我有以下模板 html 及其受人尊敬的管理器 js 文件 admin管理类别 管理员添加类别 管理更新类别 考虑以下
  • 将 pubnub 添加到 angular2 cli 项目

    我想将 PubNub 添加到 angular2 cli 项目中 问题出在链接上 但是 我按照 npmjs com 上 pubnub angular2 包的说明进行操作 当我尝试在浏览器中加载它时 错误消息是这样的 例外 PubNub 不在全