文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何在index.ftl (共济会模板)中使用角束

问如何在index.ftl (共济会模板)中使用角束
EN

Stack Overflow用户
提问于 2021-12-19 14:00:08
回答 1查看 431关注 0票数 0

我正在从事结构下的多模块分级项目。

代码语言：javascript
复制
    parent-app
     - backend
        - src/main
            - java
            - resources
            - webapp
        - build.gradle
     - angular-ui
        - src
            - app
            - envirnoments
            - index.html
            - index.ftl
            - main.ts
        - angular.json
        - package.json
        - webpack.config.js
        - build.gradle
     - build.gradle
     - settings.gradle

我使用index.ftl (共济会模板)作为我的视图，它使用内部库中的一些宏(gradle依赖项)来获取标头。但对于其他的一切，我必须使用角度组件/页。

我试图使用webpack动态地在index.ftl文件中添加角包(main.js、polyfill.js等)。

配置将minify error抛出角构建(ng build --prod)，但我看到js文件作为脚本在index.ftl中添加。

请任何人帮助理解这个问题，以及如何解决这个问题，这样我的角包就可以完全加载到index.ftl文件中，而不会有任何错误。

下面是错误

代码语言：javascript
复制
Html Webpack Plugin:
<pre>
  Error: html-webpack-plugin could not minify the generated output.
  In production mode the html minifcation is enabled by default.
  If you are not generating a valid html output please disable it manually.
  You can do so by adding the following setting to your HtmlWebpackPlugin config:
  |
  |    minify: false
  |
  See https://github.com/jantimon/html-webpack-plugin#options for details.
  For parser dedicated bugs please create an issue here:
  https://danielruf.github.io/html-minifier-terser/
  Parse Error: <#macro main> 
      <app-root></app-root> 
  <#macro> 
  <#maro pagebody> 
  <#macro><script src="angular-ui/runtime.689a94f98876eea3f04c.js"></script><script src="angular-ui/polyfills.94daefd414b8355106ab.js"></script><script src="angular-ui/main.95a9937db670e12d53ac.js"></script>
  
  - htmlparser.js:244 new HTMLParser
    [angular-webpack]/[html-minifier-terser]/src/htmlparser.js:244:13
  
  - htmlminifier.js:993 minify
    [angular-webpack]/[html-minifier-terser]/src/htmlminifier.js:993:3
  
  - htmlminifier.js:1354 Object.exports.minify
    [angular-webpack]/[html-minifier-terser]/src/htmlminifier.js:1354:16
  
  - index.js:1019 HtmlWebpackPlugin.minifyHtml
    [angular-webpack]/[html-webpack-plugin]/index.js:1019:46
  
  - index.js:435 HtmlWebpackPlugin.postProcessHtml
    [angular-webpack]/[html-webpack-plugin]/index.js:435:40
  
  - index.js:260 
    [angular-webpack]/[html-webpack-plugin]/index.js:260:25
  
  - task_queues:96 processTicksAndRejections
    node:internal/process/task_queues:96:5
  
</pre>

webpack.config.js

代码语言：javascript
复制
const HtmlWebpackPlugin = require('html-webpack-plugin');
const fs = require('fs');
const path = require('path');

module.exports = {
  output: {
    "publicPath": "angular-ui/"
  },

  plugins: [
    new HtmlWebpackPlugin({
        "template": "./src/index.ftl",
        "filename": "../backend/src/main/webapp/WEB-INF/templates/index.ftl",
        "inject": false,
        "hash": true,
        "xhtml": true,
    }),
    {
      apply: (compile) => {
        compile.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
          fs.unlink(path.join(process.cwd(), "../backend/src/main/webapp/angular-ui/index.html"), (error) => {
            if (error) throw error;
          });
        });
      }
    }
  ]
}

index.ftl

代码语言：javascript
复制
<#macro main>
    <app-root></app-root>
<#macro>
<#maro pagebody>
<% for (key in htmlWebpackPlugin.files.chunks) { %>
    <% if (htmlWebpackPlugin.files.chunks[key].entry) { %>
        <script src="<@spring.url '/<%= htmlWebpackPlugin.files.chunks[key].entry %>'/>" type="text/javascript"></script>
    <% } %>
<% } %>
<#macro>
<@header>

index.html

代码语言：javascript
复制
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularUI</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

package.json

代码语言：javascript
复制
{
  "name": "angular-ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --open",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~11.2.14",
    "@angular/common": "~11.2.14",
    "@angular/compiler": "~11.2.14",
    "@angular/core": "~11.2.14",
    "@angular/forms": "~11.2.14",
    "@angular/platform-browser": "~11.2.14",
    "@angular/platform-browser-dynamic": "~11.2.14",
    "@angular/router": "~11.2.14",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^11.1.1",
    "@angular-devkit/build-angular": "~0.1102.17",
    "@angular/cli": "~11.2.17",
    "@angular/compiler-cli": "~11.2.14",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "html-webpack-plugin": "^4.5.2",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
  }
}

angular.json

代码语言：javascript
复制
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angular-ui": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.config.js"
            },
            "outputPath": "../backend/src/main/webapp/angular-ui",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "angular-ui:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "angular-ui:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "angular-ui:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "angular-ui:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "angular-ui:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "angular-ui"
}
angular
spring-boot
webpack
freemarker
html-webpack-plugin
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-12-30 00:22:00

问题是HtmlWebpackPlugin不知道如何正确解析.ftl文件。默认情况下，插件将使用ejs-loader。请参阅https://github.com/jantimon/html-webpack-plugin/blob/main/docs/template-option.md

您需要缩小index.ftl文件吗？我认为没有必要，尤其是当您可以在从服务器发送之前压缩它的时候。您应该能够将带有false值的配置属性false传递到HtmlWebpackPlugin中，以防止缩小错误。

即

代码语言：javascript
复制
new HtmlWebpackPlugin({
  "template": "./src/index.ftl",
  "filename": "../backend/src/main/webapp/WEB-INF/templates/index.ftl",
  "inject": false,
  "hash": true,
  "xhtml": true,
  "minify": false // <-- property to add
}),

将minify: false条目添加到HtmlWebpackPlugin选项应该会修复您的即时错误。

但是，我也注意到index.ftl有一个语法错误，您试图设置src属性。在关闭'/>属性之前有一个额外的src。具体来说，您需要修改这一行：

代码语言：javascript
复制
<script src="<@spring.url '/<%= htmlWebpackPlugin.files.chunks[key].entry %>'/>" type="text/javascript"></script>

将是：

代码语言：javascript
复制
<script src="<@spring.url '/<%= htmlWebpackPlugin.files.chunks[key].entry %>" type="text/javascript"></script>

此外，在本地测试时，为了将js文件写入文件，我需要将您的行htmlWebpackPlugin.files.chunks更改为htmlWebpackPlugin.files.js，因为我没有进行任何分块。你可能需要做同样的事。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/70412094

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档