diff --git a/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts b/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts index d8d0434dd..18ea16f9f 100644 --- a/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts +++ b/packages/vite-plugin-angular/src/lib/angular-vite-plugin.ts @@ -10,7 +10,7 @@ import { hasStyleUrls, hasTemplateUrl, resolveStyleUrls, - resolveTemplateUrl, + resolveTemplateUrls, } from './component-resolvers'; import { augmentHostWithResources } from './host'; @@ -218,11 +218,11 @@ export function angular(options?: PluginOptions): Plugin[] { if (watchMode) { if (hasTemplateUrl(code)) { - const templateUrl = resolveTemplateUrl(code, id); + const templateUrls = resolveTemplateUrls(code, id); - if (templateUrl) { + templateUrls.forEach((templateUrl) => { this.addWatchFile(templateUrl); - } + }); } if (hasStyleUrls(code)) { diff --git a/packages/vite-plugin-angular/src/lib/component-resolvers.spec.ts b/packages/vite-plugin-angular/src/lib/component-resolvers.spec.ts index 340787b64..6120444ba 100644 --- a/packages/vite-plugin-angular/src/lib/component-resolvers.spec.ts +++ b/packages/vite-plugin-angular/src/lib/component-resolvers.spec.ts @@ -3,7 +3,7 @@ import { describe, it, expect } from 'vitest'; import { hasTemplateUrl, resolveStyleUrls, - resolveTemplateUrl, + resolveTemplateUrls, } from './component-resolvers'; describe('component-resolvers styleUrls', () => { @@ -81,10 +81,10 @@ describe('component-resolvers styleUrls', () => { `; const actualUrl = '/path/to/src/app.component.html'; - const resolvedTemplateUrl = resolveTemplateUrl(code, id); + const resolvedTemplateUrls = resolveTemplateUrls(code, id); expect(hasTemplateUrl(code)).toBeTruthy(); - expect(resolvedTemplateUrl).toBe(actualUrl); + expect(resolvedTemplateUrls[0]).toBe(actualUrl); }); it('should handle templateUrls with double quotes', () => { @@ -96,10 +96,32 @@ describe('component-resolvers styleUrls', () => { `; const actualUrl = '/path/to/src/app.component.html'; - const resolvedTemplateUrl = resolveTemplateUrl(code, id); + const resolvedTemplateUrls = resolveTemplateUrls(code, id); expect(hasTemplateUrl(code)).toBeTruthy(); - expect(resolvedTemplateUrl).toBe(actualUrl); + expect(resolvedTemplateUrls[0]).toBe(actualUrl); + }); + + it('should handle multiple templateUrls in a single file', () => { + const code = ` + @Component({ + templateUrl: "./app.component.html" + }) + export class MyComponent {} + + @Component({ + templateUrl: "./app1.component.html" + }) + export class MyComponentTwo {} + `; + + const actualUrl1 = '/path/to/src/app.component.html'; + const actualUrl2 = '/path/to/src/app1.component.html'; + const resolvedTemplateUrls = resolveTemplateUrls(code, id); + + expect(hasTemplateUrl(code)).toBeTruthy(); + expect(resolvedTemplateUrls[0]).toBe(actualUrl1); + expect(resolvedTemplateUrls[1]).toBe(actualUrl2); }); }); }); diff --git a/packages/vite-plugin-angular/src/lib/component-resolvers.ts b/packages/vite-plugin-angular/src/lib/component-resolvers.ts index f60723851..18202b275 100644 --- a/packages/vite-plugin-angular/src/lib/component-resolvers.ts +++ b/packages/vite-plugin-angular/src/lib/component-resolvers.ts @@ -1,7 +1,7 @@ import { dirname, resolve } from 'path'; const styleUrlsRE = /styleUrls\s*:\s*\[([^\[]*?)\]/; -const templateUrlRE = /\s*templateUrl\s*:\s*["|']*?["|'].*/; +const templateUrlRE = /templateUrl:\s*["'](.*?)["']/g; export function hasStyleUrls(code: string) { return styleUrlsRE.test(code); @@ -11,27 +11,39 @@ export function resolveStyleUrls(code: string, id: string) { const styleUrlsGroup = styleUrlsRE.exec(code); if (Array.isArray(styleUrlsGroup) && styleUrlsGroup[0]) { - const styleUrls = styleUrlsGroup[0].replace(/(styleUrls|\:|\s|\[|\]|"|')/g, ''); + const styleUrls = styleUrlsGroup[0].replace( + /(styleUrls|\:|\s|\[|\]|"|')/g, + '' + ); const styleUrlPaths = styleUrls?.split(',') || []; - return styleUrlPaths.map(styleUrlPath => resolve(dirname(id), styleUrlPath)); + return styleUrlPaths.map((styleUrlPath) => + resolve(dirname(id), styleUrlPath) + ); } return []; } export function hasTemplateUrl(code: string) { - return templateUrlRE.test(code); + return code.includes('templateUrl:'); } -export function resolveTemplateUrl(code: string, id: string) { - const templateUrlGroup = templateUrlRE.exec(code); +export function resolveTemplateUrls(code: string, id: string) { + const templateUrlGroup = Array.from(code.matchAll(templateUrlRE)); + const templateUrlPaths: string[] = []; - let templateUrlPath = ''; - if (Array.isArray(templateUrlGroup) && templateUrlGroup[0]) { - const resolvedTemplatePath = templateUrlGroup![0].replace(/templateUrl|\s|'|"|\:|,/g, ''); - templateUrlPath = resolve(dirname(id), resolvedTemplatePath); + if (Array.isArray(templateUrlGroup)) { + templateUrlGroup.forEach((trg) => { + const resolvedTemplatePath = trg[1].replace( + /templateUrl|\s|'|"|\:|,/g, + '' + ); + const templateUrlPath = resolve(dirname(id), resolvedTemplatePath); + + templateUrlPaths.push(templateUrlPath); + }); } - return templateUrlPath; -} \ No newline at end of file + return templateUrlPaths; +}