Whitespace Handling in Angular 6

Since Angular 6.0.0-beta.6 the white space optimization option is activated by default.

White spaces can be removed from HTML with the new property on component level by setting the property preserveWhitespaces to false. This feature was introduced with Angular 5.x and with Angular 6 it should be activated by default. 

However, the developer can opt-out from this feature. Most of the time removing white spaces is a safe operation, but it can also destroy our layout. If so, you have to set the property preserveWhitespaces to false.

You can either set it directly in your component:

@Component({ 
   selector: 'app-employee-list', 
   templateUrl: './employee-list.component.html', 
   styleUrls: ['./employee-list.component.css'], 
   preserveWhitespaces: false 
}) 
export class EmployeeListComponent { 
}

or out-out globally by setting the flag preserveWhitespaces in your tsconfig.json. If you using the Angular CLI you have to set the flag in your tsconfig.app.json and not to your tsconfig.json.

[…] 
"angularCompilerOptions": { 
  "preserveWhitespaces": false 
} 
[…]

Additionally you can protect a section within your html template by adding the attribute ngPreserveWhitespaces to a tag.

With only these setting you can reduce your size for the javascript bundle by several percentage. My demo application was reduced by 8%.