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/JADE正确安装到Angular 2或更高版本

How to install correctly PUG / JADE to Angular 2 or above

因此在工作时以及AOT和JiT

So that while working and AOT and JiT

工作单元和集成测试

并且在创建每个新组件时不会遭受太多损失

and do not suffer much when creating each new component

推荐答案

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

I saw many solutions, some of them:

在每个组件中的

1. 中添加了类似"require！pug-loader()some.component.pug"

远离使用angular-cli并在webpack周围创造魔力

Get away from using angular-cli and create magic around webpack

使用其他服务器(他们知道如何使用Pug/Jade)

Use other servers (who know how to work with the Pug / Jade)

在运行构建之前，将所有pug文件转换为html

Before running the build, convert all the pug files to html

我认为他们会拒绝角度合理的服务器-这是不正确的，一旦您拒绝angular-cli并使用它，就运行一些预编译器(该文件会创建文件并将其将来发送给gee). webpack-出现错误(因为角度编译不是有效的webpack文件)

I think that they will refuse the server justified for angular - it's not true, run some pre-compilers (which create files and send them to the gee in the future), as soon as you refuse the angular-cli and use webpack - errors appear (because the angular compiles not a valid webpack file)

我是这样决定的:

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的FIX:

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

现在将其放置在终端中:

npm run afterInstall

npm run afterInstall

该脚本放在您的主要WebPack文件中(位于node_modules/angular/cli/models/webpack-config/common.js)行中，该文件告诉了Angular支持pug

That script put in your main WebPack file (located at node_modules/angular/cli/models/webpack-config/common.js) row, that told angular support pug

默认情况下，Angular团队未将其包含在支持中，因为这是必需的:

the Angular team did not include it in support by default, because it is necessary:

1. 所有指令，事件(如单击)应分开，"

示例: p((click)='someFunction()'，[title] ='myTitle')

无法使用mixin(将其替换为ng-template&ng-container)

It is not possible to use a mixin (replace it with ng-template & ng-container)

这也很神奇，但是angular-cli效果很好，所有测试都有效，AoT& JiT-工作

this is magic too, but angular-cli work fine, all test works, AoT & JiT - work

这篇关于Pug对Angular 2/Angular 4/Angular 6/Angular cli/Angular cli 6的支持(没有自定义WebPack配置)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！