【问题标题】：Angular 4 ng build prod style SyntaxErrorAngular 4 ng 构建产品样式 SyntaxError
【发布时间】：2018-02-02 02:11:40
【问题描述】：

角度 4.3.3、角度 cli、MVC

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

但是当我为生产环境构建 -prod 时，编译成功我确实得到了所有 js 捆绑文件。

但在浏览器 (Chrome) 中出现错误：

未捕获的 SyntaxError：无效或意外令牌

在文件 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 包生成脚本---

【问题讨论】：

标签： css angular typescript angular-cli dev-to-production

【解决方案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 选项进行构建，您的输出文件都不会有任何哈希值。在 dev 中，它会将 styles.bundle.js 渲染为脚本，而在 prod 中，它将使用 styles.bundle.css 将其渲染为链接

【讨论】：