CODEWITHSUNDEEP
javaangulartypescriptng-build
Relm
Relm

Reputation: 8282

Angular 4 : How to build for production without losing resposive design meta tags.

I've tested this with a new project, nothing unique.

ng new debug-project

Then I added some tags in the head section that resulted in this.

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

After ng build --prod, the html is now looking like this, which can't be read by the browser. Notice the missing spaces in viewport meta tags values. width, initial-scale=1, become 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>

Is there something wrong with my setup? Something I need to install on the project maybe?

Upvotes: 3

Views: 836

Answers (3)

Jarrett Helton
Jarrett Helton

Reputation: 64

I would try following this thread: How to globally set the preserveWhitespaces option in Angular to false?

The issue, form what i can tell, is that building in aot removes whitespace by default. Not building in aot is not a good idea, in my honest opinion. It saves a lot of work on the client and speeds your SPA up.

Upvotes: 2

mur-tha
mur-tha

Reputation: 851

From the angular/cli documentation, it looks like the production build flag minifies all of the html files by default, including index.html https://github.com/angular/angular-cli/issues/1861. You can retain the formatting in the meta tags by wrapping them in an ignore tag as shown below: 

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

Upvotes: 7

user2841161
user2841161

Reputation: 1

Try using this command:

ng build -prod --no-aot

Upvotes: -2

Related Questions