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

[jmls]

I'm getting this with 11.0,5 - what's the workaround ? I removed the "resolution" but still am getting the error

[t3o-it]

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

It should have been solved in 11.1.0-next-2/0.1101.0-next.2. If you try that version(change both @angular/cli and @angular-devkit/build-angular dependencies) you won't have that issue anymore. However, in my case another issue came out after changing those dependencies:

⠙ Generating browser application bundles (phase: building)...(node:5678) [DEP_WEBPACK_DEPRECATION_ARRAY_TO_SET] DeprecationWarning: Compilation.modules was changed from Array to Set (using Array method 'find' is deprecated)
/home/t3o/devel/module-federation-test/node_modules/webpack/lib/Dependency.js:216
                throw new Error(
                ^

Error: module property was removed from Dependency (use compilation.moduleGraph.getModule(dependency) instead)
    at JsonExportsDependency.get (/home/t3o/devel/module-federation-test/node_modules/webpack/lib/Dependency.js:216:9)
    at iteratorDependency (/home/t3o/devel/module-federation-test/node_modules/webpack/lib/Compilation.js:2640:11)
    at Compilation.removeReasonsOfDependencyBlock (/home/t3o/devel/module-federation-test/node_modules/webpack/lib/Compilation.js:2657:42)
    at /home/t3o/devel/module-federation-test/node_modules/webpack/lib/Compilation.js:1828:10
    at /home/t3o/devel/module-federation-test/node_modules/webpack/lib/util/AsyncQueue.js:104:29
    at processTicksAndRejections (internal/process/task_queues.js:79:11)
npm ERR! code ELIFECYCLE
npm ERR! errno 1

So, for now I'm using a locally modified 11.0.5 with the fix suggested by @nchangnon in the original post of this thread and it works fine.

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