Angular6 rxjs 6 更新

Question

嗨，我明白这些是一种痛苦。

将 Angular 更新到版本 6 并将 rxjs 更新到版本 6 后，我们遇到了很多浏览器错误，系统无法实例化许多包。

我们使用 node_modules 和 systemjs.config.server.js 的组合不要试图争论一个是否比另一个更好，如果有任何改进请告诉我。

package.json

 {
      "version": "1.0.0",
      "name": "infrastructure-annual-reporting",
      "private": true,
      "dependencies": {
        "@angular/animations": "^6.0.0",
        "@angular/cdk": "^6.0.0",
        "@angular/common": "^6.0.0",
        "@angular/compiler": "^6.0.0",
        "@angular/core": "^6.0.0",
        "@angular/forms": "^6.0.0",
        "@angular/http": "^6.0.0",
        "@angular/material": "^6.0.1",
        "@angular/platform-browser": "^6.0.0",
        "@angular/platform-browser-dynamic": "^6.0.0",
        "@angular/router": "^6.0.0",
        "angular-date-value-accessor": "^0.0.2",
        "bootstrap": "^3.3.7",
        "core-js": "^2.5.6",
        "hammerjs": "^2.0.8",
        "ng2-bs3-modal": "^0.13.0",
        "ngx-accordion": "^0.0.17",
        "nodemailer": "^4.6.4",
        "rxjs": "^6.1.0",
        "rxjs-compat": "^6.1.0",
        "rxjs-tslint": "^0.1.3",
        "socks": "^2.2.0",
        "systemjs": "^0.21.3",
        "web-animations-js": "^2.3.1",
        "zone.js": "^0.8.26"
      },
      "devDependencies": {
        "@angular/cli": "^6.0.0",
        "@angular/language-service": "^6.0.0",
        "@types/hammerjs": "^2.0.35",
        "@types/jasmine": "^2.8.7",
        "@types/node": "^10.0.6",
        "codelyzer": "^4.3.0",
        "jasmine": "^3.1.0",
        "karma": "^2.0.2",
        "lite-server": "^2.3.0",
        "lodash": "^4.17.10",
        "protractor": "^5.3.1",
        "ts-node": "^6.0.3",
        "tslint": "^5.10.0",
        "typescript": "^2.8.3"
      },
      "keywords": [],
      "license": "MIT",
      "peerDependencies": {
        "@angular/core": ">=2.0.0",
        "@angular/common": ">=2.0.0",
        "@angular/compiler": ">=2.0.0",
        "@angular/platform-browser": ">=2.0.0",
        "@angular/platform-browser-dynamic": ">=2.0.0",
        "@angular/cdk": "6.0.1"
      },
      "repository": {},
      "scripts": {
        "build": "tsc -p src/",
        "build:watch": "tsc -p src/ -w",
        "build:e2e": "tsc -p e2e/",
        "serve": "lite-server -c=bs-config.json",
        "serve:e2e": "lite-server -c=bs-config.e2e.json",
        "prestart": "npm run build",
        "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
        "pree2e": "npm run build:e2e",
        "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
        "preprotractor": "webdriver-manager update",
        "protractor": "protractor protractor.config.js",
        "pretest": "npm run build",
        "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
        "pretest:once": "npm run build",
        "test:once": "karma start karma.conf.js --single-run",
        "lint": "tslint ./src/**/*.ts -t verbose"
      }
    }

systemjs.config.server.js

(function (global) {
    // map tells the System loader where to look for things
    var paths = {
        'npm:': "https://unpkg.com/"
    };
    var map = {
        'app': "app", // 'dist',
        '@angular': "node_modules/@angular",
        'angular2-in-memory-web-api': "node_modules/angular2-in-memory-web-api",
        'rxjs': "npm:rxjs",
        '@angular/platform-browser/animations': "npm:@angular/platform-browser/bundles/platform-browser-animations.umd.min.js",
        "ngx-accordion": "npm:ngx-accordion@0.0.17/index.js",
        '@angular/common/http': "npm:@angular/common/bundles/common-http.umd.js",
        '@angular/animations/browser': "npm:@angular/animations@5.2.10/bundles/animations-browser.umd.js",
        'ng2-bs3-modal': "npm:ng2-bs3-modal/bundles/ng2-bs3-modal.umd.js",
        'hammerjs':"npm:hammerjs/hammer.js",

        // CDK individual packages
        '@angular/cdk/bidi': "npm:@angular/cdk/bundles/cdk-bidi.umd.js",
        '@angular/cdk/platform': "npm:@angular/cdk/bundles/cdk-platform.umd.js",
        '@angular/cdk/keycodes': "npm:@angular/cdk/bundles/cdk-keycodes.umd.js",
        '@angular/cdk/collections': "npm:@angular/cdk/bundles/cdk-collections.umd.js",
        '@angular/cdk/portal': "npm:@angular/cdk/bundles/cdk-portal.umd.js",
        '@angular/cdk/coercion': "npm:@angular/cdk/bundles/cdk-coercion.umd.js",
        '@angular/cdk/overlay': "npm:@angular/cdk/bundles/cdk-overlay.umd.js",
        '@angular/cdk/accordion': "npm:@angular/cdk/bundles/cdk-accordion.umd.js",
        '@angular/cdk/observers': "npm:@angular/cdk/bundles/cdk-observers.umd.js",
        '@angular/cdk/layout': "npm:@angular/cdk/bundles/cdk-layout.umd.js",
        '@angular/cdk/scrolling': "npm:@angular/cdk/bundles/cdk-scrolling.umd.js",
        '@angular/cdk/table': "npm:@angular/cdk/bundles/cdk-table.umd.js",
        '@angular/cdk/stepper': "npm:@angular/cdk/bundles/cdk-stepper.umd.js",
        '@angular/cdk/a11y': "npm:@angular/cdk/bundles/cdk-a11y.umd.js",
        '@angular/cdk/tree' : "node_modules/@angular/cdk@6.0.1/tree",
        'tslib': "npm:tslib/tslib.js",
        'rxjs/operators' : "npm:rxjs/operators/"
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: "main.js", defaultExtension: "js" },
        'rxjs': { defaultExtension: "js" },
        'rxjs-compact': { defaultExtension: "js" },
        'angular2-in-memory-web-api': { main: "index.js", defaultExtension: "js" }
    };
    var ngPackageNames = [
        "animations",
        "common",
        "compiler",
        "core",
        "forms",
        "http",
        "material",
        "platform-browser",
        "platform-browser-dynamic",
        "router"

    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages["@angular/" + pkgName] = { main: "index.js", defaultExtension: "js" };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages["@angular/" + pkgName] = { main: "bundles/" + pkgName + ".umd.js", defaultExtension: "js" };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        paths: paths,
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

我们在浏览器中看到的错误是

Answer 1

按照此官方指南正确更新您的 angular 项目：

https://update.angular.io/

您只需要 select 您要迁移的版本和您的包管理器 (npm/yarn)。

然后您将得到一份待办事项或检查事项清单，以便一切就绪。

update check list

Answer 2

在 cmd 中：npm install rxjs-compat@6 --save

在 systemjs.config 中：

packages: { app: { defaultExtension: 'js', meta: { './*.js': { loader: 'systemjs-angular-loader.js' } } }, main_angular_upgrade:{ defaultExtension: 'js' }, rxjs: { defaultExtension: 'js', main: "index.js" }, "rxjs-compat": { defaultExtension: 'js', main: "index.js" }, "rxjs/operators": { "main": "index.js", "defaultExtension": "js" }, "rxjs/internal-compatibility": { "main": "index.js", "defaultExtension": "js" }, "rxjs/testing": { "main": "index.js", "defaultExtension": "js" }, 'rxjs/ajax': { main: 'index.js', defaultExtension: 'js' }, 'rxjs/webSocket': { main: 'index.js', defaultExtension: 'js' } }

Angular6 rxjs 6 更新

Angular6 rxjs 6 update

angular6

rxjs6