Angular 4 --prod构建移除meta标签空格致移动端视图异常

这个问题我之前也碰到过，本质是Angular在生产构建时的HTML压缩优化把逗号后的空格当成冗余内容给移除了。下面给你几个靠谱的解决方案，按推荐程度排序：

方案1：用HTML空格实体替代普通空格 #

直接在index.html的viewport标签里，把逗号后面的普通空格换成HTML空格实体 ，这样压缩工具会把它识别为有意义的内容而保留下来：

<meta name="viewport" content="user-scalable=no,&#32;width=device-width" />

这个方法最简单，不需要改代码或者配置，直接修改index.html就行。

方案2：通过Angular Meta服务动态添加viewport标签 #

如果不想用实体字符，也可以用Angular内置的Meta服务来动态插入viewport标签，这样构建过程不会对动态生成的标签做空格压缩：

1. 在app.component.ts里导入Meta服务：

import { Component, OnInit } from '@angular/core';
import { Meta } from '@angular/platform-browser';

2. 注入Meta服务并在初始化时添加标签：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private meta: Meta) {}

  ngOnInit(): void {
    this.meta.addTag({
      name: 'viewport',
      content: 'user-scalable=no, width=device-width'
    });
  }
}

记得把index.html里原来的viewport标签删掉，避免页面出现重复的标签。

方案3：调整Angular构建的HTML压缩配置（不推荐） #

如果上面两种方法都不适用，可以尝试修改Angular的生产构建配置，关闭HTML的空格折叠优化，但这样会让整个项目的HTML体积变大，所以只作为备选：
打开angular.json，找到projects -> 你的项目名 -> architect -> build -> configurations -> production -> optimization，修改html的minifyOptions：

"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": true
  },
  "fonts": true,
  "html": {
    "minify": true,
    "minifyOptions": {
      "collapseWhitespace": false,
      "removeRedundantAttributes": true,
      "useShortDoctype": true,
      "removeEmptyAttributes": true,
      "removeStyleLinkTypeAttributes": true,
      "keepClosingSlash": true,
      "minifyJS": true,
      "minifyCSS": true,
      "removeComments": true
    }
  }
}

测试下来，前两种方法都能完美保留逗号后的空格，解决移动端浏览器缩放异常的问题。

内容的提问来源于stack exchange，提问作者Relm