update angular from version 5 to 6

Question

I have bit confused after updating angular5 to 6 because of the occuring below errors.

i have updated the rxjs version from 5.5 to 6.1.0 and also updated typescript version to 2.7.2.

i have followed the https://update.angular.io version update from 5.2 to 6.0 and rxjs version update guide https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md

here is the error occurred:

yarn run v1.5.1
$ ng serve --open --proxy-config proxy.conf.js 
Could not find module "@angular-devkit/build-angular" from "/home/aravinda/Desktop/example/ui".
Error: Could not find module "@angular-devkit/build-angular" from "/home/aravinda/Desktop/example/ui".
    at Object.resolve (/home/aravinda/Desktop/example/ui/node_modules/@angular-devkit/core/node/resolve.js:141:11)
    at Observable.rxjs_1.Observable [as _subscribe] (/home/aravinda/Desktop/example/ui/node_modules/@angular-devkit/architect/src/architect.js:132:40)
    at Observable.subscribe (/home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/Observable.js:162:69)
    at DoOperator.call (/home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/operators/tap.js:71:23)
    at Observable.subscribe (/home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/Observable.js:159:22)
    at /home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/util/subscribeTo.js:22:31
    at Object.subscribeToResult (/home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/util/subscribeToResult.js:7:45)
    at MergeMapSubscriber._innerSub (/home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/operators/mergeMap.js:132:38)
    at MergeMapSubscriber._tryNext (/home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/operators/mergeMap.js:129:14)
    at MergeMapSubscriber._next (/home/aravinda/Desktop/example/ui/node_modules/rxjs/internal/operators/mergeMap.js:112:18)
error An unexpected error occurred: "Command failed.
Exit code: 1
Command: sh
Arguments: -c ng serve --open --proxy-config proxy.conf.js 

Answer 1

Follow the instruction from this link Angular 5.2 update to angular 6 visual studio mac 7.5.2 using Asp.net core 2.1. This is the solution for visual studio 2017 and visual studio for mac

Answer 2

Follow this link to update to angular 6

How to update / upgrade from Angular 4 to Angular 5+

Now open the boot.server.ts file from client app

and change the following line of code

import 'reflect-metadata';
import 'zone.js';
import 'rxjs/add/operator/first';
import { APP_BASE_HREF } from '@angular/common';
import { enableProdMode, ApplicationRef, NgZone, ValueProvider } from '@angular/core';
import { platformDynamicServer, PlatformState, INITIAL_CONFIG } from '@angular/platform-server';
import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
import { AppModule } from './app/app.server.module';

enableProdMode();

export default createServerRenderer(params => {
    const providers = [
        { provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } },
        { provide: APP_BASE_HREF, useValue: params.baseUrl },
        { provide: 'BASE_URL', useValue: params.origin + params.baseUrl },
    ];

    return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => {
        const appRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
        const state = moduleRef.injector.get(PlatformState);
        const zone = moduleRef.injector.get(NgZone);

        return new Promise<RenderResult>((resolve, reject) => {
            zone.onError.subscribe((errorInfo: any) => reject(errorInfo));
            appRef.isStable.first(isStable => isStable).subscribe(() => {
                // Because 'onStable' fires before 'onError', we have to delay slightly before
                // completing the request in case there's an error to report
                setImmediate(() => {
                    resolve({
                        html: state.renderToString()
                    });
                    moduleRef.destroy();
                });
            });
        });
    });
});

to the below line of code

import 'reflect-metadata';
import 'zone.js';
import 'rxjs/add/operator/first';
import { APP_BASE_HREF } from '@angular/common';
import { enableProdMode, ApplicationRef, NgZone, ValueProvider } from '@angular/core';
import { platformDynamicServer, PlatformState, INITIAL_CONFIG } from '@angular/platform-server';
import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
import { AppModule } from './app/app.server.module';

enableProdMode();

export default createServerRenderer(params => {
    const providers = [
        { provide: INITIAL_CONFIG, useValue: { document: '<app></app>', url: params.url } },
        { provide: APP_BASE_HREF, useValue: params.baseUrl },
        { provide: 'BASE_URL', useValue: params.origin + params.baseUrl },
    ];

    return platformDynamicServer(providers).bootstrapModule(AppModule).then(moduleRef => {
        const appRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
        const state = moduleRef.injector.get(PlatformState);
        const zone: NgZone = moduleRef.injector.get(NgZone);

        return new Promise<RenderResult>((resolve, reject) => {
            zone.onError.subscribe((errorInfo: any) => reject(errorInfo));
            appRef.isStable.subscribe(() => {
                // Because 'onStable' fires before 'onError', we have to delay slightly before
                // completing the request in case there's an error to report
                setImmediate(() => {
                    resolve({
                        html: state.renderToString()
                    });
                    moduleRef.destroy();
                });
            });
        });
    });
});

The app will run on Angular latest version

Answer 3

Please follow the upgrade steps mentioned below

1. Make sue that your nodeJS version is 8.9+
2. Upgrade rxjs to 6.0.0-beta.0, please see RxJS Upgrade Guide for more info. RxJS v6 has breaking change hence first make your code compatible to latest RxJS version.

3. remove node modles then npm install further update npm cli globally

    npm uninstall -g @angular/cli
    npm cache verify
   

   if your version of npm is lessn than 5 you should do

    npm cache clean
    npm install --save-dev @angular/cli@next
    npm install 
   

4. to update angular Angular framework packages to v6

    ng update @angular/core
   

5. update angular material

    ng update @angular/material
   

6. make typescript independent so that it doesn't need any dependency

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

7. change angular pacage version in package.json to to ^6.0.0-rc.5

    "dependencies": {
    "@angular/animations": "^6.0.0-rc.5",
    "@angular/cdk": "^6.0.0-rc.12",
    "@angular/common": "^6.0.0-rc.5",
    "@angular/core": "^6.0.0-rc.5",
    "@angular/forms": "^6.0.0-rc.5",
    "@angular/http": "^6.0.0-rc.5",
    "@angular/material": "^6.0.0-rc.12",
    "@angular/platform-browser": "^6.0.0-rc.5",
    "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
    "@angular/router": "^6.0.0-rc.5",
    "core-js": "^2.5.5",
    "karma-jasmine": "^1.1.1",
    "rxjs": "^6.0.0-uncanny-rc.7",
    "rxjs-compat": "^6.0.0-uncanny-rc.7",
    "zone.js": "^0.8.26"
    },
   "devDependencies": {
   "@angular-devkit/build-angular": "~0.5.0",
   "@angular/cli": "^6.0.0-rc.5",
   "@angular/compiler-cli": "^6.0.0-rc.5",
   "@types/jasmine": "2.5.38",
   "@types/node": "~8.9.4",
   "codelyzer": "~4.1.0",
   "jasmine-core": "~2.5.2",
   "jasmine-spec-reporter": "~3.2.0",
   "karma": "~1.4.1",
   "karma-chrome-launcher": "~2.0.0",
   "karma-cli": "~1.0.1",
   "karma-coverage-istanbul-reporter": "^0.2.0",
   "karma-jasmine": "~1.1.0",
   "karma-jasmine-html-reporter": "^0.2.2",
    "postcss-loader": "^2.1.4",
    "protractor": "~5.1.0",
    "ts-node": "~5.0.0",
    "tslint": "~5.9.1",
    "typescript": "^2.7.2"
    }
   

8. Update angular cli configuration format

   ng update @angular/cli --migrate-only --from=1.7.4
   

9. in case if you get error on typescript

   npm install typescript@2.7.2
   

10. run ng serve to give try to it.

Answer 4

I had the same problem, add rxjs-compat package to project solve my problem.

please try this approach:

add this item "rxjs-compat": "^6.1.0" to dependencies section in package.json and run this command:

npm install --save