@nativescript/vite 8.0.0-beta.0 → 8.0.0-dev.0

package/configuration/angular.js

@@ -1,114 +1,72 @@
 import { mergeConfig } from 'vite';
 import path from 'path';
 import fs from 'node:fs';
-import { createRequire } from 'node:module';
 import angular from '@analogjs/vite-plugin-angular';
-import { angularLinkerVitePlugin, angularLinkerVitePluginPost } from '../helpers/angular/angular-linker.js';
-import { ensureSharedAngularLinker } from '../helpers/angular/shared-linker.js';
-import { containsRealNgDeclare } from '../helpers/angular/util.js';
+import { angularLinkerVitePlugin, angularLinkerVitePluginPost } from '../hmr/frameworks/angular/build/angular-linker.js';
+import { synthesizeMissingInjectableFactories } from '../hmr/frameworks/angular/build/synthesize-injectable-factories.js';
+import { getAngularLinkerFactory, runAngularLinker } from '../hmr/frameworks/angular/build/shared-linker.js';
+import { recordLinkerHit, reportLinkerLayerStats } from '../hmr/frameworks/angular/build/linker-stats.js';
+import { inlineDecoratorComponentTemplates } from '../hmr/frameworks/angular/build/inline-decorator-component-templates.js';
+import { appendComponentHmrRegistration, findComponentClassNames, INJECTION_MARKER as HMR_REGISTER_MARKER } from '../hmr/frameworks/angular/build/inject-component-hmr-registration.js';
+import { injectAngularHmrViteIgnore } from '../hmr/frameworks/angular/build/inject-hmr-vite-ignore.js';
+import { synthesizeDecoratorCtorParameters } from '../hmr/frameworks/angular/build/synthesize-decorator-ctor-parameters.js';
+import { containsRealNgDeclare, stripJsComments } from '../hmr/frameworks/angular/build/util.js';
 import { baseConfig } from './base.js';
 import { getCliFlags } from '../helpers/cli-flags.js';
+import { getMonorepoWorkspaceRoot } from '../helpers/project.js';
+import { resolveRelativeToImportMeta } from '../helpers/import-meta-path.js';
+import { resolveVerboseFlag } from '../helpers/logging.js';
+import { NS_OPTIMIZE_DEPS_EXCLUDE } from '../helpers/optimize-deps.js';
+function hasNgDeclarePartial(code) {
+    return code.indexOf('\u0275\u0275ngDeclare') !== -1 || code.indexOf('ɵɵngDeclare') !== -1 || code.indexOf('ngDeclare') !== -1;
+}
 // Rollup-level linker to guarantee Angular libraries are linked when included in the bundle graph.
 function angularRollupLinker(projectRoot) {
-    let babel = null;
-    let createLinker = null;
     const FILTER = /node_modules\/(?:@angular|@nativescript\/angular)\/.*\.[mc]?js$/;
-    async function ensureDeps() {
-        if (babel && createLinker)
-            return;
-        try {
-            const req = createRequire((projectRoot ? projectRoot + '/package.json' : import.meta.url));
-            const babelPath = req.resolve('@babel/core');
-            const linkerPath = req.resolve('@angular/compiler-cli/linker/babel');
-            babel = await import(babelPath);
-            const linkerMod = await import(linkerPath);
-            createLinker = linkerMod.createLinkerPlugin || linkerMod.createEs2015LinkerPlugin;
-        }
-        catch {
-            try {
-                babel = await import('@babel/core');
-            }
-            catch { }
-            try {
-                const linkerMod = await import('@angular/compiler-cli/linker/babel');
-                createLinker = linkerMod.createLinkerPlugin || linkerMod.createEs2015LinkerPlugin;
-            }
-            catch { }
-        }
-    }
+    const debug = process.env.VITE_DEBUG_LOGS === 'true' || process.env.VITE_DEBUG_LOGS === '1';
     return {
         name: 'ns-angular-linker-rollup',
         enforce: 'pre',
         apply: 'build',
         async load(id) {
-            const debug = process.env.VITE_DEBUG_LOGS === 'true' || process.env.VITE_DEBUG_LOGS === '1';
-            const cleanId = id.split('?', 1)[0];
+            const cleanId = normalizeAngularWatchPath(id);
             if (!FILTER.test(cleanId))
                 return null;
             try {
-                await ensureDeps();
-                if (!babel || !createLinker)
-                    return null;
                 const fs = await import('node:fs/promises');
                 const code = await fs.readFile(cleanId, 'utf8');
                 const forceLink = cleanId.includes('/node_modules/@nativescript/angular/') && cleanId.includes('polyfills');
                 if (!code)
                     return null;
-                if (!forceLink && code.indexOf('\u0275\u0275ngDeclare') === -1 && code.indexOf('ɵɵngDeclare') === -1 && code.indexOf('ngDeclare') === -1)
+                if (!forceLink && !hasNgDeclarePartial(code))
                     return null;
-                const plugin = createLinker({ sourceMapping: false });
-                if (debug) {
-                    try {
-                        console.log('[ns-angular-linker][rollup-load] linking', cleanId);
-                    }
-                    catch { }
-                }
-                const result = await babel.transformAsync(code, {
-                    filename: cleanId,
-                    configFile: false,
-                    babelrc: false,
-                    sourceMaps: false,
-                    compact: false,
-                    plugins: [plugin],
-                });
-                if (result?.code && result.code !== code) {
-                    return { code: result.code, map: null };
+                const linked = await runAngularLinker(code, { filename: cleanId, projectRoot, freshPlugin: true });
+                if (linked) {
+                    recordLinkerHit('rollup-load');
+                    if (debug)
+                        console.log('[ns-angular-linker][rollup-load] linked', cleanId);
+                    return { code: linked, map: null };
                 }
             }
             catch { }
             return null;
         },
         async transform(code, id) {
-            const debug = process.env.VITE_DEBUG_LOGS === 'true' || process.env.VITE_DEBUG_LOGS === '1';
-            const cleanId = id.split('?', 1)[0];
+            const cleanId = normalizeAngularWatchPath(id);
             if (!FILTER.test(cleanId))
                 return null;
             const forceLink = cleanId.includes('/node_modules/@nativescript/angular/') && cleanId.includes('polyfills');
             if (!code)
                 return null;
-            if (!forceLink && code.indexOf('\u0275\u0275ngDeclare') === -1 && code.indexOf('ɵɵngDeclare') === -1 && code.indexOf('ngDeclare') === -1)
-                return null;
-            await ensureDeps();
-            if (!babel || !createLinker)
+            if (!forceLink && !hasNgDeclarePartial(code))
                 return null;
             try {
-                const plugin = createLinker({ sourceMapping: false });
-                if (debug) {
-                    try {
-                        console.log('[ns-angular-linker][rollup] linking', cleanId);
-                    }
-                    catch { }
-                }
-                const result = await babel.transformAsync(code, {
-                    filename: cleanId,
-                    configFile: false,
-                    babelrc: false,
-                    sourceMaps: false,
-                    compact: false,
-                    plugins: [plugin],
-                });
-                if (result?.code && result.code !== code) {
-                    return { code: result.code, map: null };
+                const linked = await runAngularLinker(code, { filename: cleanId, projectRoot, freshPlugin: true });
+                if (linked) {
+                    recordLinkerHit('rollup');
+                    if (debug)
+                        console.log('[ns-angular-linker][rollup] linked', cleanId);
+                    return { code: linked, map: null };
                 }
             }
             catch { }
@@ -119,6 +77,24 @@ function angularRollupLinker(projectRoot) {
 const cliFlags = getCliFlags();
 const isDevEnv = process.env.NODE_ENV !== 'production';
 const hmrActive = isDevEnv && !!cliFlags.hmr;
+/**
+ * Web-style template HMR opt-out (`NS_VITE_ANGULAR_LIVE_RELOAD=0`).
+ *
+ * With HMR active we default to the in-place template-replacement pipeline
+ * (see the `liveReload` option below). If a project hits a regression
+ * (broken styling, unresolved `?ngcomp=` imports), this env flag rolls back
+ * to the legacy reboot pipeline without an upstream patch. `0`, `false`,
+ * `off`, and `no` (case-insensitive) mean "off"; anything else — including
+ * unset — keeps the new path on. Read once at module load, like `hmrActive`.
+ */
+const angularLiveReloadDisabledByEnv = (() => {
+    const raw = process.env.NS_VITE_ANGULAR_LIVE_RELOAD;
+    if (typeof raw !== 'string')
+        return false;
+    const v = raw.trim().toLowerCase();
+    return v === '0' || v === 'false' || v === 'off' || v === 'no';
+})();
+const hmrAngularLiveReload = hmrActive && !angularLiveReloadDisabledByEnv;
 const projectRoot = process.cwd();
 const tsConfigAppPath = path.resolve(projectRoot, 'tsconfig.app.json');
 const tsConfigPath = path.resolve(projectRoot, 'tsconfig.json');
@@ -126,93 +102,441 @@ let tsConfig = tsConfigAppPath;
 if (!fs.existsSync(tsConfigAppPath) && fs.existsSync(tsConfigPath)) {
     tsConfig = tsConfigPath;
 }
-const plugins = [
-    // Allow external html template changes to trigger hot reload: Make .ts files depend on their .html templates
-    {
-        name: 'angular-template-deps',
-        transform(code, id) {
-            // For .ts files that reference templateUrl, add the .html file as a dependency
-            if (id.endsWith('.ts') && code.includes('templateUrl')) {
-                const templateUrlMatch = code.match(/templateUrl:\s*['"]\.\/(.*?\.html)['"]/);
-                if (templateUrlMatch) {
-                    const htmlPath = path.resolve(path.dirname(id), templateUrlMatch[1]);
-                    // Add the HTML file as a dependency so Vite watches it
-                    this.addWatchFile(htmlPath);
-                }
+function normalizeAngularWatchPath(filePath) {
+    return filePath
+        .split('?', 1)[0]
+        .replace(/\\/g, '/')
+        .replace(/^file:\/\//, '');
+}
+function normalizeAngularWatchKey(filePath) {
+    const normalizedPath = normalizeAngularWatchPath(filePath);
+    const fileSystemPath = normalizedPath.startsWith('/@fs/') ? normalizedPath.slice('/@fs'.length) : normalizedPath;
+    const normalizedProjectRoot = projectRoot.replace(/\\/g, '/').replace(/\/$/, '');
+    if (normalizedProjectRoot && fileSystemPath.startsWith(normalizedProjectRoot)) {
+        const relative = fileSystemPath.slice(normalizedProjectRoot.length);
+        return relative.startsWith('/') ? relative : `/${relative}`;
+    }
+    return fileSystemPath;
+}
+function getAngularWatchKeys(filePath) {
+    const normalizedPath = normalizeAngularWatchPath(filePath);
+    const keys = new Set();
+    keys.add(normalizedPath);
+    keys.add(normalizeAngularWatchKey(normalizedPath));
+    return Array.from(keys).filter(Boolean);
+}
+function resolveAngularWatchFilePath(filePath) {
+    const normalizedPath = normalizeAngularWatchPath(filePath);
+    const fileSystemPath = normalizedPath.startsWith('/@fs/') ? normalizedPath.slice('/@fs'.length) : normalizedPath;
+    if (path.isAbsolute(fileSystemPath) && fs.existsSync(fileSystemPath)) {
+        return fileSystemPath;
+    }
+    if (fileSystemPath.startsWith('/')) {
+        return path.resolve(projectRoot, `.${fileSystemPath}`);
+    }
+    return path.resolve(projectRoot, fileSystemPath);
+}
+function extractComponentAssetPaths(code, componentId) {
+    const componentPath = normalizeAngularWatchPath(componentId);
+    const assetPaths = new Set();
+    const resolveAssetPath = (assetPath) => normalizeAngularWatchPath(path.resolve(path.dirname(componentPath), assetPath));
+    // Blank out `//` and `/* */` comments before scanning. The regexes below
+    // are intentionally simple (no JS parser) so they would otherwise match
+    // commented-out `templateUrl` / `styleUrls` declarations and register
+    // phantom asset deps via `addWatchFile`. In current Rolldown-Vite that
+    // also enrolls them as `_addedImports`, which `vite:import-analysis`
+    // then tries to resolve — surfacing as a misleading
+    // `Failed to resolve import "<file>" from "<importer>". Does the file
+    // exist?` pre-transform error if the file (predictably) doesn't exist.
+    const scanCode = stripJsComments(code);
+    const templateUrlMatch = scanCode.match(/templateUrl\s*:\s*['"](.+?\.(?:html|htm))['"]/);
+    if (templateUrlMatch) {
+        assetPaths.add(resolveAssetPath(templateUrlMatch[1]));
+    }
+    const styleUrlMatch = scanCode.match(/styleUrl\s*:\s*['"](.+?\.(?:css|less|sass|scss))['"]/);
+    if (styleUrlMatch) {
+        assetPaths.add(resolveAssetPath(styleUrlMatch[1]));
+    }
+    const styleUrlsMatch = scanCode.match(/styleUrls\s*:\s*\[([\s\S]*?)\]/m);
+    if (styleUrlsMatch) {
+        for (const match of styleUrlsMatch[1].matchAll(/['"](.+?\.(?:css|less|sass|scss))['"]/g)) {
+            assetPaths.add(resolveAssetPath(match[1]));
+        }
+    }
+    return Array.from(assetPaths);
+}
+function createAngularPlugins(opts) {
+    const verbose = resolveVerboseFlag();
+    const assetToComponents = new Map();
+    const componentToAssets = new Map();
+    const pendingComponentInvalidations = new Set();
+    // Shared state between the `enforce: 'pre'` discovery plugin and the
+    // `enforce: 'post'` injection plugin. Maps a clean (no-querystring)
+    // .ts file id to the list of `@Component`-decorated class names found
+    // in its RAW TypeScript source. The pre plugin populates this map;
+    // the post plugin reads it to know which class names to register
+    // against the compiled output. Cleared on each pre-plugin invocation
+    // so renames or `@Component` removals don't leave stale entries.
+    const componentsByCleanId = new Map();
+    const untrackComponentAssets = (componentPath) => {
+        const previousAssets = componentToAssets.get(componentPath);
+        if (!previousAssets)
+            return;
+        for (const assetPath of previousAssets) {
+            const components = assetToComponents.get(assetPath);
+            if (!components)
+                continue;
+            components.delete(componentPath);
+            if (components.size === 0) {
+                assetToComponents.delete(assetPath);
             }
-            return null;
+        }
+        componentToAssets.delete(componentPath);
+    };
+    const trackComponentAssets = (componentPath, assetPaths) => {
+        untrackComponentAssets(componentPath);
+        if (assetPaths.length === 0)
+            return;
+        const normalizedAssets = new Set(assetPaths.flatMap((assetPath) => getAngularWatchKeys(assetPath)));
+        componentToAssets.set(componentPath, normalizedAssets);
+        for (const assetPath of normalizedAssets) {
+            const components = assetToComponents.get(assetPath) || new Set();
+            components.add(componentPath);
+            assetToComponents.set(assetPath, components);
+        }
+    };
+    const isCandidateComponentTs = (cleanId) => {
+        if (!cleanId.endsWith('.ts'))
+            return false;
+        if (cleanId.includes('/node_modules/'))
+            return false;
+        if (cleanId.endsWith('.d.ts'))
+            return false;
+        if (cleanId.endsWith('.spec.ts') || cleanId.endsWith('.test.ts'))
+            return false;
+        return true;
+    };
+    return [
+        // HMR self-registration runs in two steps:
+        //
+        //   1. (this plugin, `enforce: 'pre'`) Record the names of
+        //      `@Component`-decorated classes from the RAW TypeScript source
+        //      into `componentsByCleanId` — discovery must happen pre-compile
+        //      because the Analog plugin rewrites the textual decorator away.
+        //   2. (`ns-component-hmr-register-post`, `enforce: 'post'`) Append the
+        //      `__NS_HMR_REGISTER_COMPONENT__` calls to the COMPILED output.
+        //
+        // The split is mandatory: Analog's `transform` returns its own compiled
+        // output (from its `outputFiles` cache), silently discarding any code
+        // modification made earlier in the pipeline — appending in the pre
+        // plugin leaves the HMR class registry empty.
+        //
+        // `apply: 'serve'` (registry hook is dev-only) but intentionally NOT
+        // gated on `hmrActive`: the injected snippet self-guards on
+        // `typeof globalThis.__NS_HMR_REGISTER_COMPONENT__ === 'function'`, and
+        // gating the transform itself left `--no-hmr` users with an empty
+        // registry.
+        {
+            name: 'ns-component-hmr-register',
+            enforce: 'pre',
+            apply: 'serve',
+            transform(code, id) {
+                const cleanId = normalizeAngularWatchPath(id);
+                if (!isCandidateComponentTs(cleanId))
+                    return null;
+                const componentNames = findComponentClassNames(code);
+                if (componentNames.length === 0) {
+                    // Drop any stale entry from a previous transform
+                    // pass; the file may have lost its `@Component`
+                    // decorator across a rename/refactor.
+                    componentsByCleanId.delete(cleanId);
+                    return null;
+                }
+                componentsByCleanId.set(cleanId, componentNames);
+                if (verbose) {
+                    console.info(`[ns-hmr][ns-component-hmr-register] discovered ${componentNames.length} component(s) in ${cleanId} (${componentNames.join(', ')})`);
+                }
+                // Discovery only — never modify the raw TS source. Any
+                // modification here is discarded by the Analog Angular
+                // plugin downstream; the actual snippet append happens
+                // in `ns-component-hmr-register-post`.
+                return null;
+            },
         },
-    },
-    // Transform Angular partial declarations in node_modules to avoid runtime JIT
-    // Pass the project root so linker deps resolve from the app, not the plugin package.
-    angularLinkerVitePlugin(process.cwd()),
-    // Simplify: rely on Vite pre plugin (load/transform) for linking; Rollup safety net disabled unless re-enabled later
-    // angularRollupLinker(process.cwd()),
-    angular({
-        liveReload: false, // Disable live reload in favor of HMR
-        tsconfig: tsConfig,
-    }),
-    // Post-phase linker to catch any declarations introduced after other transforms (including project code)
-    angularLinkerVitePluginPost(process.cwd()),
-    // Enforce: fully disable dependency optimization during serve to avoid rxjs esm5 crawling and OOM
-    {
-        name: 'ns-disable-optimize-deps',
-        enforce: 'post',
-        apply: 'serve',
-        config(userConfig) {
-            const od = userConfig?.optimizeDeps || {};
-            const prevExclude = Array.isArray(od.exclude) ? od.exclude : [];
-            const exclude = new Set(prevExclude);
-            ['@nativescript/core', 'rxjs', '@valor/nativescript-websockets', 'set-value', 'react', 'react-reconciler', 'react-nativescript'].forEach((x) => exclude.add(x));
-            return {
-                optimizeDeps: {
-                    noDiscovery: true,
-                    entries: [],
-                    include: [],
-                    exclude: Array.from(exclude),
-                    rolldownOptions: {
-                        ...(od.rolldownOptions || {}),
-                        plugins: [],
-                    },
-                },
-            };
+        // Step 2: append the HMR registration snippet to the compiled output
+        // (post-Analog), keyed by the names recorded in step 1.
+        {
+            name: 'ns-component-hmr-register-post',
+            enforce: 'post',
+            apply: 'serve',
+            transform(code, id) {
+                const cleanId = normalizeAngularWatchPath(id);
+                if (!isCandidateComponentTs(cleanId))
+                    return null;
+                const componentNames = componentsByCleanId.get(cleanId);
+                if (!componentNames || componentNames.length === 0)
+                    return null;
+                // Idempotency: Vite may replay transforms on cached modules; the
+                // marker guards against double-injection.
+                if (code.includes(HMR_REGISTER_MARKER))
+                    return null;
+                const result = appendComponentHmrRegistration(code, componentNames);
+                if (!result.code)
+                    return null;
+                if (verbose) {
+                    console.info(`[ns-hmr][ns-component-hmr-register-post] appended registrations for ${result.componentNames.length} component(s) in ${cleanId} (${result.componentNames.join(', ')})`);
+                }
+                // map: null is fine for dev — the appended snippet sits after the
+                // original body, so upstream line mappings stay valid.
+                return { code: result.code, map: null };
+            },
+        },
+        // Allow external html template changes to trigger hot reload: Make .ts files depend on their .html templates
+        {
+            name: 'angular-template-deps',
+            enforce: 'pre',
+            transform(code, id) {
+                const componentPath = normalizeAngularWatchPath(id);
+                const componentKey = normalizeAngularWatchKey(id);
+                if (!componentKey.endsWith('.ts'))
+                    return null;
+                const assetPaths = extractComponentAssetPaths(code, componentPath);
+                trackComponentAssets(componentKey, assetPaths);
+                for (const assetPath of assetPaths) {
+                    this.addWatchFile(assetPath);
+                }
+                // First fence of the HTML→TS invalidation pipeline: no [tracking]
+                // log for a component means the watcher can never fire for it.
+                if (verbose) {
+                    console.info(`[ns-hmr][angular-template-deps] [tracking] componentKey=${componentKey} assets=${assetPaths.length} (${assetPaths.slice(0, 4).join(', ')})`);
+                }
+                return null;
+            },
+            watchChange(id) {
+                const changedPath = normalizeAngularWatchPath(id);
+                const components = new Set();
+                for (const assetKey of getAngularWatchKeys(changedPath)) {
+                    for (const componentPath of assetToComponents.get(assetKey) || []) {
+                        components.add(componentPath);
+                    }
+                }
+                if (components?.size) {
+                    for (const componentPath of components) {
+                        pendingComponentInvalidations.add(componentPath);
+                    }
+                    if (verbose) {
+                        console.info(`[ns-hmr][angular-template-deps] watchChange [via assetToComponents] changed=${changedPath} → invalidating ${components.size} component(s):`, Array.from(components));
+                    }
+                    return;
+                }
+                if (/\.(html|htm)$/i.test(changedPath)) {
+                    const componentPath = changedPath.replace(/\.(html|htm)$/i, '.ts');
+                    const exists = fs.existsSync(resolveAngularWatchFilePath(componentPath));
+                    if (exists) {
+                        const componentKey = normalizeAngularWatchKey(componentPath);
+                        pendingComponentInvalidations.add(componentKey);
+                        if (verbose) {
+                            console.info(`[ns-hmr][angular-template-deps] watchChange [via fallback .html→.ts] changed=${changedPath} componentKey=${componentKey}`);
+                        }
+                    }
+                    else {
+                        // Truly anomalous: a watched template/style asset has no companion
+                        // `.ts` file, so we cannot route the edit through the Angular
+                        // HMR pipeline. Always-on warning so it surfaces in non-verbose
+                        // runs — silent fallback would hide a real wiring break.
+                        console.warn(`[ns-hmr][angular-template-deps] watchChange [no companion .ts found] changed=${changedPath} expectedTs=${componentPath}`);
+                    }
+                }
+            },
+            shouldTransformCachedModule({ id }) {
+                const componentPath = normalizeAngularWatchKey(id);
+                if (!pendingComponentInvalidations.has(componentPath))
+                    return null;
+                pendingComponentInvalidations.delete(componentPath);
+                if (verbose) {
+                    console.info(`[ns-hmr][angular-template-deps] shouldTransformCachedModule → re-transform componentKey=${componentPath}`);
+                }
+                return true;
+            },
+        },
+        // Transform Angular partial declarations in node_modules to avoid runtime JIT
+        // Pass the project root so linker deps resolve from the app, not the plugin package.
+        angularLinkerVitePlugin(process.cwd()),
+        // A Rollup-phase linker safety net (angularRollupLinker) is additionally
+        // appended for HMR sessions — see `enableRollupLinker` below.
+        ...angular({
+            experimental: {
+                useAngularCompilationAPI: opts.useAngularCompilationAPI,
+            },
+            // `liveReload` enables Angular's web-style in-place template HMR:
+            //   1. `_enableHmr = true` on the TS compiler — each compiled component
+            //      `.mjs` emits `<ClassName>_HmrLoad` plus an
+            //      `import.meta.hot.on('angular:component-update', ...)` listener.
+            //   2. A `/@ng/component?c=<id>` middleware serving recompiled
+            //      `_UpdateMetadata` sources on demand.
+            //   3. `angular:component-update` broadcasts on `.html`/style edits so
+            //      the runtime calls `ɵɵreplaceMetadata` on the live class — views
+            //      recreate in-place with NO reboot and NO route navigation (the
+            //      reboot path via `__reboot_ng_modules__` remains for `.ts` edits).
+            //
+            // Load-bearing interactions:
+            //   - Analog's middleware matches `req.url.includes('/@ng/component')`
+            //     (substring), so the `/ns/m/`-prefixed device fetch still hits it.
+            //   - The device client (`hmr/client/protocol-dispatch.ts`) forwards
+            //     `{ type: 'custom', event, data }` to `import.meta.hot.on`
+            //     listeners and short-circuits before the reboot path for
+            //     `angular:component-update`.
+            //   - `hmr/server/websocket.ts` skips its own `ns:angular-update`
+            //     broadcast for `.html`/component-style edits to avoid double-fire.
+            //   - Rollback to reboot-only: set `NS_VITE_ANGULAR_LIVE_RELOAD=0`.
+            liveReload: hmrAngularLiveReload,
+            // NativeScript can't consume `externalRuntimeStyles` (runtime-loaded
+            // `<hash>.css` URLs need a browser CSSOM/`<link>` pipeline), so keep
+            // component styles inlined in the metadata's `styles: [...]` array.
+            // Independent of `liveReload` — template HMR stays on. The option is
+            // honored by our patched Analog plugin (upstream PR pending) and is a
+            // no-op on stock releases; not yet in the published `PluginOptions`.
+            // @ts-expect-error -- pending upstream Analog type publish
+            externalRuntimeStyles: false,
+            tsconfig: tsConfig,
+            // Forward Angular-style file replacements (e.g. `environment.ts`
+            // → `environment.stg.ts`) directly into the Analog plugin so the
+            // Angular TypeScript host (which reads source files via its own
+            // CompilerHost, bypassing Vite's load chain) sees the swap. This
+            // is the same hook Angular CLI uses for `fileReplacements` in
+            // `angular.json` build configurations.
+            fileReplacements: opts.fileReplacements ?? [],
+            // Component-HMR id alignment. Angular's compiler embeds each
+            // component's HMR id relative to the TS compilation's base path —
+            // in an Nx monorepo that's the WORKSPACE root (tsconfig.base.json's
+            // baseUrl), not the app dir. Analog uses `workspaceRoot` both to
+            // build the `angular:component-update` broadcast id
+            // (`relative(workspaceRoot, file)`) and to resolve `/@ng/component?c=`
+            // fetches back to absolute paths (`resolve(workspaceRoot, id)`).
+            // Defaulting to `process.cwd()` (the app dir) makes the broadcast id
+            // `src/...` while every compiled listener guards on
+            // `apps/<app>/src/...` — `d.id === id` never matches, so template
+            // edits dispatch cleanly but visually apply nothing. Default to the
+            // monorepo root when one exists so all three id producers agree;
+            // standalone apps (no monorepo root) keep the cwd behavior.
+            workspaceRoot: opts.workspaceRoot ?? getMonorepoWorkspaceRoot(process.cwd()) ?? process.cwd(),
+        }),
+        // Post-phase linker to catch any declarations introduced after other transforms (including project code)
+        angularLinkerVitePluginPost(process.cwd()),
+        // Re-inject `/* @vite-ignore */` onto Angular's HMR initializer dynamic
+        // imports. Angular emits `import(/* @vite-ignore */ i0.ɵɵgetReplaceMetadataURL(...))`,
+        // but the annotation gets stripped in the post-Angular pipeline
+        // (empirically the linker's `compact: false` Babel pass) — Vite's static
+        // analyzer then rewrites the call through its runtime resolver, which
+        // throws `TypeError at ɵɵgetReplaceMetadataURL` on the iOS device.
+        // `enforce: 'post'` sees the file after every comment-stripping
+        // transform; `apply: 'serve'` because the initializer is `ngDevMode`-
+        // gated and never runs in production. Idempotent.
+        {
+            name: 'ns-angular-hmr-vite-ignore',
+            enforce: 'post',
+            apply: 'serve',
+            transform(code, id) {
+                if (!hmrAngularLiveReload)
+                    return null;
+                const cleanId = normalizeAngularWatchPath(id);
+                if (!cleanId.endsWith('.ts') && !cleanId.endsWith('.mjs') && !cleanId.endsWith('.js'))
+                    return null;
+                if (cleanId.includes('/node_modules/'))
+                    return null;
+                const next = injectAngularHmrViteIgnore(code);
+                if (next === code)
+                    return null;
+                return { code: next, map: null };
+            },
         },
-        configResolved(resolved) {
-            const deps = (resolved.optimizeDeps || (resolved.optimizeDeps = {}));
-            deps.noDiscovery = true;
-            deps.entries = [];
-            deps.include = [];
-            const exclude = new Set(Array.isArray(deps.exclude) ? deps.exclude : []);
-            ['@nativescript/core', 'rxjs', '@valor/nativescript-websockets', 'set-value', 'react', 'react-reconciler', 'react-nativescript'].forEach((x) => exclude.add(x));
-            deps.exclude = Array.from(exclude);
-            const rolldownOptions = (deps.rolldownOptions || (deps.rolldownOptions = {}));
-            rolldownOptions.plugins = [];
+        // Enforce: fully disable dependency optimization during serve to avoid rxjs esm5 crawling and OOM
+        {
+            name: 'ns-disable-optimize-deps',
+            enforce: 'post',
+            apply: 'serve',
+            config(userConfig) {
+                const od = userConfig?.optimizeDeps || {};
+                const prevExclude = Array.isArray(od.exclude) ? od.exclude : [];
+                const exclude = new Set(prevExclude);
+                [...NS_OPTIMIZE_DEPS_EXCLUDE, 'rxjs'].forEach((x) => exclude.add(x));
+                return {
+                    optimizeDeps: {
+                        noDiscovery: true,
+                        entries: [],
+                        include: [],
+                        exclude: Array.from(exclude),
+                        rolldownOptions: {
+                            ...(od.rolldownOptions || {}),
+                            plugins: [],
+                        },
+                    },
+                };
+            },
+            configResolved(resolved) {
+                const resolvedConfig = resolved;
+                const deps = (resolvedConfig.optimizeDeps || (resolvedConfig.optimizeDeps = {}));
+                deps.noDiscovery = true;
+                deps.entries = [];
+                deps.include = [];
+                const exclude = new Set(Array.isArray(deps.exclude) ? deps.exclude : []);
+                [...NS_OPTIMIZE_DEPS_EXCLUDE, 'rxjs'].forEach((x) => exclude.add(x));
+                deps.exclude = Array.from(exclude);
+                const rolldownOptions = (deps.rolldownOptions || (deps.rolldownOptions = {}));
+                rolldownOptions.plugins = [];
+            },
         },
-    },
-];
-export const angularConfig = ({ mode }) => {
+    ];
+}
+export const angularConfig = ({ mode, fileReplacements, workspaceRoot, }) => {
+    const useSingleBundleDevOutput = mode === 'development' && !hmrActive;
+    const plugins = createAngularPlugins({
+        // Vite build --watch with the legacy Analog compilation path can regress
+        // Angular app sources from Ivy output back to decorator emit on rebuild.
+        // Restrict the newer compilation API to NativeScript's development no-HMR
+        // flow, which is where the unstable rebuilds occur today.
+        useAngularCompilationAPI: useSingleBundleDevOutput,
+        fileReplacements,
+        workspaceRoot,
+    });
+    // Angular browser animations are never used in NativeScript; the stub alias below is unconditional.
     const disableAnimations = true;
-    //process.env.NS_DISABLE_NG_ANIMATIONS === "1" ||
-    //process.env.NS_DISABLE_NG_ANIMATIONS === "true";
     // Post-link emitted chunks to catch any remaining partial declarations that slipped through
     // due to plugin order or external transforms.
+    const applyAngularChunkPostProcessing = (code, options = {}) => {
+        const codeWithInjectables = synthesizeMissingInjectableFactories(code, {
+            vendorInjectExport: options.vendorInjectExport,
+        });
+        const codeWithCtorParameters = synthesizeDecoratorCtorParameters(codeWithInjectables);
+        return inlineDecoratorComponentTemplates(codeWithCtorParameters, {
+            projectRoot: process.cwd(),
+        });
+    };
     const postLinker = {
         name: 'ns-angular-linker-post',
         apply: 'build',
         enforce: 'post',
         async generateBundle(_options, bundle) {
+            function isNsAngularPolyfillsModule(id) {
+                return normalizeAngularWatchPath(id).includes('node_modules/@nativescript/angular/fesm2022/nativescript-angular-polyfills.mjs');
+            }
             function isNsAngularPolyfillsChunk(chunk) {
                 if (!chunk || !chunk.modules)
                     return false;
-                return Object.keys(chunk.modules).some((m) => m.includes('node_modules/@nativescript/angular/fesm2022/nativescript-angular-polyfills.mjs'));
+                return Object.keys(chunk.modules).some(isNsAngularPolyfillsModule);
             }
-            const { babel, linkerPlugin } = await ensureSharedAngularLinker(process.cwd());
-            if (!babel || !linkerPlugin)
+            const { babel, createLinker } = await getAngularLinkerFactory(process.cwd());
+            if (!babel || !createLinker)
                 return;
             const strict = process.env.NS_STRICT_NG_LINK === '1' || process.env.NS_STRICT_NG_LINK === 'true';
             const enforceStrict = process.env.NS_STRICT_NG_LINK_ENFORCE === '1' || process.env.NS_STRICT_NG_LINK_ENFORCE === 'true';
             const debug = process.env.VITE_DEBUG_LOGS === '1' || process.env.VITE_DEBUG_LOGS === 'true';
             const unlinked = [];
+            const vendorInjectExport = (() => {
+                const vendorChunk = Object.entries(bundle).find(([name, value]) => value && value.type === 'chunk' && /(^|\/)vendor\.mjs$/.test(name));
+                const vendorCode = vendorChunk ? vendorChunk[1].code : undefined;
+                return vendorCode?.match(/\binject as ([A-Za-z_$][\w$]*)/)?.[1];
+            })();
             for (const [fileName, chunk] of Object.entries(bundle)) {
                 if (!fileName.endsWith('.mjs') && !fileName.endsWith('.js'))
                     continue;
@@ -222,44 +546,41 @@ export const angularConfig = ({ mode }) => {
                         continue;
                     const isNsPolyfills = isNsAngularPolyfillsChunk(chunk);
                     try {
-                        const res = await babel.transformAsync(code, {
-                            filename: fileName,
-                            configFile: false,
-                            babelrc: false,
-                            sourceMaps: false,
-                            compact: false,
-                            plugins: [linkerPlugin],
-                        });
-                        const finalCode = res?.code && res.code !== code ? res.code : code;
+                        // Fresh plugin per chunk — avoids stale linker state across watch-mode rebuilds.
+                        const linked = await runAngularLinker(code, { filename: fileName, projectRoot: process.cwd(), freshPlugin: true });
+                        const finalCode = applyAngularChunkPostProcessing(linked ?? code, { vendorInjectExport });
                         if (finalCode !== code) {
                             chunk.code = finalCode;
+                            recordLinkerHit('post');
                             if (debug) {
-                                try {
-                                    console.log('[ns-angular-linker][post] linked', fileName, isNsPolyfills ? '(polyfills)' : '');
-                                }
-                                catch { }
+                                console.log('[ns-angular-linker][post] linked', fileName, isNsPolyfills ? '(polyfills)' : '');
                             }
                         }
                         if (strict && !isNsPolyfills && containsRealNgDeclare(finalCode)) {
                             unlinked.push(fileName);
                         }
                     }
-                    catch {
+                    catch (e) {
+                        console.warn(`[ns-angular-linker][post] linking FAILED for ${fileName}:`, e?.message || e);
                         if (strict)
                             unlinked.push(fileName);
                     }
                 }
             }
+            // Evidence for pruning the stacked linker layers: print which of the
+            // five layers actually linked anything this build. A layer that
+            // reports 0 across the full flavor matrix is a candidate for removal.
+            reportLinkerLayerStats();
             if (strict && unlinked.length) {
                 const details = [];
                 for (const fname of unlinked) {
                     const chunk = bundle[fname];
                     const modIds = chunk?.modules
                         ? Object.keys(chunk.modules)
-                            .filter((m) => /node_modules\/(?:@angular|@nativescript\/angular)\//.test(m))
+                            .filter((m) => /node_modules\/(?:@angular|@nativescript\/angular)\//.test(normalizeAngularWatchPath(m)))
                             .slice(0, 8)
                         : [];
-                    const isOnlyPolyfills = modIds.length > 0 && modIds.every((m) => m.includes('node_modules/@nativescript/angular/fesm2022/nativescript-angular-polyfills.mjs'));
+                    const isOnlyPolyfills = modIds.length > 0 && modIds.every(isNsAngularPolyfillsModule);
                     if (isOnlyPolyfills)
                         continue;
                     let snippet = '';
@@ -282,89 +603,79 @@ export const angularConfig = ({ mode }) => {
                     throw new Error(message);
                 }
                 else {
-                    try {
-                        console.warn(`[ns-angular-linker-post] ${message}`);
-                    }
-                    catch { }
+                    console.warn(`[ns-angular-linker-post] ${message}`);
                 }
             }
         },
     };
-    // Safety net: transform each rendered chunk to link any remaining ɵɵngDeclare* call sites
+    // Safety net: transform each rendered chunk to link any remaining ɵɵngDeclare* call sites.
+    // IMPORTANT: create a FRESH linker plugin per invocation — the shared instance may have
+    // stale internal state from a prior build cycle, causing silent failures in watch-mode rebuilds.
     const renderChunkLinker = {
         name: 'ns-angular-linker-render',
         apply: 'build',
         enforce: 'post',
         async renderChunk(code, chunk) {
+            if (!code)
+                return null;
+            const filename = chunk.fileName || chunk.name || 'chunk.mjs';
+            const debug = process.env.VITE_DEBUG_LOGS === '1' || process.env.VITE_DEBUG_LOGS === 'true';
             try {
-                if (!code)
-                    return null;
-                if (!containsRealNgDeclare(code))
-                    return null;
-                const { babel, linkerPlugin } = await ensureSharedAngularLinker(process.cwd());
-                if (!babel || !linkerPlugin)
-                    return null;
-                const filename = chunk.fileName || chunk.name || 'chunk.mjs';
-                const debug = process.env.VITE_DEBUG_LOGS === '1' || process.env.VITE_DEBUG_LOGS === 'true';
-                const runLink = async (input) => {
-                    const result = await babel.transformAsync(input, {
-                        filename,
-                        configFile: false,
-                        babelrc: false,
-                        sourceMaps: false,
-                        compact: false,
-                        plugins: [linkerPlugin],
-                    });
-                    return result?.code ?? input;
-                };
-                let transformed = await runLink(code);
-                if (containsRealNgDeclare(transformed)) {
-                    transformed = await runLink(transformed);
+                let transformed = code;
+                if (containsRealNgDeclare(code)) {
+                    const { babel, createLinker } = await getAngularLinkerFactory(process.cwd());
+                    if (!babel || !createLinker)
+                        return null;
+                    // Fresh plugin per pass — avoids stale linker state across watch-mode rebuilds.
+                    transformed = (await runAngularLinker(code, { filename, projectRoot: process.cwd(), freshPlugin: true })) ?? code;
+                    if (containsRealNgDeclare(transformed)) {
+                        transformed = (await runAngularLinker(transformed, { filename, projectRoot: process.cwd(), freshPlugin: true })) ?? transformed;
+                    }
                 }
+                transformed = applyAngularChunkPostProcessing(transformed);
                 if (transformed !== code) {
+                    recordLinkerHit('render');
                     if (debug) {
-                        try {
-                            console.log('[ns-angular-linker][render] linked', filename);
-                        }
-                        catch { }
+                        console.log('[ns-angular-linker][render] linked', filename);
                     }
                     return { code: transformed, map: null };
                 }
             }
-            catch { }
+            catch (e) {
+                console.warn(`[ns-angular-linker][render] linking FAILED for ${filename}:`, e?.message || e);
+            }
             return null;
         },
     };
     const enableRollupLinker = process.env.NS_ENABLE_ROLLUP_LINKER === '1' || process.env.NS_ENABLE_ROLLUP_LINKER === 'true' || hmrActive;
-    return mergeConfig(baseConfig({ mode, flavor: 'angular' }), {
+    // Single merged alias array — a second `resolve` key from a conditional
+    // spread would silently clobber the fesm2022 and RxJS aliases.
+    const angularAliases = [
+        // Map Angular deep ESM paths to bare package ids
+        { find: /^@angular\/([^/]+)\/fesm2022\/.*\.mjs$/, replacement: '@angular/$1' },
+        { find: /^@nativescript\/angular\/fesm2022\/.*\.mjs$/, replacement: '@nativescript/angular' },
+        // RxJS esm5 → esm redirects removed: Vite 8 enforces the rxjs `exports` field,
+        // blocking deep path aliases. Instead, the `es2015` resolve condition is added
+        // below so rxjs resolves to its modern ESM builds via the exports map.
+    ];
+    if (disableAnimations) {
+        angularAliases.push({
+            find: /^@angular\/animations(\/.+)?$/, // match subpaths too
+            replacement: resolveRelativeToImportMeta(import.meta.url, '../shims/angular-animations-stub.js'),
+        }, {
+            find: /^@angular\/platform-browser\/animations(\/.+)?$/,
+            replacement: resolveRelativeToImportMeta(import.meta.url, '../shims/angular-animations-stub.js'),
+        });
+    }
+    const config = mergeConfig(baseConfig({ mode, flavor: 'angular' }), {
         plugins: [...plugins, ...(enableRollupLinker ? [angularRollupLinker(process.cwd())] : []), renderChunkLinker, postLinker],
-        // Always alias fesm2022 deep imports to package root so vendor bridge can externalize properly
         resolve: {
-            alias: [
-                // Map Angular deep ESM paths to bare package ids
-                { find: /^@angular\/([^/]+)\/fesm2022\/.*\.mjs$/, replacement: '@angular/$1' },
-                { find: /^@nativescript\/angular\/fesm2022\/.*\.mjs$/, replacement: '@nativescript/angular' },
-                // Prefer modern RxJS builds; avoid esm5 which explodes module count and memory
-                { find: /^rxjs\/dist\/esm5\/(.*)$/, replacement: 'rxjs/dist/esm2015/$1' },
-                { find: /^rxjs\/operators$/, replacement: 'rxjs/dist/esm2015/operators/index.js' },
-                { find: /^rxjs$/, replacement: 'rxjs/dist/esm2015/index.js' },
-                // Existing optional animations shims
-            ],
+            alias: angularAliases,
+            // Add 'es2015' condition so RxJS resolves to dist/esm (modern ESM) rather
+            // than dist/esm5 via the 'default' condition. This avoids the esm5 module
+            // explosion and OOM while respecting the package's exports field in Vite 8.
+            conditions: ['es2015'],
         },
-        ...(disableAnimations && {
-            resolve: {
-                alias: [
-                    {
-                        find: /^@angular\/animations(\/.+)?$/, // match subpaths too
-                        replacement: new URL('../shims/angular-animations-stub.js', import.meta.url).pathname,
-                    },
-                    {
-                        find: /^@angular\/platform-browser\/animations(\/.+)?$/,
-                        replacement: new URL('../shims/angular-animations-stub.js', import.meta.url).pathname,
-                    },
-                ],
-            },
-        }),
         // Disable dependency optimization entirely for NativeScript Angular HMR.
         // Vite 5.1+: use noDiscovery with an empty include list (disabled was removed).
         // The HTTP loader + vendor bridge manage dependencies; pre-bundling can OOM.
@@ -376,5 +687,19 @@ export const angularConfig = ({ mode }) => {
             rolldownOptions: { plugins: [] },
         },
     });
+    if (useSingleBundleDevOutput) {
+        const build = (config.build ?? (config.build = {}));
+        const rolldownOptions = (build.rolldownOptions ?? (build.rolldownOptions = {}));
+        const outputConfigs = Array.isArray(rolldownOptions.output) ? rolldownOptions.output : [rolldownOptions.output ?? {}];
+        for (const output of outputConfigs) {
+            // Angular non-HMR reloads are more reliable when rebuilds keep a single boot bundle.
+            // This avoids watch-time chunk alias/name drift that can leave the native app reloading into stale split points.
+            delete output.manualChunks;
+            delete output.chunkFileNames;
+            output.codeSplitting = false;
+        }
+        rolldownOptions.output = Array.isArray(rolldownOptions.output) ? outputConfigs : outputConfigs[0];
+    }
+    return config;
 };
 //# sourceMappingURL=angular.js.map