Loading TypeScript file assets via HttpClient can cause dev-server errors with the browser-esbuild and application builders

[jinbijin]

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

While running the application through the dev-server via npm start, when a TypeScript file is loaded from the assets via the HttpClient, it seems to be analyzed by the vite:import-analysis plugin. If there are any references that cannot be resolved, this plugin will cause the load of this TypeScript asset file to fail and display an error message on the page.

Minimal Reproduction

Minimal reproduction repository: https://github.com/jinbijin/vite-ts-assets

• Run ng serve, and navigate to the served page.

Expected result: Both HTTP calls succeed.

Actual result: The HTTP call into the asset folder fails, and an error is displayed on the page.

Exception or Error

11:09:24 [vite] Internal server error: Failed to resolve import "unresolved" from "src\assets\unresolved.ts". Does the file exist?
  Plugin: vite:import-analysis
  File: D:/Workspace/vite-ts-assets/src/assets/unresolved.ts:1:29
  1  |  import { unresolved } from 'unresolved';
     |                              ^
  2  |  
  3  |  export function testUnresolved(): void {
      at formatError (file:///D:/Workspace/vite-ts-assets/node_modules/vite/dist/node/chunks/dep-68d1a114.js:44062:46)
      at TransformContext.error (file:///D:/Workspace/vite-ts-assets/node_modules/vite/dist/node/chunks/dep-68d1a114.js:44058:19)
      at normalizeUrl (file:///D:/Workspace/vite-ts-assets/node_modules/vite/dist/node/chunks/dep-68d1a114.js:41844:33)
      at async file:///D:/Workspace/vite-ts-assets/node_modules/vite/dist/node/chunks/dep-68d1a114.js:41998:47
      at async Promise.all (index 0)
      at async TransformContext.transform (file:///D:/Workspace/vite-ts-assets/node_modules/vite/dist/node/chunks/dep-68d1a114.js:41914:13)
      at async Object.transform (file:///D:/Workspace/vite-ts-assets/node_modules/vite/dist/node/chunks/dep-68d1a114.js:44352:30)
      at async loadAndTransform (file:///D:/Workspace/vite-ts-assets/node_modules/vite/dist/node/chunks/dep-68d1a114.js:55026:29)
      at async viteTransformMiddleware (file:///D:/Workspace/vite-ts-assets/node_modules/vite/dist/node/chunks/dep-68d1a114.js:64430:32)

Your Environment

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


Angular CLI: 17.0.6
Node: 20.10.0
Package Manager: npm 10.0.0
OS: win32 x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.6
@angular-devkit/build-angular   17.0.6
@angular-devkit/core            17.0.6
@angular-devkit/schematics      17.0.6
@schematics/angular             17.0.6
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

No response

[alan-agius4]

This is caused by Vite as it will intercept all JS and CSS like file extensions and try to transform them, see code portion https://github.com/vitejs/vite/blob/746a1daab0395f98f0afbdee8f364cb6cf2f3b3f/packages/vite/src/node/server/middlewares/transform.ts#L165-L170

Out of curiosity why do you have a TypeScript file as an asset?

[jinbijin]

This is for a demo application for a component library, where we show example usages alongside their source code. In order to be able to load in the corresponding source as text, we have set up those source files to be assets.

[angular-automatic-lock-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.}