Angular 2 和 ActionCable 集成

Question

我正在尝试通过将此库集成到前端 https://github.com/mwalsher/actioncable-js 来使 Angular2 应用程序（使用 angular-cli 引导）与 Rails 的 ActionCable 一起使用。

我 npm 安装了 lib，

将此添加到 angular-cli-build.js

'actioncable-js/index.js',

这在 system-config.ts 中：

/** Map relative paths to URLs. */
const map: any = {
  'moment': 'vendor/moment/moment.js',
  'ng2-bootstrap': 'vendor/ng2-bootstrap',
  'lodash': 'vendor/lodash',
  'actioncable-js': 'vendor/actioncable-js'
};

/** User packages configuration. */
const packages: any = {

  'ng2-bootstrap': {
    format: 'cjs',
    defaultExtension: 'js',
    main: 'ng2-bootstrap.js'

  },
  'actioncable-js':{
    main: 'index.js'
  },
  'moment':{
    format: 'cjs'
  },
  'lodash':{
    main: "lodash.js"
  }
};

将此添加到我的组件中：

import { ActionCable } from 'actioncable-js';

但此消息的构建错误：

找不到模块“actioncable-js”。

有人知道为什么吗？

我的猜测是缺少输入，但我不确定如何解决此问题。

Answer 1

Rails 已在此处发布了官方可操作包：

https://www.npmjs.com/package/actioncable

Answer 2

不，打字没有问题。您缺少的是如何在 angular 2 typescript 应用程序中使用 Javascript 库。如果要在 TypeScript 应用程序中使用 JavaScript 库，则需要导入库 import 'actioncable-js'，然后必须声明变量。 declare let ActionCable:any 这告诉 typescript 我们的应用程序中有一个全局变量 ActionCable。现在您可以在您的 Angular 2 组件实现中访问它并做任何您想做的事情。你可以阅读讨论here。

angular-cli.build.js

vendorNpmFiles: ['actioncable-js/**/*.js']

systemjs.config.js

  map:{ 'actioncable-js':'vendor/actioncable-js/dist/action_cable.js'}

  package:{'actioncable-js': defaultExtension: 'js'}  }

`

app.component.ts

import 'actioncable-js'; 

declare let ActionCable:any;

@Component({
   ....    
})

export class AppComponent implements OnInit{
  constructor(){}
  ngOnInIt(){
   //can access *ActionCable* object here
  }
}