如何在Angular应用中显示noscript内容？解决index.html标签无效问题

你的问题根源在于Angular的渲染机制：当JavaScript启用时，Angular会接管<app-root>标签并替换其内部所有内容，但如果<noscript>放在<app-root>外部，可能会因为页面布局、全局样式或者Angular加载后的视觉层级问题导致无法正常显示。以下是两种可靠的实现方式：

方法一：将<noscript>嵌入<app-root>内部 #

这是最简单的方案，利用Angular的渲染特性：当JS禁用时，Angular不会启动，<app-root>内的内容会原封不动显示；当JS启用时，Angular会替换<app-root>内的所有内容，<noscript>会被自动移除。

<body>
    <app-root>
        <noscript>
            <div style="padding: 2rem; text-align: center; font-size: 1.2rem; background: #f8d7da; color: #721c24;">
                请启用JavaScript以使用本应用
            </div>
        </noscript>
    </app-root>
</body>

方法二：通过CSS+JS控制显示状态 #

如果需要更灵活的样式控制，可以用这种方式：通过JS给页面标记“已启用JS”的状态，再用CSS隐藏<noscript>；当JS禁用时，标记不会被添加，<noscript>自然显示。

1. 修改index.html：

<body>
    <noscript>
        <div style="padding: 2rem; text-align: center; font-size: 1.2rem; background: #f8d7da; color: #721c24;">
            请启用JavaScript以使用本应用
        </div>
    </noscript>
    <app-root></app-root>

    <script>
        // JS启用时给body添加类
        document.body.classList.add('js-active');
    </script>
</body>

2. 在全局样式文件（如styles.css）中添加规则：

.js-active noscript {
    display: none;
}

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