2017-12-03 202 views
1

最近,我的團隊將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": {} 
    } 
} 

回答

2

這是最近在很大程度上辯論rxjs GitHub上。有關完整的討論,請參閱https://github.com/ReactiveX/rxjs/issues/3018

在RxJS 5.5中導入運算符的推薦方法是從rxjs/operators。例如:

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

但是,要注意的幾件事情: