Angular 6 with rxjs 6.0.0 Error

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: https://github.com/ngx-translate/core/issues/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!

[f4ro444]

Hi how you did to upgrade these packets?

angular2-toaster ngx-translate