Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
1 task
albanx opened this issue Nov 19, 2022 · 5 comments · Fixed by #24318
Closed
1 task

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

albanx opened this issue Nov 19, 2022 · 5 comments · Fixed by #24318
Labels
area: @ngtools/webpack freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix

Comments

@albanx
Copy link

albanx commented Nov 19, 2022

🐞 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
Copy link

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

This comment was marked as off-topic.

@albanx

This comment was marked as resolved.

@alan-agius4
Copy link
Collaborator

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.

@alan-agius4 alan-agius4 transferred this issue from angular/universal Nov 21, 2022
@alan-agius4 alan-agius4 added area: @ngtools/webpack freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix labels Nov 21, 2022
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 24, 2022
In the case the import declerastion has an unused import we did not properly elide type references when `emitDecoratorMetadata` is disabled.

Closes angular#24295
alan-agius4 added a commit to alan-agius4/angular-cli that referenced this issue Nov 24, 2022
In the case the import declaration has an unused import we did not properly elide type references when `emitDecoratorMetadata` is disabled.

Closes angular#24295
angular-robot bot pushed a commit that referenced this issue Nov 28, 2022
In the case the import declaration has an unused import we did not properly elide type references when `emitDecoratorMetadata` is disabled.

Closes #24295
angular-robot bot pushed a commit that referenced this issue Nov 28, 2022
In the case the import declaration has an unused import we did not properly elide type references when `emitDecoratorMetadata` is disabled.

Closes #24295

(cherry picked from commit 856720b)
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Dec 29, 2022
ikjelle pushed a commit to ikjelle/angular-cli that referenced this issue Mar 26, 2024
In the case the import declaration has an unused import we did not properly elide type references when `emitDecoratorMetadata` is disabled.

Closes angular#24295
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: @ngtools/webpack freq1: low Only reported by a handful of users who observe it rarely severity3: broken type: bug/fix
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants