angularwebpackangular2-aotangular-aotwebpack-loader

Angular ignores file-loader in AOT build


I'm currently trying to build a documentation website in Angular. Docs will be written in markdown and displayed through the ngx-markdown plugin. Everything works fine on a JIT build, but an AOT build always removes the markdown files.

This is how I import the file:

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

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

I've tried using just the raw-loader plugin, but this will just load null on AOT:

{title: "Installation", text: null}

Then I've tried to setup webpacks file-loader which will output void 0 when building AOT:

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

But JIT looks like this:

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

and contains this folder in its dist:
dist folder containing /docs

There are no error messages or anything it just completely removes any evidence of a markdown file ever existing.

I think this is the webpack config Angular uses, but there is nothing that would indicate this happening.
There is also this issue which wasn't very helpful.

This is the webpack config I am using with the @angular-builders/custom-webpack plugin:

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"
  }
}
[...]

I'm using Angular 8.


Solution

  • The problem was actually the way I passed the data.

    I was passing it through a .forRoot()-method which set a token to the value. Angular didn't recognise it (i think), and dropped it upon compilation.

    I fixed it by setting the token directly.