Angular 4:如何在不丢失响应式设计元标记的情况下构建生产。
Posted
技术标签:
【中文标题】Angular 4:如何在不丢失响应式设计元标记的情况下构建生产。【英文标题】:Angular 4 : How to build for production without losing resposive design meta tags. 【发布时间】:2018-08-30 03:01:39 【问题描述】:我已经用一个新项目对此进行了测试,没有什么独特之处。
ng new debug-project
然后我在 head 部分添加了一些标签,导致了这个。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DebugProject</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta name="viewport" content="width=device-width; initial-scale=1; minimum-scale=1; maximum-scale=1; user-scalable=0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
ng build --prod
之后的html现在是这样的,浏览器无法读取。请注意视口元标记值中缺少的空格。 width, initial-scale=1
,变成width,initial-scale=1
。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DebugProject</title>
<base href="/">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="viewport" content="user-scalable=no,width=device-width" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta name="viewport" content="width=device-width;initial-scale=1;minimum-scale=1;maximum-scale=1;user-scalable=0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="styles.ac89bfdd6de82636b768.bundle.css" rel="stylesheet" />
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.318b50c57b4eba3d437b.bundle.js"></script>
<script type="text/javascript" src="polyfills.bf95165a1d5098766b92.bundle.js"></script>
<script type="text/javascript" src="main.8df9530e9d55fa951861.bundle.js"></script>
</body>
</html>
我的设置有问题吗?也许我需要在项目上安装一些东西?
【问题讨论】:
这是功能问题还是只是您注意到的问题? productionbuild
对您的代码执行缩小,以删除多余的空格、cmets 和可选标记。?浏览器的控制台显示什么?
您使用哪个服务器来提供来自dist
的生成包?
@Phix,是的,这是一个问题,正如我所说,浏览器需要读取这些标签才能正确显示页面,而当它们喜欢时它无法读取它们。
@Vikas 在控制台中什么都没有。
【参考方案1】:
我会尝试关注这个帖子:How to globally set the preserveWhitespaces option in Angular to false?
据我所知,问题是在 aot 中构建默认会删除空格。老实说,不构建 aot 并不是一个好主意。它节省了客户端的大量工作并加快了您的 SPA。
【讨论】:
【参考方案2】:从 angular/cli 文档看来,生产构建标志默认会缩小所有 html 文件,包括 index.html https://github.com/angular/angular-cli/issues/1861。您可以通过将元标记包装在忽略标记中来保留元标记中的格式,如下所示:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>DebugProject</title>
<base href="/">
<!-- htmlmin:ignore -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta name="viewport" content="width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
<meta name="viewport" content="width=device-width; initial-scale=1; minimum-scale=1; maximum-scale=1; user-scalable=0">
<!-- htmlmin:ignore -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
【讨论】:
好的,这似乎值得一试,将检查并报告。【参考方案3】:尝试使用此命令:
ng build -prod --no-aot
【讨论】:
虽然此代码可以回答问题,但提供有关 如何 和 为什么 解决问题的附加上下文将提高答案的长期价值。 不,这是个糟糕的主意。以上是关于Angular 4:如何在不丢失响应式设计元标记的情况下构建生产。的主要内容,如果未能解决你的问题,请参考以下文章