角2与ActionCable积分

Question

我试图通过将这个库集成到前端的Angular2应用程序(带有角-cli引导的)与Rails的ActionCable一起工作。

我国家预防机制安装了库，

将此添加到角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在此发布了一个正式的actioncable包：

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

Answer 2

不，打字没有问题。您所缺少的是如何在角2类型记录应用程序中使用Javascript库。如果要在JavaScript应用程序中使用TypeScript库，则需要导入库import 'actioncable-js'，然后必须声明变量。declare let ActionCable:any，这告诉类型记录，我们的应用程序中有一个全局变量ActionCable。现在，您可以在您的角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
  }
}