Angular 6 with rxjs 6.0.0 Error

[chinkan]

Hi,

I just use angluar-cli create a new angular 6 project and try to add ngx-admin-lte in it.
However, when I try to run ng serve it show error

ERROR in node_modules/@ngx-translate/core/src/translate.directive.d.ts(2,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/@ngx-translate/core/src/translate.loader.d.ts(1,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@ngx-translate/core/src/translate.service.d.ts(2,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/angular2-toaster/src/toaster.service.d.ts(3,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/angular2-toaster/src/toaster.service.d.ts(5,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Subject"' has no exported member 'Subject'.
node_modules/ngx-admin-lte/services/breadcrumb.service.d.ts(1,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/ReplaySubject"' has no exported member 'ReplaySubject'.
node_modules/ngx-admin-lte/services/control-sidebar.service.d.ts(1,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'ReplaySubject'.
node_modules/ngx-admin-lte/services/footer.service.d.ts(1,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'ReplaySubject'.
node_modules/ngx-admin-lte/services/logo.service.d.ts(1,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'ReplaySubject'.
node_modules/ngx-admin-lte/services/menu.service.d.ts(1,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'ReplaySubject'.
node_modules/ngx-admin-lte/services/messages.service.d.ts(2,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'Subject'.
node_modules/ngx-admin-lte/services/messages.service.d.ts(2,19): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'ReplaySubject'.
node_modules/ngx-admin-lte/services/notifications.service.d.ts(2,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'Subject'.
node_modules/ngx-admin-lte/services/notifications.service.d.ts(2,19): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'ReplaySubject'.
node_modules/ngx-admin-lte/services/rest.service.d.ts(3,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/ngx-admin-lte/services/user.service.d.ts(2,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'ReplaySubject'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/ReplaySubject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/ReplaySubject'.
node_modules/rxjs/Rx.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat'.
node_modules/rxjs/Subject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subject'.
node_modules/rxjs/Subscription.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subscription'.

I then found out the issue is that ngx-translate 8.0.0 is not supported to rxjs 6.0.0, it need to update the ngx-translate version to 10.0.0. (References: ngx-translate/core#816)

Next I found out the angular2-toaster also need to update to support rxjs 6. So I did update the angular2-toaster 6.0.0

Unfortunately, I still got the error from ngx-admin-lte:

ERROR in node_modules/ngx-admin-lte/node_modules/@ngx-translate/core/src/translate.directive.d.ts(2,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/ngx-admin-lte/node_modules/@ngx-translate/core/src/translate.loader.d.ts(1,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/ngx-admin-lte/node_modules/@ngx-translate/core/src/translate.service.d.ts(2,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/ngx-admin-lte/node_modules/angular2-toaster/src/toaster.service.d.ts(3,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/ngx-admin-lte/node_modules/angular2-toaster/src/toaster.service.d.ts(5,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Subject"' has no exported member 'Subject'.
node_modules/ngx-admin-lte/services/breadcrumb.service.d.ts(1,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/ReplaySubject"' has no exported member 'ReplaySubject'.
node_modules/ngx-admin-lte/services/control-sidebar.service.d.ts(1,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'ReplaySubject'.
node_modules/ngx-admin-lte/services/footer.service.d.ts(1,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'ReplaySubject'.
node_modules/ngx-admin-lte/services/logo.service.d.ts(1,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'ReplaySubject'.
node_modules/ngx-admin-lte/services/menu.service.d.ts(1,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'ReplaySubject'.
node_modules/ngx-admin-lte/services/messages.service.d.ts(2,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'Subject'.
node_modules/ngx-admin-lte/services/messages.service.d.ts(2,19): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'ReplaySubject'.
node_modules/ngx-admin-lte/services/notifications.service.d.ts(2,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'Subject'.
node_modules/ngx-admin-lte/services/notifications.service.d.ts(2,19): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'ReplaySubject'.
node_modules/ngx-admin-lte/services/rest.service.d.ts(3,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/ngx-admin-lte/services/user.service.d.ts(2,10): error TS2305: Module '"D:/Workspaces/temp/ng6-test/node_modules/rxjs/Rx"' has no exported member 'ReplaySubject'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/ReplaySubject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/ReplaySubject'.
node_modules/rxjs/Rx.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat'.
node_modules/rxjs/Subject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subject'.
node_modules/rxjs/Subscription.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subscription'.

i ｢wdm｣: Failed to compile.

It seems to be the ngx-admin-lte still using the ngx-translate 8.0.0. How can I fix it? Thanks :)

[catull]

You can only go full Angular 6 if you do not have dependencies to rxjs prior to version 6.
This is valid for direct or transitive dependencies.

Check it with this: npm list rxjs.
This only works if you have an npm install.

One of the implicit dependencies of Angular 6 is rxjs 6.0.
Now, ngx-admin-lte comes with rxjs 5.x, hence you have to install a helper package.
The magic happens with npm install rxjs-compat.

I use ngx-admin-lte in an Angular 6.0.3 project successfully, thanks to rxjs-compat.

You can remove this package as soon as your dependent packages - which use rxjs - have upgraded to rxjs 6+.

See https://update.angular.io/, the last point mentions:

After the Update

Remove deprecated RxJS 6 features using rxjs-tslint auto update rules.

For most applications this will mean running the following two commands:

npm install -g rxjs-tslint
rxjs-5-to-6-migrate -p src/tsconfig.app.json

Once you and all of your dependencies have updated to RxJS 6, remove rxjs-compat.

In the long term, ngx-admin-lte has to upgrade to Angular 6.

Good luck!

[TwanoO67]

In the long term, ngx-admin-lte has to upgrade to Angular 6.

Yep! Agree with that :)
I'm very busy at the moment but it's definitively in my plans for this summer :)

[chinkan]

Thanks! It works after install rxjs-compat. 👍

[catull]

@TwanoO67 The effort is not so high.
The question is though, how far back do you want to offer support.

You cannot support both code bases in source code, Angular 6 on the one hand and Angular 5 or 4 on the other.

The reason is that you either import (Angular 6+)

import { Subject } from 'rxjs';

or (Angular 4, 5, 6, ... )

import { Subject } from 'rxjs/Subject';

For the second case, you need rxjs-compat.

[robertoferreirajrr]

Hi @chinkan how you did to upgrade these packets?

angular2-toaster
ngx-translate

I'm with some problems, I'm trying to use the ngx-admin-lte in my project but I'm receiving an error from ToasterService:

ERROR Error: Uncaught (in promise): TypeError: (intermediate value).share is not a function
TypeError: (intermediate value).share is not a function
    at new ToasterService (toaster.service.js:25)

I Believe that upgrading these two packets will solve my problem.
Another question: ngx-admin-lte is compatible with angular 6.1.7?

I'm confusing about that, the description of the project is "Admin LTE for Angular4,5,6", but seems that using angular 6 we have a lot of dependency versions problems...

[f4ro444]

Hi how you did to upgrade these packets?

angular2-toaster
ngx-translate