Angular 4 ng 构建产品样式 SyntaxError

Angular 4 ng build prod style SyntaxError

角度 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 包生成脚本---

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

在您的捆绑包配置中:

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