html - 无法在 URL 中加载带有子路径的 Angular 样式
问题描述
如果我的路由器移动到具有多个子目录的应用程序的一部分，我的应用程序在尝试加载提取的 CSS 样式时返回 404。
这是因为 Angular 构建<link rel="stylesheet" href="styles.css">在页面的最顶部注入了一个标签，但这不能考虑到<base href="/">我稍后在 index.html 页面中的内容。
例如，如果我有 path <domain>/account/，它会从 加载样式<domain>/styles.css，效果很好。where-as if the path is <domain>/account/profile，它会尝试加载<domain>/account/styles.css不存在的样式。
我找到了两种解决此问题的方法，这两种方法都不理想（而且一种最终不起作用）
在我将
<link rel="stylesheet" href="styles.css">base 定义为/. 但是，当它尝试通过注入的标签加载样式时，这会导致 404 仍然发生，尽管当样式文件在 prod 构建中散列时这不起作用。我可以设置
"extractCss": false哪个注入<script src="styles.js" defer=""></script>而不是将样式表标记添加到 html 文件。这解决了问题，但Option "extractCss" is deprecated: Deprecated since version 11.0. No longer required to disable CSS extraction for HMR.在构建时会生成警告。
我假设我在这里遗漏了一些非常明显的东西，这将允许提取的 CSS 标签正常工作，但我无法在许多人中找到正确的选项来完成这项工作。
这目前正在 Angular 12 中发生，但我只是用 Angular 10 应用程序尝试过，同样的问题也发生在那里。
谢谢