2
votes

i faced one problem. I need to build custom index.html files with angular. I decided to use angular-builders and html-webpack-plugin. It works fine, but one chunk doesn't includes in html-webpack-plugin result.

There is my configs: custom-webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
          inject: false,
          template: '../Views/Documents/_LoaderTemplate.cshtml',
          filename: '../../../Views/Documents/_AngularLoader.cshtml'
        })
      ]
};

angular.json

      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./custom-webpack.config.js"
            },
            ...
            "scripts": [
              "src/app/division/division-draw/lines.js",
              "src/app/division/division-draw/mouse_control.js",
              "src/app/division/division-draw/Screen.js"
              ]
          },
          ...

I have template for html-webpack-plugin

<%= JSON.stringify(htmlWebpackPlugin) %>

<% for (var chunk in htmlWebpackPlugin.files.chunks) { %>
<script src="<%= htmlWebpackPlugin.files.chunks[chunk].entry %>"></script>
<% } %>

And result of build doesn't contains scripts.js, but result scripts of building have it.

chunk {main} main.js, main.js.map (main) 175 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 338 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 33.1 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 169 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.78 MB [initial] [rendered]

I use package.json like

    "html-webpack-plugin": "^3.2.0",
    "@angular-devkit/build-angular": "0.13.9",
    "@angular-builders/custom-webpack": "7.5.2",
    "@angular/cli": "~7.0.3",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/common": "^7.0.0",
    "@angular/compiler": "^7.0.0",
    "@angular/core": "^7.0.0",
    "@angular/forms": "^7.0.0",
    "@angular/http": "~7.0.0",
    "webpack": "^4.40.0",
    "webpack-cli": "^3.3.8"

I want include all builded scripts (by angular-cli) to my result output file filename: '../../../Views/Documents/_AngularLoader.cshtml'

1

1 Answers

0
votes

try to use <%= htmlWebpackPlugin.tags.bodyTags %>