Angular 在 AOT 构建中忽略文件加载器答案

【问题标题】：Angular ignores file-loader in AOT buildAngular 在 AOT 构建中忽略文件加载器
【发布时间】：2020-07-25 04:26:41
【问题描述】：

我目前正在尝试在 Angular 中构建一个文档网站。文档将使用 markdown 编写并通过 ngx-markdown 插件显示。在 JIT 构建中一切正常，但 AOT 构建总是会删除 markdown 文件。

这是我导入文件的方式：

import usageNavbar from '!!raw-loader!./content/usage-navbar.md';

[...]
{
  title: 'Installation',
  text: usageNavbar
}
[...]

我试过只使用 raw-loader 插件，但这只会在 AOT 上加载 null：

{title: "Installation", text: null}

然后我尝试设置 webpacks 文件加载器，它会在构建 AOT 时输出 void 0：

{title: "Installation", text: void 0}

但 JIT 看起来像这样：

{
  title: 'Installation',
  text: _raw_loader_content_usage_navbar_md__WEBPACK_IMPORTED_MODULE_3__["default"]
}

并在其 dist 中包含此文件夹：

没有错误消息或任何内容，它只是完全删除了任何 Markdown 文件存在的证据。

我认为this 是 Angular 使用的 webpack 配置，但没有任何迹象表明会发生这种情况。
还有this 的问题不是很有帮助。

这是我与 @angular-builders/custom-webpack 插件一起使用的 webpack 配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/i,
        loader: 'file-loader',
        options: {
          name: `[name][hash].[ext]`,
          outputPath: 'docs/',
          emitFile: true
        }
      }
    ]
  }
};

angular.json:

[...]
"customWebpackConfig": {
  "path": "./extra-webpack.config.js",
  "mergeStrategies": {
    "module.rules": "prepend"
  }
}
[...]

我正在使用 Angular 8。

【问题讨论】：

标签： angular webpack angular2-aot angular-aot webpack-loader

【解决方案1】：

问题实际上是我传递数据的方式。

我通过 .forRoot() 方法传递它，该方法将标记设置为值。 Angular 无法识别它（我认为），并在编译时将其丢弃。

我通过直接设置令牌来修复它。

【讨论】：