如何将落地页从Angular2应用剥离到index.html，同路由适配多端不同SPA如Gmail

方案1：动态加载Angular bundle，首屏直接渲染静态落地页 #

核心原理 #

Angular启动前，<app-root>标签内部的内容会直接作为静态内容渲染，不会被覆盖，我们可以直接把落地页的所有HTML、内联CSS、内联JS写到<app-root>内部，首屏完全不需要加载Angular的JS包，LCP只由静态内容决定。首次点击站内链接时再动态加载Angular的JS bundle，加载完成后Angular会自动替换<app-root>内容并接管路由。

具体实现 #

改造index.html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 直接内联落地页的所有CSS，避免额外请求影响LCP -->
    <style>
        /* 这里放你落地页的所有CSS代码 */
        .landing-page { /* 示例样式 */ }
    </style>
</head>
<body>
    <app-root>
        <!-- 这里直接写你落地页的全部HTML内容 -->
        <div class="landing-page">
            <h1>落地页标题</h1>
            <p>落地页内容</p>
            <a href="/about">关于我们</a>
            <a href="/list">商品列表</a>
            <a href="https://xxx.com" target="_blank">外部链接</a>
        </div>
        <!-- 落地页需要的JS直接内联在这里 -->
        <script>
            // 这里放落地页本身需要的交互JS代码
        </script>
    </app-root>

    <script>
        // 标记Angular是否已经加载
        let angularLoaded = false;
        // 你的Angular构建输出的JS bundle路径，注意按你实际的文件名替换，包括polyfills、main等
        const angularBundles = [
            '/polyfills.<hash>.js',
            '/main.<hash>.js'
        ];

        // 动态加载JS脚本的工具函数
        function loadScript(src) {
            return new Promise((resolve, reject) => {
                const script = document.createElement('script');
                script.src = src;
                script.onload = resolve;
                script.onerror = reject;
                document.body.appendChild(script);
            });
        }

        // 监听所有点击事件
        document.addEventListener('click', async (e) => {
            const link = e.target.closest('a');
            if (!link) return;

            // 外部链接、新窗口打开的链接直接跳过
            const isInternal = new URL(link.href).origin === window.location.origin;
            const isNewTab = link.target === '_blank' || e.ctrlKey || e.metaKey;
            if (!isInternal || isNewTab || angularLoaded) return;

            // 阻止默认跳转
            e.preventDefault();
            const targetPath = new URL(link.href).pathname;

            // 加载所有Angular bundle
            angularLoaded = true;
            for (const bundle of angularBundles) {
                await loadScript(bundle);
            }

            // Angular启动完成后跳转到目标路由
            setTimeout(() => {
                window.history.pushState({}, '', targetPath);
            }, 0);
        }, { capture: true });
    </script>
</body>
</html>

Angular侧适配

• 你的原有路由配置不需要修改，保持正常的路由规则即可，Angular启动后会自动匹配当前路径对应的路由组件
• 如果是生产环境构建，注意每次构建后更新angularBundles数组里的bundle文件名，可通过Angular构建钩子自动替换无需手动修改

优化点 #

可以给Angular的bundle添加prefetch，浏览器会在空闲时间自动加载，不影响首屏性能，用户点击时可以秒开：

<link rel="prefetch" href="/polyfills.<hash>.js">
<link rel="prefetch" href="/main.<hash>.js">

方案2：双应用托管模式（你提到的Gmail式方案） #

实现逻辑 #

• 单独开发纯静态落地页，托管在根路径/
• Angular应用全部部署在二级路径下，比如/app/*，需要在Angular构建时添加base href配置：ng build --base-href /app/
• 落地页所有站内链接都指向/app/开头的路径，用户点击后会跳转进入Angular应用

优缺点 #

• 优点：实现简单，静态页和Angular应用完全解耦，不需要修改Angular侧逻辑
• 缺点：点击链接会有一次整页刷新，体验不如方案1流畅

内容的提问来源于stack exchange，提问作者Daksh Sharma