Migration Angular 5 to angular 7

问题

I have migrated from angular 5 to Angular 7. After that I have a problem with my RxJs operation like observable and my @ngrx/store. Here is my error:

ERROR in node_modules/@ngrx/store/src/actions_subject.d.ts(2,10): error TS2305: Module C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/reducer_manager.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/reducer_manager.d.ts(3,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@ngrx/store/src/scanned_actions_subject.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Subject"' has no exported member 'Subject'.
node_modules/@ngrx/store/src/state.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/BehaviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/@ngrx/store/src/state.d.ts(3,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@ngrx/store/src/store.d.ts(2,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observer"' has no exported member 'Observer'.
node_modules/@ngrx/store/src/store.d.ts(3,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/@ngrx/store/src/store.d.ts(4,10): error TS2305: Module '"C:/Users/AbousyllabaNdiaye/Documents/amundi/ClientAmundiFileIntegration/node_modules/rxjs/Operator"' has no exported member 'Operator'.
node_modules/rxjs/BehaviorSubject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/BehaviorSubject'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/Observer.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observer'.
node_modules/rxjs/Operator.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Operator'.
node_modules/rxjs/Subject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subject'.
src/app/habilitation/habilitation.component.ts(96,36): error TS2339: Property 'subscribe' does not exist on type 'Store<Principal>'.
src/app/sidebare/sidebare.component.ts(17,36): error TS2339: Property 'subscribe' does not exist on type 'Store<Principal>'.

回答1:

You should fix your Rxjs imports. There are some pretty heavy change in the use of rxjs from v6 onwards.

Try using: import { BehaviorSubject } from 'rxjs';

similar with other imports:

import { Observable } from 'rxjs'; import { Operator } from 'rxjs'; All these exports are done from rxjs now. You can open up rxjs/index.d.ts to see all exports of rxjs.

Due to the change with pipe and conflict with JavaScript reserved words, some operators had to be renamed :

do becomes tap
catch and finally become catchError finalize
switch becomes switchAll

other functions were renamed as well :

fromPromise becomes from
throw becomes throwError

回答2:

Please follow the Below points while upgrading angular 5 to 7

Angular Update Guide | 5.2 -> 7.2 for Advanced Apps

Before Updating

1) If you import any animations services or tools from @angular/core, you should import them from @angular/animations

2) Replace ngOutletContext with ngTemplateOutletContext.

3) Replace CollectionChangeRecord with IterableChangeRecord

4) Anywhere you use Renderer, now use Renderer2

5) If you use preserveQueryParams, instead use queryParamsHandling

6) If you use the legacy HttpModule and the Http service, switch to HttpClientModule and the HttpClient service. HttpClient simplifies the default ergonomics (You don't need to map to json anymore) and now supports typed return values and interceptors. Read more on angular.io

7) If you use DOCUMENT from @angular/platform-browser, you should start to import this from @angular/common

8) Anywhere you use ReflectiveInjector, now use StaticInjector

9) Choose a value of off for preserveWhitespaces in your tsconfig.json under the angularCompilerOptions key to gain the benefits of this setting, which was set to off by default in v6.

During the Update

1) Make sure you are using Node 8 or later

2) Update your Angular CLI globally and locally, and migrate the configuration to the new angular.json format by running the following:

npm install -g @angular/cli npm install @angular/cli ng update @angular/cli

3) Update any scripts you may have in your package.json to use the latest Angular CLI commands. All CLI commands now use two dashes for flags (eg ng build --prod --source-map) to be POSIX compliant.

4) Update all of your Angular framework packages to v6, and the correct version of RxJS and TypeScript.

ng update @angular/core

After the update, TypeScript and RxJS will more accurately flow types across your application, which may expose existing errors in your application's typings

5) In Angular Forms, AbstractControl#statusChanges now emits an event of PENDING when you call AbstractControl#markAsPending. Ensure that if you are filtering or checking events from statusChanges that you account for the new event when calling markAsPending.

6) If you use totalTime from an AnimationEvent within a disabled Zone, it will no longer report a time of 0. To detect if an animation event is reporting a disabled animation then the event.disabled property can be used instead.

7) ngModelChange is now emitted after the value/validity is updated on its control instead of before to better match expectations. If you rely on the order of these events, you will need to begin tracking the old value in your component.

8) Update Angular Material to the latest version.

ng update @angular/material

This will also automatically migrate deprecated APIs.

9) Use ng update or your normal package manager tools to identify and update other dependencies.

10) If you have TypeScript configured to be strict (if you have set strict to true in your tsconfig.json file), update your tsconfig.json to disable strictPropertyInitialization or move property initialization from ngOnInit to your constructor. You can learn more about this flag on the TypeScript 2.7 release notes.

11) 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

12) Angular now uses TypeScript 3.1, read more about any potential breaking changes: https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-1.html

13) Angular has now added support for Node 10: https://nodejs.org/en/blog/release/v10.0.0/

14) Update to v7 of the core framework and CLI by running ng update @angular/cli @angular/core in your terminal

15) Update Angular Material to v7 by running ng update @angular/material in your terminal. You should test your application for sizing and layout changes.

16) If you use screenshot tests, you'll need to regenerate your screenshot golden files as many minor visual tweaks have landed

After the Update

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

npm uninstall rxjs-compat

2) If you use the Angular Service worker, migrate any versionedFiles to the files array. The behavior is the same.

3) Stop using matRippleSpeedFactor and baseSpeedFactor for ripples, using Animation config instead.

回答3:

npm i rxjs-compat

If you want to get the solution working quickly! Otherwise follow the solution above.

来源：https://stackoverflow.com/questions/53818560/migration-angular-5-to-angular-7

标签

angular

rxjs

store

angular7