Question

将angular5更新为6之后我有点困惑，因为发生了以下错误。

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

我已按照https://update.angular.io版本更新5.2到6.0和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

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

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

删除节点模块然后npm安装进一步更新npm cli global

 npm uninstall -g @angular/cli
 npm cache verify

如果您的npm版本小于5，则应该

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

将角度Angular框架包更新为v6
```
 ng update @angular/core
```
更新角度材料
```
 ng update @angular/material
```

使打字稿独立，以便它不需要任何依赖

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

将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"
 }

更新angular cli配置格式

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

如果您在打字稿
上收到错误
```
npm install typescript@2.7.2
```
run ng服务尝试。

Answer 2

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

请尝试这种方法：

将此项"rxjs-compat": "^6.1.0"添加到dependencies中的package.json部分，然后运行此命令：

npm install --save

Answer 3

点击此链接更新为角度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的解决方案

从版本5到6更新角度

4 个答案: