当使用ng add命令安装ng-cli-pug-loader和apollo-angular时，出现错误：’module’不是一个已知的元素

2 年 ago
新, 韵
2 minutes

为了试错和调整网页的外观等，使用原始的HTML会因为繁琐的闭合标签而麻烦，所以我更喜欢使用PUG（以前被称为Jade）。

虽然在Angular CLI中使用PUG作为模板的要求存在，但却存在一种称为ng-cli-pug-loader的插件，它可以帮助我们修改内部的Webpack配置，以实现这个要求。通过执行ng add ng-cli-pug-loader命令进行安装，安装完成后会执行ng-add-pug-loader.js脚本，从而进行上述配置更改。

通过这种方式，就比如说app.component.html文件也会

//The content below is only a placeholder and can be replaced.
div(style='text-align:center')
  h1 
    | Welcome to {{ title }}!
  img(width='300', alt='Angular Logo', src='...割愛...')
h2 Here are some links to help you start:
ul
  li
    h2
      a(target='_blank', rel='noopener', href='https://angular.io/tutorial') Tour of Heroes
  li
    h2
      a(target='_blank', rel='noopener', href='https://angular.io/cli') CLI Documentation
  li
    h2
      a(target='_blank', rel='noopener', href='https://blog.angular.io/') Angular blog

以中国的母语将以下内容表达一遍：可以用这样的方式写。这是使用HTML2Jade进行转换后的结果，可以轻松迁移现有的HTML等。此外，如果使用`ng g component`生成的模板一开始就是Pug，那就更加令人高兴了。

然而

今天早上在浏览器上使用npm start启动时，之前运行良好的Angular应用程序没有显示任何页面，控制台输出以下错误信息。

ERROR in : 'module' is not a known element:
1. If 'module' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

刚开始完全不知道在说什么，但是想起来昨天用 ng add apollo-angular 安装了 GraphQL 客户端。那时候还在 npm start 的情况下进行工作，或许这就是没有出现问题的原因。

这时的主要模块版本如下。

モジュールバージョンnodejs10.16.0@angular/cli8.0.3ng-cli-pug-loader0.2.0apollo-angular1.6.0

我查了一下

总结一下，Webpack的配置文件出现了问题。

    ng add ng-cli-pug-loader直後
309:            rules: [
310: { test: /\.(pug|jade)$/, exclude: /\.(include|partial)\.(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /\.(include|partial)\.(pug|jade)$/, loader: "pug-loader" },
    ng add ng-cli-pug-loader → ng add apollo-angular直後
309:            rules: [ { test: /.(pug|jade)$/, exclude: /.(include|partial).(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /.(include|partial).(pug|jade)$/, loader: "pug-loader" },
310: { test: /\.(pug|jade)$/, exclude: /\.(include|partial)\.(pug|jade)$/, use: [ { loader: "apply-loader" }, { loader: "pug-loader" } ] }, { test: /\.(include|partial)\.(pug|jade)$/, loader: "pug-loader" },

在原始定义之前，已经添加了去除转义字符的定义。
通过恢复此定义，错误得到解决。

虽然记得不太清楚，但好像当我使用ng add @angular/material命令添加Angular Material时也遇到了类似的错误，所以可能是同样的原因。

我想进一步追查是谁引起了这件事情，但暂时我先满足于到这里。

bannerAds