gpt4 book ai didi

angular - Pug 支持 Angular 2/Angular 4/Angular 6/Angular cli/Angular cli 6(无自定义 WebPack 配置)

转载 作者:行者123 更新时间:2023-12-04 01:38:17 31 4
gpt4 key购买 nike

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

这样在工作和 AOT 和 JiT 的同时

工作单元和集成测试

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

最佳答案

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

  • 在每个组件中添加了类似 的内容“需要!pug-loader()some.component.pug”
  • 远离使用 angular-cli 并在 webpack 周围创造魔法
  • 使用其他服务器(谁知道如何使用 Pug/Jade)
  • 在运行构建之前,将所有 pug 文件转换为 html

  • 我认为他们会拒绝为 angular 辩护的服务器——这不是真的,只要你拒绝 angular-cli 并使用 webpack,就运行一些预编译器(它们会创建文件并将它们发送给 gee)——错误出现(因为 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 替换)for example

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

    关于angular - Pug 支持 Angular 2/Angular 4/Angular 6/Angular cli/Angular cli 6(无自定义 WebPack 配置),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48556518/

    31 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com