Allow directTemplateLoading to be set from angular.json

[reduckted]

🚀 Feature request

Command (mark with an x)

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

Description

The AngularCompilerPlugin allows templates to be loaded directly, bypassing any loaders configured in the webpack config. The default value of this option is false.

The Angular CLI creates an instance of the AngularCompilerPlugin and sets this option to true, with no way of overriding this behavior.

angular-cli/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/typescript.ts

Line 94 in e8cdfa6

directTemplateLoading: true,

Setting this to true made sense when there was no way to customize the webpack config. However, now that CLI Builders are officially supported, it will become more common for builders like @angular-builders/custom-webpack to be used to customize the webpack configuration. But with directTemplateLoading being hard-coded to true, there is no way to customize the webpack configuration to allow a loader to manipulate a component's template.

Describe the solution you'd like

Let the directTemplateLoading option be set in the angular.json file. For example:

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "directTemplateLoading": false,
      "customWebpackConfig": {
        "path": "./webpack.config.js"
      },
      "etc": "etc"

Describe alternatives you've considered

This idea has been raised before in a couple of issues, but both were closed with workarounds or hacks. Since CLI Builders are now officially supported, I feel that a proper solution is required.

Use template and inline loaders

#14855 (comment) suggests using template and specifying the loaders in the require statement instead of using templateUrl.

Hi all, we had a chat around this, and we think that if you want to use webpack specific stuff you can use ngx-build-plus or otherwise you can update the require statements to include the raw-loader import syntax ie: require('!raw-loader!./path-to-template.html') as suggested above.

Manually specifying the same loaders for every component template is not maintainable.

Hack the webpack config

#14534 (comment) states that a hack is required to set directTemplateLoading:

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

The "above method" is to search through the plugins in the webpack config and find the AngularCompilerPlugin, get it's options, change the directTemplateLoading value to false, create a new instance of the plugin with the modified options and replace the original plugin in the webpack config. Very hacky.

Use template with loaders in the webpack config

Similar to the outcome of #14855, you can:

1. Install @types/node.
2. Add "node" to the types property of the tsconfig file.
3. Change templateUrl: './foo.component.html to template: require('./foo.component.html')

and the custom loaders specified in the webpack config will be used. But this requires you to make changes to the way the component's template is specified by default, which is easy to forget to do. That's just asking for problems because forgetting to change templateUrl to template means it won't be passed through the custom loaders.

In addition to that, the Angular Language Service complains that "Component 'FooComponent' must have a template or templateUrl".

Given the choice between this and hacking the webpack config to recreate the AngularCompilerPlugin, I'd choose hacking the webpack config. 😁

[vikerman]

This should be an option in the custom webpack builder and not the CLI.

[clydin]

The @ngtools/webpack plugin is part of the default webpack configuration. This allows any custom builder to modify the options of the plugin if using the webpack configuration generated by the official builder. If a custom builder is generating a webpack configuration from scratch it would also have the opportunity to modify the plugin settings. In either case, this would allow a custom builder to provide the suggested higher level boolean option to the user of the custom builder.

[reduckted]

@vikerman This should be an option in the custom webpack builder and not the CLI.

That's a good point. If you're not using a custom builder, then setting it to false would only cause the build to fail. 👍

@clydin This allows any custom builder to modify the options of the plugin if using the webpack configuration generated by the official builder.

I'm having a hard time working out how that's currently possible.

In angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/typescript.js, the _createAotPlugin() function sets directTemplateLoading to a hard-coded value of true.

angular-cli/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/typescript.ts

Lines 94 to 99 in 95776fe

	directTemplateLoading: true,
	...options,
	compilerOptions,
	};
	pluginOptions = _pluginOptionsOverrides(buildOptions, pluginOptions);

It also adds the options that were passed to that function, so that's a potential way of overriding the value of true. But, the two callers of _createAotPlugin() both pass in hard-coded options (the options are the second parameter).

getNonAotConfig:

angular-cli/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/typescript.ts

Line 109 in 95776fe

plugins: [_createAotPlugin(wco, { tsConfigPath, skipCodeGeneration: true })]

getAotConfig:

angular-cli/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/typescript.ts

Line 128 in 95776fe

plugins: [_createAotPlugin(wco, { tsConfigPath }, i18nExtract)]

_pluginOptionsOverrides() is another potential place where the plugin's options could be customized, but it only changes hostReplacementPaths and compilerOptions.

I'm not too familiar with the codebase, so perhaps I've missed something. Would you be able to show an example of how to modify the options for AngularCompilerPlugin before the plugin is created?

[reduckted]

@clydin Are you able to provide an example of how to modify the options for AngularCompilerPlugin before the plugin is created?

[angular-automatic-lock-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.}