Angular2与ActionCable整合

Question

我正在尝试通过在前端 https://github.com/mwalsher/actioncable-js[=16] 上集成此库，使 Angular2 应用程序（使用 angular-cli 引导）与 Rails 的 ActionCable 一起工作=]

我 npm 安装了库，

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

'actioncable-js/index.js',

这在系统中-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';

但生成错误并显示此消息：

Cannot find module 'actioncable-js'.

有人知道为什么吗？

我猜是缺少输入，但我不确定如何解决这个问题。

Answer 1

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

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
  }
}

Answer 2

Rails 已经在这里发布了一个官方的 actioncable 包：

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

Angular2与ActionCable整合

Angular 2 and ActionCable integration

ruby-on-rails

ruby-on-rails-5

actioncable

angular