2

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
Aravinda Rathnayake
  • 61
  • 1
  • 7

4 Answers4

1

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.
Muhammad Awais
  • 156
  • 1
  • 6
0

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

Hasan Fathi
  • 5,610
  • 4
  • 42
  • 60
0

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

San Jaisy
  • 15,327
  • 34
  • 171
  • 290
0

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

San Jaisy
  • 15,327
  • 34
  • 171
  • 290