css - Angular 4 ng构建产品样式SyntaxError

Question

Angular 4.3.3， Angular cli，MVC

当我在我的开发环境中使用 ng build 编译我的代码时，一切正常，我可以看到样式。

但是当我为生产环境执行 ng build -prod 时，编译成功，我确实获得了所有 js 包文件。

但是在浏览器(Chrome)中我得到一个错误:

未捕获的语法错误:无效或意外的标记

在文件 styles.14098r3...bundle.css

在我的 tsconfig.json 中，目标:“es5”。

为什么在我的开发环境中一切正常，但在我的产品中风格却不起作用？

请帮我解决这个问题。

编辑:

我在开发中，样式的 html 标签如下所示:

<script src="/dist/styles.bundle.js"></script>

但在 prod html 中的样式如下:

<script src="/dist/styles.149025e8452.bundle.css">

如果我将 prod 样式标签更改为链接而不是脚本，样式工作正常。

---我从 mvc 包生成脚本---

Answer 1

我遇到了同样的问题。这是我最终做的:

在你的包配置中:

bundles.Add(new ScriptBundle("~/bundles/angular-components")
                .Include("~/Client/app/dist/inline.bundle.js")
                .Include("~/Client/app/dist/polyfills.bundle.js")
                .Include("~/Client/app/dist/styles.bundle.js")
                .Include("~/Client/app/dist/vendor.bundle.js")
                .Include("~/Client/app/dist/main.bundle.js")
                .IncludeDirectory("~/Client/app/dist/", "*.js.map", false));


bundles.Add(new StyleBundle("~/bundles/angular-components-style").Include(
                "~/Client/app/dist/styles.bundle.css")
            );

在您的布局中，您同时导入样式和脚本包:

@Styles.Render("~/bundles/angular-components-style")
@Scripts.Render("~/bundles/angular-components")

当您构建 Angular 应用程序时，请使用无哈希选项:

ng build --prod --watch -oh none

这样，无论您使用或不使用 --prod 选项进行构建，您的输出文件都不会包含任何哈希值。在开发环境中，它会将 styles.bundle.js 呈现为脚本，而在生产环境中构建时，它会使用 styles.bundle.css> 将其呈现为链接/p>