Angular 5 - Compatibility

[oarshad]

Getting this error while trying to compile code using Angular 5, and Angular CLI 1.5.

ERROR in ./node_modules/@stomp/ng2-stompjs/index.ts Module build failed: Error: D:\dev-tracker-app\tracker-app-admin\tracker-app-ng\node_modules\@stomp\ng2-stompjs\index.ts is not part of the compilatio n output. Please check the other error messages for details. at AngularCompilerPlugin.getCompiledFile (D:\dev-tracker-app\tracker-app-admin\tracker-app-ng\node_modules\@ngtools\webpack\src\angular_compiler_p lugin.js:629:23) at plugin.done.then (D:\dev-tracker-app\tracker-app-admin\tracker-app-ng\node_modules\@ngtools\webpack\src\loader.js:467:39) at process._tickCallback (internal/process/next_tick.js:103:7) @ ./src/app/admin/services/websocket.service.ts 8:0-62 @ ./src/app/admin/admin.module.ts @ ./src/$$_lazy_route_resource lazy @ ./node_modules/@angular/core/esm5/core.js @ ./src/main.ts @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

[oarshad]

It compiles after changing the following line:

import {Observable, Observer, Subscription} from 'rxjs/Rx';
with these:

import {Observable} from 'rxjs/Observable'; import {Observer} from 'rxjs/Observer'; import {Subscription} from 'rxjs/Subscription';

[kum-deepak]

I will give Angular 5 a shot in few days. Meanwhile if you get additional errors, you might also need to import few operators. The imports might look like:

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/share';

[kum-deepak]

Or may be:

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';
import { filter, share } from 'rxjs/operators';

Please let me know if any of the above or something else actually works.

[oarshad]

First one worked. Didn't try the second set.

[kum-deepak]

Thanks!

[janwytze]

@kum-deepak Could the branch dyna be merged to master?

[kum-deepak]

Merged! I will wait for some more feedback before releasing a new NPM version.

[kum-deepak]

I am trying to use this library unsuccessfully with Angular 5, it will be great if you can share a working sample with Angular 5.

[janwytze]

I've added "@stomp/ng2-stompjs": "github:stomp-js/ng2-stompjs",. to my package.json, so I got the newest version. But I still get the same error.

[ma-jahn]

Hi,

i am using Angular 5 along with RXJS 5.5.2.
After changing the imports of stomp.service.ts to

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/share';

I get the index.ts is not part of the compilation output error.

When changing the imports of stomp.service.ts to

import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';
import { Subject } from 'rxjs/Subject';
import { Subscription } from 'rxjs/Subscription';
import { filter, share } from 'rxjs/operators';

i see the following Error:

ERROR in node_modules/@stomp/ng2-stompjs/src/stomp.service.ts(77,8): error TS2339: Property 'filter' does not exist on type 'BehaviorSubject'.

@oarshad : Which version of rxjs are you using?

[kum-deepak]

I have now been able to create a working version with Angular 5. The sample is at: https://github.com/stomp-js/ng5-stompjs-demo

Created a new Angular 5 project using latest Angular CLI and placed (only) the relevant code files from Angular 4 version of the demo. Added bootstrap (needed for the CSS).

What changes I did:

• A minor change in the library code (now committed in the master branch).
• Important - in src/tsconfig.app.json placed the following:

    "paths": {
      "@stomp/ng2-stompjs": ["../node_modules/@stomp/ng2-stompjs"]
    },

See: (https://github.com/stomp-js/ng5-stompjs-demo/blob/3594c458f98e7c4523b7d274c6dbf94e600f2c8c/src/tsconfig.app.json#L7)

This is needed, most likely, because this library is distributed as ts files.

[ma-jahn]

Thank you so much! This is working just fine.

[janwytze]

Thanks, is there a way to include it in this package? I will try to find one

[kum-deepak]

@jwz104 the issue is that I have not been able to reliably package this library as compiled JS files. Once that is done this step will not be needed. We can collaborate on #38

[janwytze]

That's sad. It's not a very big problem, only one extra step.

[kum-deepak]

Please use this library from angular5 branch as of now.

I am cleaning up the underlying js library https://github.com/stomp-js/stomp-websocket (branch v4)

[kum-deepak]

All the required changes has been merged and version 0.6.1 been released. This is compiled JS release, so, no manual steps should be needed.

[kum-deepak]

If no further issue reported, I will close this issue in few days.

[muhammad-Usman85]

i added this one and it fixed my problem
->npm i @stomp/ng2-stompjs