Angular 2 and ActionCable integration

Question

I'm trying to make a Angular2 app (bootstrapped with angular-cli) work with Rails's ActionCable by integrating this lib on the frontend https://github.com/mwalsher/actioncable-js

I npm installed the lib,

added this to angular-cli-build.js

'actioncable-js/index.js',

and this in 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"
  }
};

added this to my component:

import { ActionCable } from 'actioncable-js';

but the build errors with this message:

Cannot find module 'actioncable-js'.

anyone has any idea why?

My guess is typings are missing, but I'm not sure how to fix this.

Snowman · Accepted Answer · 2017-02-05T16:14:33.580

5

Rails has since released an official actioncable package here:

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

edited Feb 05 '17 at 16:14

answered Nov 29 '16 at 22:18

Snowman

31,411
46
180
303

1

Quick tutorial link is broken. Could you please share a new one? Thanks in advance. – Pasp Ruby Jan 09 '17 at 01:05

score 1 · Answer 2 · edited May 23 '17 at 12:02

1

No there is no problem with typings. What you are missing is how to use Javascript library in angular 2 typescript application. If you want to use JavaScript library in your TypeScript application, then you need to import the library import 'actioncable-js' and then you have to declare the variable. declare let ActionCable:any This tells typescript we have a global variable ActionCable present in our application. Now you can access it in your angular 2 component implementations and do whatever you want to do. You can read the discussion 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
  }
}

edited May 23 '17 at 12:02

Community

1
1

answered Aug 28 '16 at 12:20

Kunal Sharma

371
2
20

So I followed the steps, everything compiles and runs now, but when I try to console log ActionCable in ngOnInit() i get this error in the console: `EXCEPTION: ReferenceError: Can't find variable: ActionCable` – avatsaev Aug 28 '16 at 21:27
1

@avatsaev I mistakenly wrote `package:{'actioncable-js': format: 'js'} }`. Change this to `package:{'actioncable-js': defaultExtension: 'js'} }`. Hopefully this will work. – Kunal Sharma Aug 28 '16 at 22:27
Yes, it worked, I knew someone on SO would have the solution. the only thing I don't like about this is the `declare let ActionCable:any;`, feels like a hack. Thank you for your help – avatsaev Aug 29 '16 at 07:51

Angular 2 and ActionCable integration

2 Answers2