How to globally set the preserveWhitespaces option in Angular to false?

Since one of the beta releases of version 5, Angular has a new compiler option, preserveWhitespaces. The property is mentioned in CompilerOptions type alias in the docs. The docs for the Component decorator describe its usage, and mention that the default in version 5 is true (no whitespace removal).

I've seen the PR, but from what I can tell from some tests is that the only way to use it is to supply preserveWhitespace to every @Component metadata. How can I set it to false globally, for all components, and then set it to true only for some components?

This will be false by default starting with angular 6

• https://github.com/angular/angular/issues/22027

For now, in JIT mode we can set it as part of CompileOptions:

main.ts

platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: false });

For aot we have to add this option to

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "es2015",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

[email protected] example where you can find the corresponding commit

There is also feature request in angular-cli repo.

In order to set angular compiler options in AOT compile (ng serve --aot, ng build --prod) you must alter the tsconfig.app.json to include:

"angularCompilerOptions": {
  "preserveWhitespaces": true
},

In order to set angular compiler options in JIT compile (ng serve) you must alter main.ts specifically the bootstrapModule call:

platformBrowserDynamic().bootstrapModule(AppModule, {
  preserveWhitespaces: true
})
.catch(err => console.log(err));