ng serve fails with global scripts in agular.json when opt-in to Webpack 5

[nchangnon]

🐞 Bug report

Command (mark with an x)

• new
• 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: ....

This works when not opting-in to Webpack 5.

Description

A clear and concise description of the problem...

If scripts are specified in the build options to be included globally, ng serve fails to run. ng build succeeds and is able to be deployed as usual.

🔬 Minimal Reproduction

1. create a new angular project
2. opt-in to webpack 5 :

"resolutions": { "webpack": "5.4.0" }

3. add an external dependency such as jquery to package.json (using yarn)
   yarn add jquery

4. update angular.json to include the new global dependency

  "projects": {
    "wp5": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/wp5",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": [
              "./node_modules/jquery/dist/jquery.min.js"
            ]
          }
     ...
   }

5. run ng serve

🔥 Exception or Error

✔ Compiled successfully.
✔ Browser application bundle generation complete.
⠴ Generating browser application bundles (phase: building).../Users/nickchangnon/code/wp5Test/wp5/node_modules/@angular-devkit/build-angular/src/webpack/plugins/scripts-webpack-plugin.js:39
            const scriptTime = compilation.fileTimestamps.get(scripts[i]);
                                                          ^

TypeError: Cannot read property 'get' of undefined
    at ScriptsWebpackPlugin.shouldSkip (/Users/nickchangnon/code/wp5Test/wp5/node_modules/@angular-devkit/build-angular/src/webpack/plugins/scripts-webpack-plugin.js:39:59)
    at /Users/nickchangnon/code/wp5Test/wp5/node_modules/@angular-devkit/build-angular/src/webpack/plugins/scripts-webpack-plugin.js:73:22
    at /Users/nickchangnon/code/wp5Test/wp5/node_modules/@angular-devkit/build-angular/src/webpack/plugins/scripts-webpack-plugin.js:26:93
    at /Users/nickchangnon/code/wp5Test/wp5/node_modules/webpack/lib/Compilation.js:336:47
    at Hook.eval [as callAsync] (eval at create (/Users/nickchangnon/code/wp5Test/wp5/node_modules/tapable/lib/HookCodeFactory.js:33:10), :52:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/Users/nickchangnon/code/wp5Test/wp5/node_modules/tapable/lib/Hook.js:18:14)
    at cont (/Users/nickchangnon/code/wp5Test/wp5/node_modules/webpack/lib/Compilation.js:1996:33)
    at /Users/nickchangnon/code/wp5Test/wp5/node_modules/webpack/lib/Compilation.js:2042:9
    at /Users/nickchangnon/code/wp5Test/wp5/node_modules/neo-async/async.js:2830:7
    at Object.each (/Users/nickchangnon/code/wp5Test/wp5/node_modules/neo-async/async.js:2850:39)
    at Compilation.createChunkAssets (/Users/nickchangnon/code/wp5Test/wp5/node_modules/webpack/lib/Compilation.js:3107:12)
    at /Users/nickchangnon/code/wp5Test/wp5/node_modules/webpack/lib/Compilation.js:2037:13
    at /Users/nickchangnon/code/wp5Test/wp5/node_modules/webpack/lib/Compilation.js:2191:5
    at /Users/nickchangnon/code/wp5Test/wp5/node_modules/neo-async/async.js:2818:7
    at done (/Users/nickchangnon/code/wp5Test/wp5/node_modules/neo-async/async.js:3522:9)
    at /Users/nickchangnon/code/wp5Test/wp5/node_modules/neo-async/async.js:2830:7

🌍 Your Environment

Angular CLI: 11.0.3
Node: 15.3.0
OS: darwin x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.3
@angular-devkit/build-angular   0.1100.3
@angular-devkit/core            11.0.3
@angular-devkit/schematics      11.0.3
@schematics/angular             11.0.3
@schematics/update              0.1100.3
rxjs                            6.6.3
typescript                      4.0.5

Anything else relevant?

It works if ScriptsWebpackPlugin.shouldSkip is updated to include compilation.fileTimestamps check first

        for (let i = 0; i < scripts.length; i++) {
            const scriptTime = compilation.fileTimestamps && compilation.fileTimestamps.get(scripts[i]);
            if (!scriptTime || scriptTime > this._lastBuildTime) {
                this._lastBuildTime = Date.now();
                return false;
            }
        }
 

[antibaben]

Hi, sorry for asking, is this issue solved already? I'm having the same problem.