`application` builder unable to resolve import

[mcdenhoed]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

When using the new application builder, running ng serve fails at runtime if any code from the package image-size@2.0.0-beta.2 is used. This same package/version works using the legacy builder.

Minimal Reproduction

Create a new angular project

ng new <whatever>
cd <whatever>

Install the following package

npm i image-size@2.0.0-beta.2

Use an export from this library

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { imageSize } from "image-size";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'title';

  constructor() {
    imageSize(new Uint8Array())
  }
}

Exception or Error

$ ng serve 
Initial chunk files | Names         |  Raw size
polyfills.js        | polyfills     |  86.27 kB | 
main.js             | main          |  23.01 kB | 
styles.css          | styles        |  95 bytes | 

                    | Initial total | 109.37 kB

Application bundle generation complete. [1.139 seconds]

Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
✘ [ERROR] Could not resolve "./types"

    node_modules/image-size/dist/esm/index.mjs:1:22:
      1 │ export { types } from './types';
        ╵                       ~~~~~~~~~

✘ [ERROR] Could not resolve "./lookup"

    node_modules/image-size/dist/esm/index.mjs:2:50:
      2 │ export { lookup as imageSize, disableTypes } from './lookup';
        ╵                                                   ~~~~~~~~~~

### Your Environment

```text
_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 18.0.2
Node: 21.4.0 (Unsupported)
Package Manager: npm 10.2.4
OS: darwin arm64

Angular: 18.0.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1800.2
@angular-devkit/build-angular   18.0.2
@angular-devkit/core            18.0.3
@angular-devkit/schematics      18.0.3
@angular/cli                    18.0.2
@schematics/angular             18.0.2
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.7

Anything else relevant?

No response

[clydin]

This is expected behavior. .mjs files require file extensions for all import specifiers. This is an issue with the image-size package in the prerelease 2.0 versions. The stable 1.1.1 version does not appear to have this problem.

[mcdenhoed]

Ahhh ok, I had worried that was the case. Thanks for the clarification!

[alan-agius4]

Note: We will add a workaround for ng serve (using Vite) to address this issue, as it is already managed when using ng build with esbuild.

Again, this is a workaround since valid ESM imports must include a file extension.