angular项目打包出静态html,angular-cli（7.3.8）如何将生产环境打包出来的runtime.js直接写入HTML？...

问题描述

环境：

最近在优化angular-cli的打包，”@angular/cli”: “~7.3.8”,angular7.2，都是最新版本默认设置。

打包后生成的runtime.js文件太小，想把它直接写入到html文件中，节省一次资源请求

问题:

angular-cli不能直接配置webpack配置，查阅资料后：使用ngx-build-plus，额外写了一个webpack配置引用，然后用插件：InlineManifestWebpackPlugin去实现写入runtime.js的目的，具体见下图。

结果

打包报错循环引用，可能原因是angular-cli使用的是webpack4.0+，html-webpack-plugin却是3.2版本。但是即使使用了html-webpack-plugin4版本依旧会报错：TypeError: Cannot read property ‘tapAsync’ of undefined。

求助：

请教大家有没有好的方法将runtime.js直接写入html，而不是生成js去引用。

相关代码

package.json

"scripts": {

"ng": "ng",

"start": "ng serve",

"build-dev": "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()

]

}