Failed to resolve import "angular:jit:template:file;./app.component.html" error when plugin is loaded twice and jit is enabled

[yjaaidi]

Please provide the environment you discovered this bug in.

Running vitest while loading the angular plugin twice in jit mode fails.

import angular from '@analogjs/vite-plugin-angular';

export default defineConfig(({ mode }) => {
  return {
    plugins: [
      angular({jit: true}),
      angular({jit: true})
    ],
    ...
  }
});

This is a black swan edge case that should almost never happen but when it happens it is really hard to debug.
I just spent few hours due to an issue with Nx vitest executor which extracts the plugins from the vite config and gives it back to vitest causing the plugins to be loaded twice 😅

Which area/package is the issue in?

vitest-angular

Description

When @analogjs/vite-plugin-angular is loaded twice in vite config and jit mode is enabled the following error happens:

Error: Failed to resolve import "angular:jit:template:file;./app.component.html" from "src/app/app.component.ts". Does the file exist?

Please provide the exception or error you saw

No response

Other information

This seems to happen because the templateUrl is extracted from the source code instead of the TS output.

analog/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts

Line 320 in 7091444

const templateUrls = templateUrlsResolver.resolve(code, id);

I guess that this could be fixed by extracting the template URLs from the transformed data:

analog/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts

Line 347 in 7091444

let data = typescriptResult?.content ?? '';

Please let me know if this fix works for you or do you suggest a better alternative?

I would be willing to submit a PR to fix this issue

• Yes
• No

[brandonroberts]

If we can reliably extract the template and style URLs from the compiled output, that seems reasonable to me.