将angular从版本5更新到版本6

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

我已经将rxjs版本从5.5更新到了6.1.0，还将typescript版本更新到了2.7.2

我遵循了从5.2到6.0的版本更新和rxjs版本更新指南

以下是发生的错误：

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 

---

我也有同样的问题，添加

rxjscompat

包来解决我的问题

请尝试以下方法：

将此项

“rxjs compat”：“^6.1.0”

添加到

package.json

中的

依赖项部分，然后运行以下命令：

npm安装-保存
请按照下面提到的升级步骤进行操作

让sue知道你的nodeJS版本是8.9+
将rxjs升级到6.0.0-beta.0，有关更多信息，请参阅rxjs升级指南。RXJSV6有突破性的变化，因此首先要使您的代码与最新的RxJS版本兼容
删除节点模块，然后安装npm进一步全局更新npm cli

 npm uninstall -g @angular/cli
 npm cache verify

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

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


将angular framework包更新到v6的步骤

 ng update @angular/core


更新角材质

 ng update @angular/material


使typescript独立，这样它就不需要任何依赖关系

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


将package.json中的角度打包版本更改为^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


以防在typescript上出现错误

npm install typescript@2.7.2


跑去发球，试试看
按照此链接更新到angular 6


现在从客户端应用程序打开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();
                });
            });
        });
    });
});

导入“反映元数据”；
导入'zone.js'；
导入'rxjs/add/operator/first'；
从“@angular/common”导入{APP_BASE_HREF}；
从“@angular/core”导入{enableProdMode，ApplicationRef，NgZone，ValueProvider}；
从“@angular/platformserver”导入{platformDynamicServer，PlatformState，INITIAL_CONFIG}；
从“aspnet prerendering”导入{createServerRenderer，RenderResult}；
从“./app/app.server.module”导入{AppModule}；
enableProdMode（）；
导出默认createServerRenderer（参数=>{
常量提供程序=[
{provide:INITIAL_CONFIG，useValue:{document:''，url:params.url}，
{提供：APP_BASE_HREF，useValue:params.baseUrl}，
{提供：'BASE_URL'，useValue:params.origin+params.baseUrl}，
];
返回platformDynamicServer（providers）.bootstrapModule（AppModule）.then（moduleRef=>{
常量appRef:ApplicationRef=moduleRef.injector.get（ApplicationRef）；
const state=moduleRef.injector.get（平台状态）；
const zone=模块ref.injector.get（NgZone）；
返回新承诺（（解决、拒绝）=>{
zone.onError.subscribe（（errorInfo:any）=>拒绝（errorInfo））；
appRef.isStable.first（isStable=>isStable）.subscribe（（）=>{
//因为“OnTable”在“onError”之前触发，所以我们必须在“onError”之前稍微延迟
//完成请求以防报告错误
setImmediate（（）=>{
决心({
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();
                });
            });
        });
    });
});

导入“反映元数据”；
导入'zone.js'；
导入'rxjs/add/operator/first'；
从“@angular/common”导入{APP_BASE_HREF}；
从“@angular/core”导入{enableProdMode，ApplicationRef，NgZone，ValueProvider}；
从“@angular/platformserver”导入{platformDynamicServer，PlatformState，INITIAL_CONFIG}；
从“aspnet prerendering”导入{createServerRenderer，RenderResult}；
从“./app/app.server.module”导入{AppModule}；
enableProdMode（）；
导出默认createServerRenderer（参数=>{
常量提供程序=[
{provide:INITIAL_CONFIG，useValue:{document:''，url:params.url}，
{提供：APP_BASE_HREF，useValue:params.baseUrl}，
{提供：'BASE_URL'，useValue:params.origin+params.baseUrl}，
];
返回platformDynamicServer（providers）.bootstrapModule（AppModule）.then（moduleRef=>{
常量appRef:ApplicationRef=moduleRef.injector.get（ApplicationRef）；
const state=moduleRef.injector.get（平台状态）；
const zone:NgZone=moduleRef.injector.get（NgZone）；
返回新承诺（（解决、拒绝）=>{
zone.onError.subscribe（（errorInfo:any）=>拒绝（errorInfo））；
appRef.isStable.subscribe（（）=>{
//因为“OnTable”在“onError”之前触发，所以我们必须在“onError”之前稍微延迟
//完成请求以防报告错误
setImmediate（（）=>{
决心({
html:state.renderToString（）
});
moduleRef.destroy（）；
});
});
});
});
});

应用程序将在最新版本上运行，请遵循此链接中的说明。这是visual studio 2017和visual studio for mac的解决方案
请安装此软件包：
“rxjs compat”：“^6.1.0”
如果您的问题得到解决，请反馈给我，谢谢您需要执行
npm安装--save@angular devkit/build angular
尝试此更新指南@Aravinda Rathnayake请测试并反馈给我，我希望这对你有帮助，谢谢