refactor(@angular-devkit/build-angular): replace raw-loader with Webpack 5 asset modules

With Webpack 5, the `raw-loader` is no longer needed and its functionality is provided via configuration options within the Webpack configuration via asset modules.  Asset modules (https://webpack.js.org/guides/asset-modules/) provide a built-in way to provide `raw-loader`, `url-loader`, and `file-loader` functionality without additional dependencies.

package.json

@@ -201,7 +201,6 @@
     "protractor": "~7.0.0",
     "puppeteer": "10.1.0",
     "quicktype-core": "6.0.69",
-    "raw-loader": "4.0.2",
     "regenerator-runtime": "0.13.7",
     "resolve-url-loader": "4.0.0",
     "rxjs": "6.6.7",

packages/angular_devkit/build_angular/BUILD.bazel

@@ -171,7 +171,6 @@ ts_library(
         "@npm//postcss-import",
         "@npm//postcss-loader",
         "@npm//postcss-preset-env",
-        "@npm//raw-loader",
         "@npm//regenerator-runtime",
         "@npm//resolve-url-loader",
         "@npm//rxjs",

packages/angular_devkit/build_angular/package.json

@@ -54,7 +54,6 @@
     "postcss-import": "14.0.2",
     "postcss-loader": "6.1.1",
     "postcss-preset-env": "6.7.0",
-    "raw-loader": "4.0.2",
     "regenerator-runtime": "0.13.7",
     "resolve-url-loader": "4.0.0",
     "rxjs": "6.6.7",

packages/angular_devkit/build_angular/src/webpack/configs/styles.ts

@@ -242,7 +242,6 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
   const postCssLoaderPath = require.resolve('postcss-loader');
 
   const componentStyleLoaders: webpack.RuleSetUseItem[] = [
-    { loader: require.resolve('raw-loader') },
     {
       loader: postCssLoaderPath,
       options: {
@@ -435,6 +434,7 @@ export function getStylesConfig(wco: WebpackConfigOptions): webpack.Configuratio
               {
                 exclude: globalStylePaths,
                 use: componentStyleLoaders,
+                type: 'asset/source',
               },
               // Global styles are only defined global styles
               {

packages/angular_devkit/build_webpack/BUILD.bazel

@@ -86,7 +86,6 @@ ts_library(
         "@npm//@angular/platform-browser-dynamic",
         "@npm//@types/node-fetch",
         "@npm//node-fetch",
-        "@npm//raw-loader",
         "@npm//tslib",
         "@npm//zone.js",
     ],

packages/angular_devkit/build_webpack/test/angular-app/webpack.config.js

@@ -24,8 +24,8 @@ module.exports = {
   ],
   module: {
     rules: [
-      { test: /\.css$/, loader: 'raw-loader' },
+      { test: /\.css$/, type: 'asset/source' },
-      { test: /\.html$/, loader: 'raw-loader' },
+      { test: /\.html$/, type: 'asset/source' },
       { test: /\.ts$/, loader: '@ngtools/webpack' },
     ],
   },

tests/legacy-cli/e2e/assets/webpack/test-app/package.json

@@ -16,7 +16,6 @@
     "zone.js": "^0.11.4"
   },
   "devDependencies": {
-    "raw-loader": "^4.0.2",
     "sass": "^1.32.8",
     "sass-loader": "^11.0.1",
     "typescript": "~4.3.2",

tests/legacy-cli/e2e/assets/webpack/test-app/webpack.config.js

@@ -3,25 +3,23 @@ const path = require('path');
 
 module.exports = {
   resolve: {
-    extensions: ['.ts', '.js']
+    extensions: ['.ts', '.js'],
   },
   entry: './app/main.ts',
   output: {
     path: path.resolve('./dist'),
     publicPath: 'dist/',
-    filename: 'app.main.js'
+    filename: 'app.main.js',
   },
-  plugins: [
+  plugins: [new ngToolsWebpack.AngularWebpackPlugin()],
-    new ngToolsWebpack.ivy.AngularWebpackPlugin(),
-  ],
   module: {
     rules: [
-      { test: /\.scss$/, use: ['raw-loader', 'sass-loader'] },
+      { test: /\.scss$/, use: ['sass-loader'], type: 'asset/source' },
-      { test: /\.html$/, loader: 'raw-loader' },
+      { test: /\.html$/, type: 'asset/source' },
-      { test: /\.ts$/, loader: ngToolsWebpack.ivy.AngularWebpackLoaderPath }
+      { test: /\.ts$/, loader: ngToolsWebpack.AngularWebpackLoaderPath },
-    ]
+    ],
   },
   devServer: {
-    historyApiFallback: true
+    historyApiFallback: true,
-  }
+  },
 };

yarn.lock

@@ -94,7 +94,6 @@
 
 "@angular/dev-infra-private@https://github.com/angular/dev-infra-private-builds.git#876f2094018d2f0f32853784ffccab74ed1f344e":
   version "0.0.0"
-  uid "876f2094018d2f0f32853784ffccab74ed1f344e"
   resolved "https://github.com/angular/dev-infra-private-builds.git#876f2094018d2f0f32853784ffccab74ed1f344e"
   dependencies:
     "@angular/benchpress" "0.2.1"
@@ -9425,14 +9424,6 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-raw-loader@4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/raw-loader/-/raw-loader-4.0.2.tgz#1aac6b7d1ad1501e66efdac1522c73e59a584eb6"
-  integrity sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^3.0.0"
-
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"
@@ -9968,7 +9959,6 @@ sass@1.35.1, sass@^1.32.8:
 
 "sauce-connect-proxy@https://saucelabs.com/downloads/sc-4.6.4-linux.tar.gz":
   version "0.0.0"
-  uid "992e2cb0d91e54b27a4f5bbd2049f3b774718115"
   resolved "https://saucelabs.com/downloads/sc-4.6.4-linux.tar.gz#992e2cb0d91e54b27a4f5bbd2049f3b774718115"
 
 saucelabs@^1.5.0: