Pug 支持 Angular 2 / Angular 4 / Angular 6 / Angular cli / Angular cli 6（没有自定义 WebPack 配置）答案

【问题标题】：Pug support for Angular 2 / Angular 4 / Angular 6 / Angular cli / Angular cli 6 (without custom WebPack config)Pug 支持 Angular 2 / Angular 4 / Angular 6 / Angular cli / Angular cli 6（没有自定义 WebPack 配置）
【发布时间】：2018-02-01 06:20:59
【问题描述】：

如何正确安装 PUG / JADE 到 Angular 2 或更高版本

这样在工作的同时 AOT 和 JiT

工作单元和集成测试

并且在创建每个新组件时不会受到太大影响

【问题讨论】：

标签： angular angular5 pug angular-cli angular6

【解决方案1】：

我看到了很多解决方案，其中一些：

在每个组件中添加了类似 "require!pug-loader()some.component.pug"
摆脱使用 angular-cli 并围绕 webpack 创造魔法
使用其他服务器（谁知道如何使用 Pug / Jade）
在运行构建之前，将所有 pug 文件转换为 html

我认为他们会拒绝为 Angular 辩护的服务器 - 这是不正确的，运行一些预编译器（它们会创建文件并在将来将它们发送给 gee），只要你拒绝 angular-cli 并使用webpack - 出现错误（因为 angular 编译的不是有效的 webpack 文件）

我是这样决定的：

npm install pug pug-loader --save-dev

第一步后将行添加到 package.json

"scripts": {
    "afterInstall": "node pug-rule-insert.js",
    ...
  }

然后使用以下内容创建文件 pug-rule-insert.js：

const fs = require('fs');
const commonCliConfig = 'node_modules/@angular/cli/models/webpack-configs/common.js';
const pug_rule = `\n\t\t\t\t\t\t\t\t{ test: /.(pug|jade)$/, loader: 'apply-loader!pug-loader?self' },`;

fs.readFile(commonCliConfig, (err, data) => {
  if (err) { throw err; }

  const configText = data.toString();
  if (configText.indexOf(pug_rule) > -1) { return; }

  const position = configText.indexOf('rules: [') + 8;
  const output = [configText.slice(0, position), pug_rule, configText.slice(position)].join('');
  let file = fs.openSync(commonCliConfig, 'r+');
  fs.writeFile(file, output, () => {});
  fs.close(file, () => {});
});

Angular 6 的修复：

const commonCliConfig = 'node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js';

现在只需在终端中输入：

npm run afterInstall

该脚本放在您的主 WebPack 文件（位于 node_modules/angular/cli/models/webpack-config/common.js）行中，告诉 angular support pug

Angular 团队默认没有将它包含在支持中，因为它是必要的：

所有指令、事件（如点击）应分开","

示例：p((click)='someFunction()', [title]='myTitle')
无法使用 mixin（将其替换为 ng-template 和 ng-container）

这也很神奇，但是 angular-cli 工作正常，所有测试工作，AoT 和 JiT - 工作

【讨论】：

【解决方案2】：

正如Anton Pegov所说：

对于 Angular 6+，您只需运行 ng add ng-cli-pug-loader ...

查看原始答案： https://stackoverflow.com/a/53091056/5318303

【讨论】：