Loader declared in angular.json as file not working on development but works in production

[felipecarrillo100]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

In Angular 17, I utilized a loader to process .glb files as assets. This setup functioned smoothly in both development and production environments, with the files being correctly copied to the designated asset directory during production builds. I acrchitect.build.options

"loader": {
  ".glb": "file"
}

Upon upgrading to Angular 19, the loader configuration ceased to work in development mode, although it remains functional in production. In production, the application operates without issues, and the .glb files are successfully transferred to the asset directory.

The file is imported using the following statement:

import GizmoCircles from "ria-toolbox/libs/scene-navigation/gizmo/gizmo_circles.glb";

However, in development mode, I encounter a console warning:

Cannot optimize dependency: ria-toolbox/libs/scene-navigation/gizmo/gizmo_arrows.glb, present in client 'optimizeDeps.include'

Additionally, the browser displays the following error:

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .glb file format, or if it's an asset, add "**/*.glb" to `assetsInclude` in your configuration.
D:/luciadriatraining/toolbox/angular-toolbox-sample/node_modules/ria-toolbox/libs/scene-navigation/gizmo/gizmo_circles.glb

As a consequence, the application crashes, rendering the development environment unusable.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

[plugin:vite:import-analysis] Failed to parse source for import analysis because the content contains invalid JS syntax. You may need to install appropriate plugins to handle the .glb file format, or if it's an asset, add "**/*.glb" to `assetsInclude` in your configuration.
D:/luciadriatraining/toolbox/angular-toolbox-sample/node_modules/ria-toolbox/libs/scene-navigation/gizmo/gizmo_octhedron.glb
    at TransformPluginContext._formatLog (file:///D:/luciadriatraining/toolbox/angular-toolbox-sample/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:47867:41)
    at TransformPluginContext.error (file:///D:/luciadriatraining/toolbox/angular-toolbox-sample/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:47864:16)
    at TransformPluginContext.transform (file:///D:/luciadriatraining/toolbox/angular-toolbox-sample/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:45949:14)
    at async EnvironmentPluginContainer.transform (file:///D:/luciadriatraining/toolbox/angular-toolbox-sample/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:47662:18)
    at async loadAndTransform (file:///D:/luciadriatraining/toolbox/angular-toolbox-sample/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:41320:27)
    at async viteTransformMiddleware (file:///D:/luciadriatraining/toolbox/angular-toolbox-sample/node_modules/@angular/build/node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:42796:24

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 19.0.0
Node: 22.11.0
Package Manager: npm 10.9.0
OS: win32 x64

Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1900.0 (cli-only)
@angular-devkit/core         19.0.0 (cli-only)
@angular-devkit/schematics   19.0.0 (cli-only)
@schematics/angular          19.0.0 (cli-only)

Anything else?

The code functions flawlessly in Angular 17 in both production and development environments.

However, after upgrading to Angular 19, the application fails to load .glb files in development mode, causing it to crash. In contrast, it operates as expected in production.

Since the error message displayed is:

[plugin:vite:import-analysis] Failed to parse source for import.

This suggests there may be an issue with the development server's implementation with vite for loading files in development mode.

The GLB files I use are around 100kb and are in binary format if this adds some useful info

[clydin]

Is ria-toolbox a package? It appears to be imported as one. This triggers the vite prebundling during development which is the source of the error.
If this is a package, it can be excluded from prebundling via the dev-server options:

              "prebundle": {
                "exclude": ["ria-toolbox"]
              }

For additional information, please see https://angular.dev/tools/cli/build-system-migration#prebundling

[felipecarrillo100]

Yes, https://github.com/felipecarrillo100/ria-toolbox is a package.

It defines JavaScript methods load load glb files from the package itself, but it gives the option to the user to use his own glb if he prefers. In this case I'm trying to load a glb that exists with in the package and fails as described in the issue. The solution used to work in Angular 17 but stopped working in Angular 19, I assume for the introduction of Vite.

Thanks for pointing to the migration procedures. I followed your proposed solution and it worked!
Thank you so much.

For reference to others, I changed angular.json server section as follows:

          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "prebundle": {
              "exclude": ["ria-toolbox"]
            }
          },```