Обновление Angular6 rxjs 6 - angular6


1

Привет, я понимаю, что это боль.

После обновления 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:[email protected]/index.js",
        @angular/common/http: "npm:@angular/common/bundles/common-http.umd.js",
        @angular/animations/browser: "npm:@angular/[email protected]/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/[email protected]/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);

ошибки, которые мы видим в браузере,

browser error 1 browser error 2

Источник
  •  73
  •  2
  • 4 мар 2020 2020-03-04 04:41:02

2 ответа

0

Следуйте этому официальному руководству, чтобы правильно обновить свой угловой проект:

https://update.angular.io/

Вам просто нужно выбрать, какую версию вы переносите, и ваш менеджер пакетов (npm/пряжа).

Тогда у вас будет список вещей, которые нужно сделать или проверить, чтобы все было установлено.

контрольный список обновлений

0

в 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 } }

  • 4 мар 2020 2020-03-04 04:41:02