Angular 4: Как создавать для производства без потери метатегов адаптивного дизайна.

Я проверил это с новым проектом, ничего уникального.

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>

После 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>

Что-то не так с моей настройкой? Что-то, что мне нужно установить в проекте, может быть?


typescript java angular ng-build
person Relm    schedule 21.03.2018    source источник
comment
Это представляет собой функциональную проблему или это просто то, что вы заметили?   -  person Phix    schedule 21.03.2018
comment
production build выполняет минимизацию вашего кода, удаляя лишние пробелы, комментарии и необязательные токены.? что показывает консоль браузера?   -  person Vikas    schedule 21.03.2018
comment
какой сервер вы используете для обслуживания сгенерированных пакетов из dist?   -  person Vikas    schedule 21.03.2018
comment
@Phix, да, это проблема, как я уже сказал, браузер должен читать эти теги для правильного отображения страниц, он не может их читать, пока им это нравится.   -  person Relm    schedule 21.03.2018
comment
@Vikas ничего в консоли.   -  person Relm    schedule 21.03.2018
comment
@Vikas Я использовал http-сервер, live-сервер и рабочий сервер --› Google. И это не вопрос обслуживания. Файл просто поврежден, вот где мы находимся.   -  person Relm    schedule 21.03.2018
comment
Значит, проблема возникла из-за минификации в производственной сборке? ng serve работает нормально?   -  person Vikas    schedule 21.03.2018
comment
ng serve, ng build, работают напильником, но не ng build --prod   -  person Relm    schedule 21.03.2018
comment
С чего вы взяли, что отсутствие места может вызвать проблему?   -  person David    schedule 21.03.2018
comment
@David Вы запустили два HTML-блока в мобильном браузере, чтобы увидеть разницу? Может быть, вам стоит попробовать это.   -  person Relm    schedule 21.03.2018
comment
Да и работает нормально. Удачи   -  person David    schedule 21.03.2018
comment
Глядя на это снова, у вас есть 4 тега области просмотра. Вам нужен только один со значениями, разделенными запятыми.   -  person Phix    schedule 21.03.2018
comment
@Phix прав, вы должны использовать только одну запись viewport и не ожидать, что браузер все смешает. Попробуйте использовать одну запись в окне просмотра и посмотрите, поможет ли это.   -  person Tarun Lalwani    schedule 24.03.2018
comment
Если вы хотите это для целей SEO, я бы порекомендовал вам сделать рендеринг на стороне сервера. angular.io/guide/universal   -  person Gagan Prajapati    schedule 29.03.2018

Ответы (3)


arrow_upward
7
arrow_downward

Из документации 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>
person mur-tha    schedule 26.03.2018
comment
Хорошо, кажется, стоит попробовать, проверим и сообщим. - person Relm; 27.03.2018

arrow_upward
2
arrow_downward

Я бы попробовал следовать этой теме: Как глобально установить для параметра saveWhitespaces в Angular значение false?

Проблема, насколько я могу судить, заключается в том, что сборка aot по умолчанию удаляет пробелы. По моему честному мнению, не строить вокруг — плохая идея. Это экономит много работы на клиенте и ускоряет работу вашего SPA.

person Jarrett Helton    schedule 26.03.2018

arrow_upward
-2
arrow_downward

Попробуйте использовать эту команду:

ng build -prod --no-aot
person user2841161    schedule 26.03.2018
comment
Хотя этот код может дать ответ на вопрос, предоставление дополнительного контекста относительно того, как и почему он решает проблему, улучшит долгосрочную ценность ответа. - person Alexander; 26.03.2018
comment
НЕТ, это ужасная идея. - person Relm; 27.03.2018