1
Kürzlich hat mein Team ein Angular 4-Projekt nach Angular 5 migriert. Auch bei dieser Migration haben wir begonnen, Angular cli zu verwenden. Alles ist in Ordnung, das Projekt funktioniert und wir haben es schließlich geschafft, die Bundle-Größe zu reduzieren (AOT, Tree Shaking, Build-Optimizer, etc.).Rxjs-Operatoren zweimal nach Migration nach Angular gebündelt 5
Das einzige Problem ist, dass in der endgültigen Bundle, die Rxjs scheint zweimal enthalten sein (bundle analyzer screenshot).
Natürlich änderten wir alle beobachtbaren Importe
import {Observable} from 'rxjs/Observable';
Irgendwelche Ideen?
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": {}
}
}