Code using require("raw-loader!<localPath>") breaking after upgrading from 12.1 to 12.2.

[wartab]

🐞 Bug report

Command (mark with an x)

• [ ] new
• [x] build
• [x] 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: .... Yes, this still worked in 12.1. Not sure if it was an intended feature, but it's been working for years. ### Description A clear and concise description of the problem... ## 🔬 Minimal Reproduction ```ts const csv = require("raw-loader!../../locale/translations.editor.csv").default; ``` Code such as the one above breaks upon trying to build the Angular application using `ng build` or `ng serve` after the update.

🔥 Exception or Error

./src/app/components/third-party/third-party-edit-dialog.component.ts:30:13-82 - Error: Module not found: Error: Can't resolve 'raw-loader' in 'C:\Users\Vincent\project\src\app\components\third-party'

./src/app/services/app-version.service.ts:10:47-112 - Error: Module not found: Error: Can't resolve 'raw-loader' in 'C:\Users\Vincent\project\src\app\services'

./src/app/services/app-version.service.ts:13:47-112 - Error: Module not found: Error: Can't resolve 'raw-loader' in 'C:\Users\Vincent\project\src\app\services'

./src/app/services/custom-translation.service.ts:31:22-84 - Error: Module not found: Error: Can't resolve 'raw-loader' in 'C:\Users\Vincent\project\src\app\services'

./src/app/services/custom-translation.service.ts:35:22-83 - Error: Module not found: Error: Can't resolve 'raw-loader' in 'C:\Users\Vincent\project\src\app\services'

Error: node_modules/@angular/compiler-cli/src/ngtsc/diagnostics/index.d.ts:10:10 - error TS2305: Module '"@angular/compiler-cli/src/ngtsc/diagnostics/src/error_code"' has no exported member 'COMPILER_ERRORS_WITH_GUIDES'.

10 export { COMPILER_ERRORS_WITH_GUIDES, ERROR_DETAILS_PAGE_BASE_URL, ErrorCode, ngErrorCode } from './src/error_code';
            ~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@angular/compiler-cli/src/ngtsc/diagnostics/index.d.ts:10:39 - error TS2305: Module '"@angular/compiler-cli/src/ngtsc/diagnostics/src/error_code"' has no exported member 'ERROR_DETAILS_PAGE_BASE_URL'.

10 export { COMPILER_ERRORS_WITH_GUIDES, ERROR_DETAILS_PAGE_BASE_URL, ErrorCode, ngErrorCode } from './src/error_code';
                                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~

Error: node_modules/@angular/compiler-cli/src/ngtsc/diagnostics/index.d.ts:10:79 - error TS2724: '"@angular/compiler-cli/src/ngtsc/diagnostics/src/error_code"' has no exported member named 'ngErrorCode'. Did you mean 'ErrorCode'?

10 export { COMPILER_ERRORS_WITH_GUIDES, ERROR_DETAILS_PAGE_BASE_URL, ErrorCode, ngErrorCode } from './src/error_code';
                                                                                 ~~~~~~~~~~~

  node_modules/@angular/compiler-cli/src/ngtsc/diagnostics/src/error_code.d.ts:12:21
    12 export declare enum ErrorCode {
                           ~~~~~~~~~
    'ErrorCode' is declared here.

🌍 Your Environment

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

Angular CLI: 12.2.1
Node: 14.15.4
Package Manager: npm 6.14.10
OS: win32 x64

Angular: 12.2.1
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1202.1
@angular-devkit/build-angular      12.2.1
@angular-devkit/core               12.2.1
@angular-devkit/schematics         12.2.1
@angular/cdk                       12.2.1
@angular/material                  12.2.1
@angular/material-moment-adapter   12.2.1
@schematics/angular                12.2.1
rxjs                               6.6.7
typescript                         4.3.5

Anything else relevant? Seems to be related to: https://github.com/angular/angular-cli/pull/21305

Also if our broken code should never have worked in the first place, can you please indicate how to load local files from the project statically?

[alan-agius4]

Indeed this is expected not to work. Webpack specific features are not supported by the Angular CLI.

CSV files should be loaded using XHR requests. See: https://angular.io/guide/http

[vbraun]

We use raw-loader to inline svg icons and get the same error.

So there is no way to statically inline anything any more? Or is the webpack asset/source module type supported as #21305 seems to suggest? And if that is the case, how to enable it for additional file patterns?

[wartab]

The CSVs were just one example. But the a few of our cases don't really have access to HttpClient and/or can't be loaded asynchronously.

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