“ @ angular / cli”:“〜7.3.8”(angular7.2)是最新版本的默认设置。
打包后生成的runtime.js文件太小,我想直接将其写入html文件,以节省一个资源请求。
由于angular-cli无法直接配置Webpack配置,因此在查看信息后:我决定使用“ ngx-build-plus”,另外编写了Webpack配置参考,然后使用了插件:“ InlineManifestWebpackPlugin”
package.json:
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod --extraWebpackConfig"
},
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/forms": "~7.2.0",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/pwa": "^0.12.4",
"@angular/router": "~7.2.0",
"@angular/service-worker": "~7.2.0",
"@ngx-translate/core": "^11.0.1",
"@ngx-translate/http-loader": "^4.0.0",
"core-js": "^2.5.4",
"ng-lazyload-image": "^5.1.2",
"ngx-build-plus": "^7.8.1",
"ngx-infinite-scroll": "^7.1.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.13.0",
"@angular/cli": "~7.3.8",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"copy-webpack-plugin": "^5.0.2",
"html-webpack-inline-source-plugin": "0.0.10",
"html-webpack-plugin": "^4.0.0-beta.5",
"inline-manifest-webpack-plugin": "^4.0.2",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-cdn-plugin": "^3.0.0"
}
angular.json
....
"architect": {
"build": {
"builder": "ngx-build-plus:build",
....
webpack.extra.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const InlineManifestWebpackPlugin = require('inline-manifest-webpack-plugin')
module.exports = {
plugins:[
new HtmlWebpackPlugin(),
new InlineManifestWebpackPlugin()
]
}
但是结果是打包错误,可能的原因是angular-cli使用webpack4.0 +,但是“ html-webpack-plugin”是3.2版。但是,即使我使用html-webpack-plugin @ next版本,我仍然会收到错误消息:
TypeError: Cannot read property 'tapAsync' of undefined.
我有什么问题吗?还是有更好的方法将“ runtime.js”写入HTML而不是生成引用?
0.o
谢谢〜