Updating to angular 15 breaks build with: Error: Module not found

[albanx]

🐞 Bug report

What modules are related to this issue?

• [x ] builders
• common
• [x ] express-engine

Is this a regression?

yes works in Angular 14, breaks in Angular 15

Description

I start migrating my Angular App from v14 to angular v15. My apps has full server side rendering using this package.
Once I completed the update to angular 15 and run npm start, it breaks with the following errors:

I was able to fix the error only by removing @nguniversal/express-engine package and commenting relevant usage code.
After the some debugging I was able to find the reproduction steps:

🔬 Minimal Reproduction

• ng new bug-angular15-nguniversal
• cd .\bug-angular15-nguniversal\
• ng add @nguniversal/express-engine
• Replace the app.component.ts code with the following:

import { Component, OnInit, Optional, Inject, PLATFORM_ID, Input } from '@angular/core';
import { RESPONSE, REQUEST } from '@nguniversal/express-engine/tokens';
import { isPlatformServer } from '@angular/common';
import { Request, Response } from 'express';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'bug-angular15-nguniversal';

  constructor(
    // @Optional() @Inject(REQUEST) private request: Request, ===> BUG HERE
    @Optional() @Inject(RESPONSE) private response: Response,
    @Inject(PLATFORM_ID) private platformId: any
  ) {}

  ngOnInit() {
    if (isPlatformServer(this.platformId)) {
      this.response.status(404);
    }
  }
}

By commenting the line @Optional() @Inject(REQUEST) private request: Request, it fires the bug. By uncommenting the build works correctly.

• Removing or uncommenting the line works.
• Removing the Request import works
• Breaks only when the line is commented and the Request import is present

🔥 Exception or Error

```
./node_modules/express/node_modules/serve-static/index.js:18:14-37 - Error: Module not found: Error: Can't resolve 'path' in 'C:\projects\property\node_modules\express\node_modules\serve-static'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

./node_modules/mime-types/index.js:15:14-37 - Error: Module not found: Error: Can't resolve 'path' in 'C:\projects\property\node_modules\mime-types'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }
```

🌍 Your Environment

Angular CLI: 15.0.0
Node: 18.12.1
Package Manager: npm 8.19.2
OS: win32 x64

Angular: 15.0.0
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1500.0
@angular-devkit/build-angular   15.0.0
@angular-devkit/core            15.0.0
@angular-devkit/schematics      15.0.0
@nguniversal/builders           15.0.0
@nguniversal/express-engine     15.0.0
@schematics/angular             15.0.0
rxjs                            7.5.7
typescript                      4.8.4

[alexfriesen]

It looks like your browser build tries to bundle in some node.js specific stuff.
Try adding type to your express import.

import type { Request, Response } from 'express';

[alan-agius4]

@albanx, I am unable to replicate using the steps provided above.

[albanx]

@alan-agius4 please copy exactly the app.component I have set above (Ex. remove the console.log from your code) and comment the @Optional() @Inject(REQUEST) private request: Request

[alan-agius4]

I managed to replicate this even when using the version 14.

It looks like it's caused by @ngtools/webpack where the unused import is not elided.