Angular 4:如何构建生产而不会丢失resposive design meta标签.

Question

Angular 4:如何构建生产而不会丢失resposive design meta标签.

Rel*_*elm 3 java typescript angular ng-build

我用一个新项目对此进行了测试,没有什么独特的.

ng new debug-project

然后我在头部添加了一些标签,导致了这一点.

<!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>

Run Code Online (Sandbox Code Playgroud)

之后ng build --prod,html现在看起来像这样,浏览器无法读取.注意viewport元标记值中缺少的空格.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>

Run Code Online (Sandbox Code Playgroud)

我的设置有问题吗？我需要在项目上安装的东西可能吗？

Answer 1

小智 8

从angular/cli文档中,生成构建标志看起来像默认情况下缩小所有html文件,包括index.html https://github.com/angular/angular-cli/issues/1861.您可以通过将它们包装在ignore标记中来保留元标记中的格式,如下所示:

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，8 月前
查看次数：	364 次
最近记录：	7 年，8 月前