Angular 4 ng 构建产品样式 SyntaxError

Question

角度 4.3.3，angular 客户端，MVC

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

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

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

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

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

在我的tsconfig.json中，目标："es5"。

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

请帮我解决这个问题。

编辑：

我在开发中 html 样式标签如下所示：

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

但在产品中 html 的样式如下：

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

如果我将 prod 样式标签更改为 link 而不是脚本样式，则效果很好。

---我从 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

将其渲染为 link

Angular 4 ng 构建产品样式 SyntaxError

Angular 4 ng build prod style SyntaxError

css

angular

typescript

angular-cli

dev-to-production

编辑：