Rxjs运营商在迁移到Angular 5后捆绑了两次

Z时代
2024-01-10
分类：问答

最近，我的团队将Angular 4项目迁移到了Angular 5.同样在此迁移中，我们开始使用Angular cli。一切正常，项目正在运行，我们终于设法减少了包的大小（aot，树震动，构建优化器等）。Rxjs运营商在迁移到Angular 5后捆绑了两次

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

当然，我们改变了所有可见进口

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": {} 
    } 
}

回答：

这是最近在很大程度上辩论rxjs GitHub上。有关完整的讨论，请参阅https://github.com/ReactiveX/rxjs/issues/3018。

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

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

但是，要注意的几件事情：

您需要使用至少[email protected]。这是代码https://github.com/angular/angular-cli/blob/1.5.x/packages/@angular/cli/models/webpack-configs/common.ts#L177-L186的重要部分。