Question

最近，我的团队将Angular 4项目迁移到Angular 5.此外，在此迁移中，我们开始使用Angular cli。一切都很好，项目正在运行，我们终于设法减少了包的大小（aot，树摇，构建优化器等）。

唯一的问题是，在最终的捆绑中，rxjs似乎被包含两次（bundle analyzer screenshot）。

当然我们将所有Observable导入更改为

import {Observable} from 'rxjs/Observable';

有什么想法吗？

的package.json

{
  "name": "app",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json --port 8080",
    "dev": "ng serve --proxy-config proxy.conf.json --port 8080",
    "build": "ng build --prod --aot --build-optimizer --vendor-chunk=true --base-href /app/ --deploy-url /app/",
    "build-report": "bash ./scripts/ng.sh build --prod --aot --build-optimizer --vendor-chunk=true --stats-json --base-href /app --deploy-url /app",
    "report": "webpack-bundle-analyzer dist/stats.json",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "clean": "rm -rf ./node_modules",
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.0.0-beta.2",
    "@angular/animations": "5.0.4",
    "@angular/common": "5.0.4",
    "@angular/compiler": "5.0.4",
    "@angular/core": "5.0.4",
    "@angular/forms": "5.0.4",
    "@angular/http": "5.0.4",
    "@angular/platform-browser": "5.0.4",
    "@angular/platform-browser-dynamic": "5.0.4",
    "@angular/router": "5.0.4",
    "@angular-redux/store": "7.0.1",
    "@angular-redux/router": "7.0.0",
    "@ngx-translate/core": "9.0.1",
    "@ngx-translate/http-loader": "2.0.0",
    "angular-calendar": "0.21.2",
    "angular-weather-widget": "1.2.4",
    "angular2-highcharts": "0.5.5",
    "angular2-prettyjson": "2.0.6",
    "angular2-signaturepad": "2.4.0",
    "angular2-toaster": "3.0.1",
    "angularfire2": "4.0.0-rc.0",
    "core-js": "2.4.1",
    "firebase": "3.9.0",
    "highcharts-more": "0.1.2",
    "iban": "0.0.8",
    "immutable": "3.8.1",
    "keycloak": "1.2.0",
    "mydatepicker": "2.0.6",
    "ng2-charts": "1.5.0",
    "ng2-dragula": "1.5.0",
    "ng2-file-upload": "1.2.1",
    "ng2-slim-loading-bar": "4.0.0",
    "ng2-vis": "0.0.6",
    "ngx-bootstrap": "2.0.0-beta.8",
    "ngx-perfect-scrollbar": "5.0.5",
    "ng2-responsive": "0.8.4",
    "redux": "3.7.2",
    "redux-devtools": "3.4.1",
    "redux-logger": "3.0.6",
    "redux-observable": "0.17.0",
    "rxjs": "5.5.2",
    "zone.js": "0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.5.5",
    "@angular/compiler-cli": "5.0.4",
    "@angular/language-service": "5.0.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.2.0",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "2.4.2",
    "webpack-bundle-analyzer": "2.9.1"
  }
}

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "appcli"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

Answer 1

最近在rxjs GitHub上进行了大量辩论。有关完整讨论，请参阅https://github.com/ReactiveX/rxjs/issues/3018。

在RxJS 5.5中导入运算符的推荐方法来自rxjs/operators。例如：

import { map, filter, mergeMap, tap } from 'rxjs/operators';

然而，有一些事情需要注意：

您需要至少使用angular-cli@1.5.0。这是代码https://github.com/angular/angular-cli/blob/1.5.x/packages/@angular/cli/models/webpack-configs/common.ts#L177-L186的重要部分。
我认为只有在使用-prod创建生产版本时才会删除未使用的运算符。
确保您既不从rxjs也不从rxjs/Rx导入。

Rxjs运算符在迁移到Angular 5后捆绑了两次

1 个答案: