@ngtools/webpack fails in an unclear way because of "unsupported" version of raw-loader

[falsyvalues]

🐞 Bug report

Is this a regression?

No

Description

Building hybrid app without angular-cli via @ngtools/webpack in AoT mode it will fail in really unclear way (see Exception or Error). This is because raw-loader used in this building pipeline line was in 3.1.0 version.
This will work fine together with 1.0.0. How we can we know that? We can't because @ngtools/webpack don't have dependency for raw-loader listed in package.json. Dependencies are located in @angular-devkit/build-angular but @ngtools/webpack doesn't have dependency for it.
This is one of few crucial problems that I found during

🔬 Minimal Reproduction

It can be easily reproducible using angular-cli:

ng new ng-test-project
cd ng-test-project
// enable aot for tests
npm i raw-loader@3.1.0
ng test --no-watch

🔥 Exception or Error

UnhandledPromiseRejectionWarning: TypeError: Cannot destructure property `warnings` of 'undefined' or 'null'.
  at /project/node_modules/@ngtools/webpack/src/resource_loader.js:81:23
  at /project/node_modules/webpack/lib/Compiler.js:659:23
  at /project/node_modules/webpack/lib/Compilation.js:1379:13
  at eval (:9:1)
  at /project/node_modules/@ngtools/webpack/src/resource_loader.js:70:39
  at processTicksAndRejections (internal/process/task_queues.js:85:5)

After this fix 9478ee9 we get:

The loader "${filepath}" didn't return a string.

🌍 Your Environment

node: v12.8.0
npm: 6.10.3
typescript: 3.5.3
webpack: 4.38.0
@angular/compiler: 8.2.0
@angular/compiler-cli: 8.2.0
@ngtools/webpack: 8.2.0
raw-loader: 1.0.0
raw-loader: 2.0.0 (failing)
raw-loader: 3.1.0 (failing)

Anything else relevant?
Obviously it fails because of change in raw-loader switching from CommonJS to ES Module.

At resource_loader.js level its easy to fix 🙂

[alan-agius4]

Duplicate of #15149

[falsyvalues]

@alan-agius4 Will #15149 cover all mentioned problems while they are not described there?

[alan-agius4]

Hi @falsyvalues, I though a bit more about this.

With regards to the raw-loader, it's more of an optionalPeerDependency (which this concept doesn't exist on npm) as raw-loader is not required when disabling directTemplateLoading.

Adding raw-loader as a dependency to @ngtools/webpack, will not solve the problem, because in theory you can have multiple raw-loaders in your node_modules in your case for example you'd have raw-loader@3.x in your root node_modules directory, and raw-loader@1.x in the node_modules of @ngtools/webpack. However, webpack will only resolve the first raw-loader, which will end up still causing the original error.

Probably, what we can do is to try to resolve raw-loader from the compilation basePath and if the version is not the one we support we show a better error message.

[falsyvalues]

Hi @falsyvalues, I though a bit more about this.

With regards to the raw-loader, it's more of an optionalPeerDependency (which this concept doesn't exist on npm) as raw-loader is not required when disabling directTemplateLoading.

I can't agree that it's optional. It wont work without it, btw directTemplateLoading is by default true.

Adding raw-loader as a dependency to @ngtools/webpack, will not solve the problem, because in theory you can have multiple raw-loaders in your node_modules in your case for example you'd have raw-loader@3.x in your root node_modules directory, and raw-loader@1.x in the node_modules of @ngtools/webpack. However, webpack will only resolve the first raw-loader, which will end up still causing the original error.

This is valid from one point but invalid from another. While adding dependency in @ngtools/webpack may not not in some cases at least we are able to identify dependencies and validated them, this is also valid for other "dependencies" of @ngtools/webpack.

Adding support for higher versions of raw-loader is quite simple at least at resource_loader level. Maybe its worth to add it.

Probably, what we can do is to try to resolve raw-loader from the compilation basePath and if the version is not the one we support we show a better error message.
Any improvement here would be great :)

[alan-agius4]

Hi @falsyvalues, I was referring that directTemplateLoading is false by default in @ngtools/webpack, it's being set to true by the consumer which in this case is @angular-devkit/build-angular.

[falsyvalues]

Hi @alan-agius4, I was doing exactly opposite way, because @angular-devkit/build-angular was my source of "truth". Its clear now.

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