Webpack loaders stop working inline after upgrade to Angular 9

[jcairney]

🐞 Bug report

Command (mark with an x)

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

Is this a regression?

Yes, the previous version in which this bug was not present was: 8.2.14 ### Description In my project we were using inline import statements that invoked webpack loaders to load jQuery-based UI libraries on the fly, such as datatables.js or graphing libraries.

ngOnInit() {
  import('script-loader!datatables/datatables.js').then(()=>{
    . . .
  });
}

or

import('imports-loader?this=>window!flot-bundle/flot-bundle.min.js').then(() => {...}

The advantage of 'imports-loader' is that it can set variables that need to be present in the script such as $ for jquery, or setting 'this' to 'window' global scope. Then I began the migration from Angular 8 to 12, getting as far as 9 and encountering this issue. Imports with the above syntax are no longer recognized, and produce compilation error:

error TS2307: Cannot find module 'script-loader!datatables/datatables.js'.

I've searched extensively through Angular issues, TypeScript issues, Webpack issues, and other documentation trying to find out what changed in this upgrade from 8 to 9 and what the new solution to this particular issue is. I have found nothing conclusive. I also haven't been able to create a sandbox example on CodeSandbox or StackBlitz that has the inline import loaders working. From looking at other issues, as well as finding dead links to sections of the Angular docs on webpack and loaders, and 'eject' having been removed from the cli, I've gotten the sense that consumers new to Angular aren't supposed to know it uses webpack under the hood and shouldn't rely on any of its functionality. If webpack plugins are no longer supported, and this issue is expected, then there is certainly a lack of documentation out there about this change and what the solution should be for those who were using loaders. Any guidance/clarity you can offer would be appreciated. ## 🔬 Minimal Reproduction

🔥 Exception or Error

error TS2307: Cannot find module 'script-loader!datatables/datatables.js'.

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 9.1.15
Node: 14.17.4
OS: win32 x64

Angular: 9.1.13
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router, upgrade
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.15
@angular-devkit/build-angular     0.901.15
@angular-devkit/build-optimizer   0.901.15
@angular-devkit/build-webpack     0.901.15
@angular-devkit/core              9.1.15
@angular-devkit/schematics        9.1.15
@angular/cdk                      8.2.3
@angular/cli                      9.1.15
@ngtools/webpack                  9.1.15
@schematics/angular               9.1.15
@schematics/update                0.901.15
rxjs                              6.5.3
typescript                        3.8.3
webpack                           4.42.0

Anything else relevant?

[alan-agius4]

Webpack specific features were never supported by the Angular CLI.

By opting to use Webpack specific features you are moving off the supported path.

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