Angular-cli: Can't apply custom loader for component's 'templateUrl' since version 8

[MateEke]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [x ] build
- [x ] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: ^7

Description

In previous versions there was an error if you tried to use any unsupported filetype for templateUrl

ERROR in Module parse failed: Unexpected token (2:55)
You may need an appropriate loader to handle this file type.

Since .svg is supported there are no error, but the file is simply loaded with raw-loader

🔬 Minimal Reproduction

Create a new project with Angular: 8.0.0-rc.5
Try to use ng-cli-pug-loader or custom-webpack builder for .pug loading.

🌍 Your Environment

Angular CLI: 8.0.0-rc.4
Node: 12.3.1
OS: win32 x64
Angular: 8.0.0-rc.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0-rc.4
@angular-devkit/build-angular     0.800.0-rc.4
@angular-devkit/build-optimizer   0.800.0-rc.4
@angular-devkit/build-webpack     0.800.0-rc.4
@angular-devkit/core              8.0.0-rc.4
@angular-devkit/schematics        8.0.0-rc.4
@angular/cli                      8.0.0-rc.4
@ngtools/webpack                  8.0.0-rc.4
@schematics/angular               8.0.0-rc.4
@schematics/update                0.800.0-rc.4
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

Anything else relevant?
The issue is present since .svg component template is supported - https://github.com/angular/angular-cli/commit/dfb08b95b73f3e75d0f2cd0c61f336dc86d0769a

https://github.com/danguilherme/ng-cli-pug-loader/issues/20

[alan-agius4]

Hi, are you using directTemplateLoading: false when invoking the @ngtools/webpack plugin?

[MateEke]

Hi, are you using directTemplateLoading: false when invoking the @ngtools/webpack plugin?

How can I pass directTemplateLoading: false?

I have tried this configuration with meltedspark/custom-webpack, but no success

const AngularCompilerPlugin = require('@ngtools/webpack/src');


module.exports = {
  module: {
    rules: [
      {
        test: /.(pug|jade)$/,
        exclude: /.(include|partial).(pug|jade)$/,
        use: [{loader: 'apply-loader'}, {loader: 'pug-loader'}]
      },
      {test: /.(include|partial).(pug|jade)$/, loader: 'pug-loader'}
    ]
  },
  plugins: [
    new AngularCompilerPlugin.AngularCompilerPlugin({
      tsConfigPath: './tsconfig.app.json',
      entryModule: './src/app/app.module#AppModule',
      directTemplateLoading: false
    })
  ]
};

ERROR in : TypeError: Cannot read property 'getTypeChecker' of undefined

[clydin]

Modification of the Webpack configuration is considered unsupported. However, one method that may work to alter the options of a plugin is to search for the existing instance within plugins, extract the existing options (for AngularCompilerPlugin, there's an _options property), remove the existing instance, and create a new one using the existing options plus any custom alterations. Webpack plugins in general are unfortunately complicated to alter.

[MateEke]

For testing purposes I have altered node_modules\@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\typescript.js with directTemplateLoading: false.
Now the custom pug loader works properly.
If there is a proper way to set directTemplateLoading: false the existing custom pug loaders should work fine.

[MateEke]

Here is a workaround based on meltedspark/custom-webpack for now:

const AngularCompilerPlugin = require('@ngtools/webpack/src');

module.exports = (config) => {
  config.module.rules.unshift({
      test: /.(pug|jade)$/,
      exclude: /.(include|partial).(pug|jade)$/,
      use: [{loader: 'apply-loader'}, {loader: 'pug-loader'}]
    },
    {test: /.(include|partial).(pug|jade)$/, loader: 'pug-loader'});

  const index = config.plugins.findIndex(p => {
    return p instanceof AngularCompilerPlugin.AngularCompilerPlugin
  });
  const oldOptions = config.plugins[index]._options;
  oldOptions.directTemplateLoading = false;
  config.plugins.splice(index);

  config.plugins.push(new AngularCompilerPlugin.AngularCompilerPlugin(oldOptions));

  return config;
};

[clydin]

Closing as the above method is a necessary step to augment an existing plugin within a webpack configuration.

[MateEke]

Almost all property of AngularCompilerPlugin is editable trough tsconfig or angular.json. I think directTemplateLoading should be configurable too. The above method seems like a dirty hack.

There are lot of feature request for PUG/JADE support. Since 2016 we got promises for native support https://github.com/angular/angular-cli/issues/40 (PR not merged) or trough addon system https://github.com/angular/angular-cli/issues/1886

Now in Angular 8 it's even more difficult...

[clydin]

It's more general than that though. Any webpack plugin would need the same treatment to augment (TerserPlugin, SourceMapDevToolPlugin, SubresourceIntegrityPlugin, etc.). The option in question is also only relevant with a custom webpack configuration which while allowed is also unsupported (from within the CLI).

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}