@analogjs/vite-plugin-angular 2.0.0-alpha.9 → 2.0.0-beta.10

package/src/lib/angular-vite-plugin.js

@@ -1,30 +1,29 @@
-import { dirname, relative, resolve } from 'node:path';
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs';
+import { basename, dirname, isAbsolute, join, relative, resolve, } from 'node:path';
 import * as compilerCli from '@angular/compiler-cli';
-import * as ts from 'typescript';
 import { createRequire } from 'node:module';
-import { normalizePath, preprocessCSS, } from 'vite';
 import * as ngCompiler from '@angular/compiler';
+import { defaultClientConditions, normalizePath, preprocessCSS, } from 'vite';
+import { buildOptimizerPlugin } from './angular-build-optimizer-plugin.js';
+import { jitPlugin } from './angular-jit-plugin.js';
 import { createCompilerPlugin } from './compiler-plugin.js';
 import { StyleUrlsResolver, TemplateUrlsResolver, } from './component-resolvers.js';
 import { augmentHostWithCaching, augmentHostWithResources, augmentProgramWithVersioning, mergeTransformers, } from './host.js';
-import { jitPlugin } from './angular-jit-plugin.js';
-import { buildOptimizerPlugin } from './angular-build-optimizer-plugin.js';
-import { createJitResourceTransformer, SourceFileCache, angularMajor, } from './utils/devkit.js';
-import { angularVitestPlugins } from './angular-vitest-plugin.js';
 import { angularStorybookPlugin } from './angular-storybook-plugin.js';
+import { angularVitestPlugins } from './angular-vitest-plugin.js';
+import { angularMajor, createJitResourceTransformer, SourceFileCache, } from './utils/devkit.js';
 const require = createRequire(import.meta.url);
-import { getFrontmatterMetadata } from './authoring/frontmatter.js';
-import { defaultMarkdownTemplateTransforms, } from './authoring/markdown-transform.js';
-import { routerPlugin } from './router-plugin.js';
 import { pendingTasksPlugin } from './angular-pending-tasks.plugin.js';
-import { analyzeFileUpdates } from './utils/hmr-candidates.js';
+import { liveReloadPlugin } from './live-reload-plugin.js';
+import { nxFolderPlugin } from './nx-folder-plugin.js';
+import { replaceFiles, } from './plugins/file-replacements.plugin.js';
+import { routerPlugin } from './router-plugin.js';
 /**
  * TypeScript file extension regex
  * Match .(c or m)ts, .ts extensions with an optional ? for query params
  * Ignore .tsx extensions
  */
 const TS_EXT_REGEX = /\.[cm]?(ts|analog|ag)[^x]?\??/;
-const ANGULAR_COMPONENT_PREFIX = '/@ng/component';
 const classNames = new Map();
 export function angular(options) {
     /**
@@ -32,10 +31,7 @@ export function angular(options) {
      * are used for values not provided.
      */
     const pluginOptions = {
-        tsconfig: options?.tsconfig ??
-            (process.env['NODE_ENV'] === 'test'
-                ? './tsconfig.spec.json'
-                : './tsconfig.app.json'),
+        tsconfigGetter: createTsConfigGetter(options?.tsconfig),
         workspaceRoot: options?.workspaceRoot ?? process.cwd(),
         inlineStylesExtension: options?.inlineStylesExtension ?? 'css',
         advanced: {
@@ -46,24 +42,17 @@ export function angular(options) {
             },
         },
         supportedBrowsers: options?.supportedBrowsers ?? ['safari 15'],
-        jit: options?.experimental?.supportAnalogFormat ? false : options?.jit,
-        supportAnalogFormat: options?.experimental?.supportAnalogFormat ?? false,
-        markdownTemplateTransforms: options?.experimental
-            ?.markdownTemplateTransforms?.length
-            ? options.experimental.markdownTemplateTransforms
-            : defaultMarkdownTemplateTransforms,
+        jit: options?.jit,
         include: options?.include ?? [],
         additionalContentDirs: options?.additionalContentDirs ?? [],
         liveReload: options?.liveReload ?? false,
         disableTypeChecking: options?.disableTypeChecking ?? true,
+        fileReplacements: options?.fileReplacements ?? [],
     };
-    // The file emitter created during `onStart` that will be used during the build in `onLoad` callbacks for TS files
-    let fileEmitter;
-    let compilerOptions = {};
-    const ts = require('typescript');
     let resolvedConfig;
-    let rootNames;
-    let host;
+    let resolvedTsConfigPath = '';
+    // Store config context needed for getTsConfigPath resolution
+    let tsConfigResolutionContext = null;
     let nextProgram;
     let builderProgram;
     let watchMode = false;
@@ -72,6 +61,7 @@ export function angular(options) {
     let externalComponentStyles;
     const sourceFileCache = new SourceFileCache();
     const isTest = process.env['NODE_ENV'] === 'test' || !!process.env['VITEST'];
+    const isVitestVscode = !!process.env['VITEST_VSCODE'];
     const isStackBlitz = !!process.versions['webcontainer'];
     const isAstroIntegration = process.env['ANALOG_ASTRO'] === 'true';
     const isStorybook = process.env['npm_lifecycle_script']?.includes('storybook') ||
@@ -80,9 +70,16 @@ export function angular(options) {
         process.env['ANALOG_STORYBOOK'] === 'true';
     const jit = typeof pluginOptions?.jit !== 'undefined' ? pluginOptions.jit : isTest;
     let viteServer;
-    let styleTransform;
     const styleUrlsResolver = new StyleUrlsResolver();
     const templateUrlsResolver = new TemplateUrlsResolver();
+    let outputFile;
+    const outputFiles = new Map();
+    const fileEmitter = (file) => {
+        outputFile?.(file);
+        return outputFiles.get(normalizePath(file));
+    };
+    let initialCompilation = false;
+    const declarationFiles = [];
     function angularPlugin() {
         let isProd = false;
         if (angularMajor < 19 || isTest) {
@@ -90,21 +87,19 @@ export function angular(options) {
         }
         return {
             name: '@analogjs/vite-plugin-angular',
-            async watchChange() {
-                if (isTest) {
-                    await buildAndAnalyze();
-                }
-            },
             async config(config, { command }) {
                 watchMode = command === 'serve';
                 isProd =
                     config.mode === 'production' ||
                         process.env['NODE_ENV'] === 'production';
-                pluginOptions.tsconfig =
-                    options?.tsconfig ??
-                        resolve(config.root || '.', process.env['NODE_ENV'] === 'test'
-                            ? './tsconfig.spec.json'
-                            : './tsconfig.app.json');
+                // Store the config context for later resolution in configResolved
+                tsConfigResolutionContext = {
+                    root: config.root || '.',
+                    isProd,
+                    isLib: !!config?.build?.lib,
+                };
+                // Do a preliminary resolution for esbuild plugin (before configResolved)
+                const preliminaryTsConfigPath = getTsConfigPath(tsConfigResolutionContext.root, pluginOptions.tsconfigGetter(), tsConfigResolutionContext.isProd, isTest, tsConfigResolutionContext.isLib);
                 return {
                     esbuild: config.esbuild ?? false,
                     optimizeDeps: {
@@ -113,7 +108,7 @@ export function angular(options) {
                         esbuildOptions: {
                             plugins: [
                                 createCompilerPlugin({
-                                    tsconfig: pluginOptions.tsconfig,
+                                    tsconfig: preliminaryTsConfigPath,
                                     sourcemap: !isProd,
                                     advancedOptimizations: isProd,
                                     jit,
@@ -128,12 +123,20 @@ export function angular(options) {
                         },
                     },
                     resolve: {
-                        conditions: ['style'],
+                        conditions: [
+                            'style',
+                            ...(config.resolve?.conditions || defaultClientConditions),
+                        ],
                     },
                 };
             },
             configResolved(config) {
                 resolvedConfig = config;
+                // resolve the tsconfig path after config is fully resolved
+                if (tsConfigResolutionContext) {
+                    const tsconfigValue = pluginOptions.tsconfigGetter();
+                    resolvedTsConfigPath = getTsConfigPath(tsConfigResolutionContext.root, tsconfigValue, tsConfigResolutionContext.isProd, isTest, tsConfigResolutionContext.isLib);
+                }
                 if (isTest) {
                     // set test watch mode
                     // - vite override from vitest-angular
@@ -149,76 +152,30 @@ export function angular(options) {
             configureServer(server) {
                 viteServer = server;
                 server.watcher.on('add', async () => {
-                    setupCompilation(resolvedConfig);
-                    await buildAndAnalyze();
+                    await performCompilation(resolvedConfig);
                 });
                 server.watcher.on('unlink', async () => {
-                    setupCompilation(resolvedConfig);
-                    await buildAndAnalyze();
+                    await performCompilation(resolvedConfig);
                 });
-                if (pluginOptions.liveReload) {
-                    const angularComponentMiddleware = async (req, res, next) => {
-                        if (req.url === undefined || res.writableEnded) {
-                            return;
-                        }
-                        if (!req.url.includes(ANGULAR_COMPONENT_PREFIX)) {
-                            next();
-                            return;
-                        }
-                        const requestUrl = new URL(req.url, 'http://localhost');
-                        const componentId = requestUrl.searchParams.get('c');
-                        if (!componentId) {
-                            res.statusCode = 400;
-                            res.end();
-                            return;
-                        }
-                        const [fileId] = decodeURIComponent(componentId).split('@');
-                        const resolvedId = resolve(process.cwd(), fileId);
-                        const invalidated = !!server.moduleGraph.getModuleById(resolvedId)
-                            ?.lastInvalidationTimestamp && classNames.get(resolvedId);
-                        // don't send an HMR update until the file has been invalidated
-                        if (!invalidated) {
-                            res.setHeader('Content-Type', 'text/javascript');
-                            res.setHeader('Cache-Control', 'no-cache');
-                            res.end('');
-                            return;
-                        }
-                        const result = await fileEmitter?.(resolvedId);
-                        res.setHeader('Content-Type', 'text/javascript');
-                        res.setHeader('Cache-Control', 'no-cache');
-                        res.end(`${result?.hmrUpdateCode || ''}`);
-                    };
-                    viteServer.middlewares.use(angularComponentMiddleware);
-                }
             },
             async buildStart() {
-                setupCompilation(resolvedConfig);
-                // Only store cache if in watch mode
-                if (watchMode) {
-                    augmentHostWithCaching(host, sourceFileCache);
+                // Defer the first compilation in test mode
+                if (!isVitestVscode) {
+                    const { host } = await performCompilation(resolvedConfig);
+                    initialCompilation = true;
+                    // Only store cache if in watch mode
+                    if (watchMode) {
+                        augmentHostWithCaching(host, sourceFileCache);
+                    }
                 }
-                await buildAndAnalyze();
             },
             async handleHotUpdate(ctx) {
-                // The `handleHotUpdate` hook may be called before the `buildStart`,
-                // which sets the compilation. As a result, the `host` may not be available
-                // yet for use, leading to build errors such as "cannot read properties of undefined"
-                // (because `host` is undefined).
-                if (!host) {
-                    return;
-                }
                 if (TS_EXT_REGEX.test(ctx.file)) {
                     let [fileId] = ctx.file.split('?');
-                    if (pluginOptions.supportAnalogFormat &&
-                        ['ag', 'analog', 'agx'].some((ext) => fileId.endsWith(ext))) {
-                        fileId += '.ts';
-                    }
-                    const stale = sourceFileCache.get(fileId);
-                    sourceFileCache.invalidate([fileId]);
-                    await buildAndAnalyze();
-                    const result = await fileEmitter?.(fileId, stale);
+                    await performCompilation(resolvedConfig, [fileId]);
+                    const result = fileEmitter(fileId);
                     if (pluginOptions.liveReload &&
-                        !!result?.hmrEligible &&
+                        result?.hmrEligible &&
                         classNames.get(fileId)) {
                         const relativeFileId = `${relative(process.cwd(), fileId)}@${classNames.get(fileId)}`;
                         sendHMRComponentUpdate(ctx.server, relativeFileId);
@@ -236,7 +193,8 @@ export function angular(options) {
                      * for an external resource (styles, html).
                      */
                     const isDirect = ctx.modules.find((mod) => ctx.file === mod.file && mod.id?.includes('?direct'));
-                    if (isDirect) {
+                    const isInline = ctx.modules.find((mod) => ctx.file === mod.file && mod.id?.includes('?inline'));
+                    if (isDirect || isInline) {
                         if (pluginOptions.liveReload && isDirect?.id && isDirect.file) {
                             const isComponentStyle = isDirect.type === 'css' && isComponentStyleSheet(isDirect.id);
                             if (isComponentStyle) {
@@ -287,7 +245,10 @@ export function angular(options) {
                             }
                         });
                     });
-                    await buildAndAnalyze();
+                    await performCompilation(resolvedConfig, [
+                        ...mods.map((mod) => mod.id),
+                        ...updates,
+                    ]);
                     if (updates.length > 0) {
                         updates.forEach((updateId) => {
                             const impRelativeFileId = `${relative(process.cwd(), updateId)}@${classNames.get(updateId)}`;
@@ -320,7 +281,7 @@ export function angular(options) {
                 }
                 return undefined;
             },
-            async load(id, options) {
+            async load(id) {
                 // Map angular inline styles to the source text
                 if (isComponentStyleSheet(id)) {
                     const componentStyles = inlineComponentStyles?.get(getFilenameFromPath(id));
@@ -328,17 +289,6 @@ export function angular(options) {
                         return componentStyles;
                     }
                 }
-                if (pluginOptions.liveReload &&
-                    options?.ssr &&
-                    id.includes(ANGULAR_COMPONENT_PREFIX)) {
-                    const requestUrl = new URL(id.slice(1), 'http://localhost');
-                    const componentId = requestUrl.searchParams.get('c');
-                    if (!componentId) {
-                        return;
-                    }
-                    const result = await fileEmitter?.(resolve(process.cwd(), decodeURIComponent(componentId).split('@')[0]));
-                    return result?.hmrUpdateCode || '';
-                }
                 return;
             },
             async transform(code, id) {
@@ -394,12 +344,17 @@ export function angular(options) {
                      * for test(Vitest)
                      */
                     if (isTest) {
+                        if (isVitestVscode && !initialCompilation) {
+                            // Do full initial compilation
+                            await performCompilation(resolvedConfig);
+                            initialCompilation = true;
+                        }
                         const tsMod = viteServer?.moduleGraph.getModuleById(id);
                         if (tsMod) {
                             const invalidated = tsMod.lastInvalidationTimestamp;
                             if (testWatchMode && invalidated) {
                                 sourceFileCache.invalidate([id]);
-                                await buildAndAnalyze();
+                                await performCompilation(resolvedConfig, [id]);
                             }
                         }
                     }
@@ -414,7 +369,7 @@ export function angular(options) {
                             this.addWatchFile(absoluteFileUrl);
                         }
                     }
-                    const typescriptResult = await fileEmitter?.(id);
+                    const typescriptResult = fileEmitter(id);
                     if (typescriptResult?.warnings &&
                         typescriptResult?.warnings.length > 0) {
                         this.warn(`${typescriptResult.warnings.join('\n')}`);
@@ -435,25 +390,6 @@ export function angular(options) {
                             data = data.replace(`angular:jit:style:file;${styleFile}`, `${resolvedStyleUrl}?inline`);
                         });
                     }
-                    if (jit) {
-                        return {
-                            code: data,
-                            map: null,
-                        };
-                    }
-                    if ((id.endsWith('.analog') ||
-                        id.endsWith('.agx') ||
-                        id.endsWith('.ag')) &&
-                        pluginOptions.supportAnalogFormat &&
-                        fileEmitter) {
-                        sourceFileCache.invalidate([`${id}.ts`]);
-                        const ngFileResult = await fileEmitter(`${id}.ts`);
-                        data = ngFileResult?.content || '';
-                        if (id.includes('.agx')) {
-                            const metadata = await getFrontmatterMetadata(code, id, pluginOptions.markdownTemplateTransforms || []);
-                            data += metadata;
-                        }
-                    }
                     return {
                         code: data,
                         map: null,
@@ -461,10 +397,18 @@ export function angular(options) {
                 }
                 return undefined;
             },
+            closeBundle() {
+                declarationFiles.forEach(({ declarationFileDir, declarationPath, data }) => {
+                    mkdirSync(declarationFileDir, { recursive: true });
+                    writeFileSync(declarationPath, data, 'utf-8');
+                });
+            },
         };
     }
     return [
+        replaceFiles(pluginOptions.fileReplacements, pluginOptions.workspaceRoot),
         angularPlugin(),
+        pluginOptions.liveReload && liveReloadPlugin({ classNames, fileEmitter }),
         ...(isTest && !isStackBlitz ? angularVitestPlugins() : []),
         (jit &&
             jitPlugin({
@@ -474,36 +418,12 @@ export function angular(options) {
             supportedBrowsers: pluginOptions.supportedBrowsers,
             jit,
         }),
-        (isStorybook && angularStorybookPlugin()),
+        (isStorybook &&
+            angularStorybookPlugin(pluginOptions.workspaceRoot)),
         routerPlugin(),
         pendingTasksPlugin(),
+        nxFolderPlugin(),
     ].filter(Boolean);
-    function findAnalogFiles(config) {
-        const analogConfig = pluginOptions.supportAnalogFormat;
-        if (!analogConfig) {
-            return [];
-        }
-        let extraGlobs = [];
-        if (typeof analogConfig === 'object') {
-            if (analogConfig.include) {
-                extraGlobs = analogConfig.include;
-            }
-        }
-        const fg = require('fast-glob');
-        const appRoot = normalizePath(resolve(pluginOptions.workspaceRoot, config.root || '.'));
-        const workspaceRoot = normalizePath(resolve(pluginOptions.workspaceRoot));
-        const globs = [
-            `${appRoot}/**/*.{analog,agx,ag}`,
-            ...extraGlobs.map((glob) => `${workspaceRoot}${glob}.{analog,agx,ag}`),
-            ...(pluginOptions.additionalContentDirs || [])?.map((glob) => `${workspaceRoot}${glob}/**/*.agx`),
-            ...pluginOptions.include.map((glob) => `${workspaceRoot}${glob}`.replace(/\.ts$/, '.analog')),
-        ];
-        return fg
-            .sync(globs, {
-            dot: true,
-        })
-            .map((file) => `${file}.ts`);
-    }
     function findIncludes() {
         const fg = require('fast-glob');
         const workspaceRoot = normalizePath(resolve(pluginOptions.workspaceRoot));
@@ -514,11 +434,41 @@ export function angular(options) {
             dot: true,
         });
     }
-    function setupCompilation(config, context) {
+    function createTsConfigGetter(tsconfigOrGetter) {
+        if (typeof tsconfigOrGetter === 'function') {
+            return tsconfigOrGetter;
+        }
+        return () => tsconfigOrGetter || '';
+    }
+    function getTsConfigPath(root, tsconfig, isProd, isTest, isLib) {
+        if (tsconfig && isAbsolute(tsconfig)) {
+            if (!existsSync(tsconfig)) {
+                console.error(`[@analogjs/vite-plugin-angular]: Unable to resolve tsconfig at ${tsconfig}. This causes compilation issues. Check the path or set the "tsconfig" property with an absolute path.`);
+            }
+            return tsconfig;
+        }
+        let tsconfigFilePath = './tsconfig.app.json';
+        if (isLib) {
+            tsconfigFilePath = isProd
+                ? './tsconfig.lib.prod.json'
+                : './tsconfig.lib.json';
+        }
+        if (isTest) {
+            tsconfigFilePath = './tsconfig.spec.json';
+        }
+        if (tsconfig) {
+            tsconfigFilePath = tsconfig;
+        }
+        const resolvedPath = resolve(root, tsconfigFilePath);
+        if (!existsSync(resolvedPath)) {
+            console.error(`[@analogjs/vite-plugin-angular]: Unable to resolve tsconfig at ${resolvedPath}. This causes compilation issues. Check the path or set the "tsconfig" property with an absolute path.`);
+        }
+        return resolvedPath;
+    }
+    async function performCompilation(config, ids) {
         const isProd = config.mode === 'production';
-        const analogFiles = findAnalogFiles(config);
         const includeFiles = findIncludes();
-        const { options: tsCompilerOptions, rootNames: rn } = compilerCli.readConfiguration(pluginOptions.tsconfig, {
+        let { options: tsCompilerOptions, rootNames } = compilerCli.readConfiguration(resolvedTsConfigPath, {
             suppressOutputPathCheck: true,
             outDir: undefined,
             sourceMap: false,
@@ -535,12 +485,6 @@ export function angular(options) {
             supportTestBed: false,
             supportJitMode: false,
         });
-        if (pluginOptions.supportAnalogFormat) {
-            // Experimental Local Compilation is necessary
-            // for the Angular compiler to work with
-            // AOT and virtually compiled .analog files.
-            tsCompilerOptions.compilationMode = 'experimental-local';
-        }
         if (pluginOptions.liveReload && watchMode) {
             tsCompilerOptions['_enableHmr'] = true;
             tsCompilerOptions['externalRuntimeStyles'] = true;
@@ -553,11 +497,17 @@ export function angular(options) {
             tsCompilerOptions['supportTestBed'] = true;
             tsCompilerOptions['supportJitMode'] = true;
         }
-        rootNames = rn.concat(analogFiles, includeFiles);
-        compilerOptions = tsCompilerOptions;
-        host = ts.createIncrementalCompilerHost(compilerOptions);
-        styleTransform = (code, filename) => preprocessCSS(code, filename, config);
+        if (!isTest && config.build?.lib) {
+            tsCompilerOptions['declaration'] = true;
+            tsCompilerOptions['declarationMap'] = watchMode;
+            tsCompilerOptions['inlineSources'] = true;
+        }
+        const replacements = pluginOptions.fileReplacements.map((rp) => join(pluginOptions.workspaceRoot, rp.ssr || rp.with));
+        rootNames = rootNames.concat(includeFiles, replacements);
+        const ts = require('typescript');
+        const host = ts.createIncrementalCompilerHost(tsCompilerOptions);
         if (!jit) {
+            const styleTransform = (code, filename) => preprocessCSS(code, filename, config);
             inlineComponentStyles = tsCompilerOptions['externalRuntimeStyles']
                 ? new Map()
                 : undefined;
@@ -566,59 +516,119 @@ export function angular(options) {
                 : undefined;
             augmentHostWithResources(host, styleTransform, {
                 inlineStylesExtension: pluginOptions.inlineStylesExtension,
-                supportAnalogFormat: pluginOptions.supportAnalogFormat,
                 isProd,
-                markdownTemplateTransforms: pluginOptions.markdownTemplateTransforms,
                 inlineComponentStyles,
                 externalComponentStyles,
             });
         }
-    }
-    /**
-     * Creates a new NgtscProgram to analyze/re-analyze
-     * the source files and create a file emitter.
-     * This is shared between an initial build and a hot update.
-     */
-    async function buildAndAnalyze() {
+        /**
+         * Creates a new NgtscProgram to analyze/re-analyze
+         * the source files and create a file emitter.
+         * This is shared between an initial build and a hot update.
+         */
         let builder;
         let typeScriptProgram;
         let angularCompiler;
         if (!jit) {
             // Create the Angular specific program that contains the Angular compiler
-            const angularProgram = new compilerCli.NgtscProgram(rootNames, compilerOptions, host, nextProgram);
+            const angularProgram = new compilerCli.NgtscProgram(rootNames, tsCompilerOptions, host, nextProgram);
             angularCompiler = angularProgram.compiler;
             typeScriptProgram = angularProgram.getTsProgram();
             augmentProgramWithVersioning(typeScriptProgram);
-            builder = builderProgram =
-                ts.createEmitAndSemanticDiagnosticsBuilderProgram(typeScriptProgram, host, builderProgram);
+            builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(typeScriptProgram, host, builderProgram);
             await angularCompiler.analyzeAsync();
             nextProgram = angularProgram;
+            builderProgram =
+                builder;
         }
         else {
-            builder = builderProgram =
-                ts.createEmitAndSemanticDiagnosticsBuilderProgram(rootNames, compilerOptions, host, nextProgram);
+            builder = ts.createEmitAndSemanticDiagnosticsBuilderProgram(rootNames, tsCompilerOptions, host, nextProgram);
             typeScriptProgram = builder.getProgram();
-            nextProgram = builderProgram;
         }
         if (!watchMode) {
             // When not in watch mode, the startup cost of the incremental analysis can be avoided by
             // using an abstract builder that only wraps a TypeScript program.
             builder = ts.createAbstractBuilder(typeScriptProgram, host);
         }
-        const getTypeChecker = () => builder.getProgram().getTypeChecker();
-        fileEmitter = createFileEmitter(builder, mergeTransformers({
-            before: [
-                ...(jit
-                    ? [
-                        compilerCli.constructorParametersDownlevelTransform(builder.getProgram()),
-                        createJitResourceTransformer(getTypeChecker),
-                    ]
-                    : []),
-                ...pluginOptions.advanced.tsTransformers.before,
-            ],
-            after: pluginOptions.advanced.tsTransformers.after,
-            afterDeclarations: pluginOptions.advanced.tsTransformers.afterDeclarations,
-        }, jit ? {} : angularCompiler.prepareEmit().transformers), () => [], angularCompiler, pluginOptions.liveReload, pluginOptions.disableTypeChecking);
+        const beforeTransformers = jit
+            ? [
+                compilerCli.constructorParametersDownlevelTransform(builder.getProgram()),
+                createJitResourceTransformer(() => builder.getProgram().getTypeChecker()),
+            ]
+            : [];
+        const transformers = mergeTransformers({ before: beforeTransformers }, jit ? {} : angularCompiler.prepareEmit().transformers);
+        const fileMetadata = getFileMetadata(builder, angularCompiler, pluginOptions.liveReload, pluginOptions.disableTypeChecking);
+        const writeFileCallback = (_filename, content, _a, _b, sourceFiles) => {
+            if (!sourceFiles?.length) {
+                return;
+            }
+            const filename = normalizePath(sourceFiles[0].fileName);
+            if (filename.includes('ngtypecheck.ts') || filename.includes('.d.')) {
+                return;
+            }
+            const metadata = watchMode ? fileMetadata(filename) : {};
+            outputFiles.set(filename, {
+                content,
+                dependencies: [],
+                errors: metadata.errors,
+                warnings: metadata.warnings,
+                hmrUpdateCode: metadata.hmrUpdateCode,
+                hmrEligible: metadata.hmrEligible,
+            });
+        };
+        const writeOutputFile = (id) => {
+            const sourceFile = builder.getSourceFile(id);
+            if (!sourceFile) {
+                return;
+            }
+            let content = '';
+            builder.emit(sourceFile, (filename, data) => {
+                if (/\.[cm]?js$/.test(filename)) {
+                    content = data;
+                }
+                if (!watchMode &&
+                    !isTest &&
+                    /\.d\.ts/.test(filename) &&
+                    !filename.includes('.ngtypecheck.')) {
+                    // output to library root instead /src
+                    const declarationPath = resolve(config.root, config.build.outDir, relative(config.root, filename)).replace('/src/', '/');
+                    const declarationFileDir = declarationPath
+                        .replace(basename(filename), '')
+                        .replace('/src/', '/');
+                    declarationFiles.push({
+                        declarationFileDir,
+                        declarationPath,
+                        data,
+                    });
+                }
+            }, undefined /* cancellationToken */, undefined /* emitOnlyDtsFiles */, transformers);
+            writeFileCallback(id, content, false, undefined, [sourceFile]);
+        };
+        if (watchMode) {
+            if (ids && ids.length > 0) {
+                ids.forEach((id) => writeOutputFile(id));
+            }
+            else {
+                /**
+                 * Only block the server from starting up
+                 * during testing.
+                 */
+                if (isTest) {
+                    // TypeScript will loop until there are no more affected files in the program
+                    while (builder.emitNextAffectedFile(writeFileCallback, undefined, undefined, transformers)) {
+                        /* empty */
+                    }
+                }
+            }
+        }
+        if (!isTest) {
+            /**
+             * Perf: Output files on demand so the dev server
+             * isn't blocked when emitting files.
+             */
+            outputFile = writeOutputFile;
+        }
+        return { host };
     }
 }
 function sendHMRComponentUpdate(server, id) {
@@ -628,15 +638,12 @@ function sendHMRComponentUpdate(server, id) {
     });
     classNames.delete(id);
 }
-export function createFileEmitter(program, transformers = {}, onAfterEmit, angularCompiler, liveReload, disableTypeChecking) {
-    return async (file, stale) => {
+export function getFileMetadata(program, angularCompiler, liveReload, disableTypeChecking) {
+    const ts = require('typescript');
+    return (file) => {
         const sourceFile = program.getSourceFile(file);
         if (!sourceFile) {
-            return undefined;
-        }
-        if (stale) {
-            const hmrEligible = !!analyzeFileUpdates(stale, sourceFile, angularCompiler);
-            return { dependencies: [], hmrEligible };
+            return {};
         }
         const diagnostics = getDiagnosticsForSourceFile(sourceFile, !!disableTypeChecking, program, angularCompiler);
         const errors = diagnostics
@@ -648,22 +655,19 @@ export function createFileEmitter(program, transformers = {}, onAfterEmit, angul
             .filter((d) => d.category === ts.DiagnosticCategory?.Warning)
             .map((d) => d.messageText);
         let hmrUpdateCode = undefined;
+        let hmrEligible = false;
         if (liveReload) {
             for (const node of sourceFile.statements) {
                 if (ts.isClassDeclaration(node) && node.name != null) {
                     hmrUpdateCode = angularCompiler?.emitHmrUpdateModule(node);
-                    !!hmrUpdateCode && classNames.set(file, node.name.getText());
+                    if (!!hmrUpdateCode) {
+                        classNames.set(file, node.name.getText());
+                        hmrEligible = true;
+                    }
                 }
             }
         }
-        let content;
-        program.emit(sourceFile, (filename, data) => {
-            if (/\.[cm]?js$/.test(filename)) {
-                content = data;
-            }
-        }, undefined /* cancellationToken */, undefined /* emitOnlyDtsFiles */, transformers);
-        onAfterEmit?.(sourceFile);
-        return { content, dependencies: [], errors, warnings, hmrUpdateCode };
+        return { errors, warnings, hmrUpdateCode, hmrEligible };
     };
 }
 function getDiagnosticsForSourceFile(sourceFile, disableTypeChecking, program, angularCompiler) {