将角度从版本 5 更新到 6

Question

由于出现以下错误，我在将 angular5 更新为 6 后有点困惑。

我已将 rxjs 版本从 5.5 更新到 6.1.0，并将 typescript 版本更新到 2.7.2。

我遵循了从 5.2 到 6.0 的 https://update.angular.io 版本更新和 rxjs 版本更新指南 https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md

这是发生的错误：

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

请按照下面提到的升级步骤进行

1. 确认你的nodeJS版本是8.9+
2. 将 rxjs 升级到 6.0.0-beta.0，请参阅 RxJS 升级指南了解更多信息。 RxJS v6 有重大变化，因此首先要使您的代码与最新的 RxJS 版本兼容。

3. 删除节点模型然后 npm install 进一步全局更新 npm cli

    npm uninstall -g @angular/cli
    npm cache verify
   

   如果你的 npm 版本小于 5，你应该这样做

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

4. 将 Angular Angular 框架包更新到 v6

    ng update @angular/core
   

5. 更新角度材质

    ng update @angular/material
   

6. 使打字稿独立，因此它不需要任何依赖

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

7. 将 package.json 中的 angular pacage 版本更改为 ^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. 更新 Angular cli 配置格式

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

9. 如果你在打字稿上遇到错误

   npm install typescript@2.7.2
   

10. 运行 ng serve 进行尝试。

Answer 2

我有同样的问题，添加rxjs-compat包到项目解决我的问题。

请尝试这种方法：

将此项目"rxjs-compat": "^6.1.0" 添加到package.json 中的dependencies 部分并运行以下命令：

npm install --save

Answer 3

点击此链接更新到 angular 6

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

现在从客户端应用打开 boot.server.ts 文件

并更改以下代码行

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();
                });
            });
        });
    });
});

到下面的代码行

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();
                });
            });
        });
    });
});

应用程序将在 Angular 最新版本上运行

Answer 4

按照此链接Angular 5.2 update to angular 6 visual studio mac 7.5.2 using Asp.net core 2.1 中的说明进行操作。这是 Visual Studio 2017 和 Visual Studio for Mac 的解决方案