Angular-cli: Angular compiler option preserveWhitespaces: true does not work in >6.0.0 final

[criduvero]

Versions

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 6.0.1
Node: 8.11.1
OS: win32 x64
Angular: 6.0.1
... animations, cli, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.1
@angular-devkit/build-angular     0.6.1
@angular-devkit/build-optimizer   0.6.1
@angular-devkit/core              0.6.1
@angular-devkit/schematics        0.6.1
@ngtools/webpack                  6.0.1
@schematics/angular               0.6.1
@schematics/update                0.6.1
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.6.0

Repro steps

• Added "angularCompilerOptions": { "preserveWhitespaces": true } into tsconfig.json like https://angular.io/guide/aot-compiler#angular-compiler-options says
• Run ng serve, ng serve --aot, ng build, ng build --aot, ng build --prod --aot

Observed behavior

"preserveWhitespaces": true doesn't affect ng serve nor ng build

Desired behavior

ng serve and ng build should preserve whitespaces globally

Mention any other details that might be useful (optional)

I've modified my main.ts file for working on ng serve:

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

but production build still is not preserving white spaces globally

[clydin]

Production builds use AOT by default which compiles at build time which is why setting JIT mode options in code does not work for production.

TypeScript configuration extension only works with TypeScript's compilerOptions field. The preserveWhitespaces option must be placed in the directly referenced tsconfig file for the application (typically tsconfig.app.json within the application's src directory).

[criduvero]

How to put it in tsconfig.app.json?

[clydin]

The same way it was put into the root tsconfig. The file is just the tsconfig specifically for the app.

[criduvero]

I've edited my tsconfig.app.json and it worked for ng serve --aot, ng build --prod. What's the right way for put it working with "ng serve" (JIT?):

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

[danwulff]

@criduvero your original code snippet is the correct way to set preserveWhitespaces for JIT.

So to summarize:
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));

To be consistent between JIT and AOT, you must alter both files!

[criduvero]

@danwulff Thanks, Everything is clear for me now

[obtdap]

I still have the problem !!
I've put preserveWhitespaces: true in tsconfig.app.json, in tsconfig.json and in options of bootstrapModule but it don't works.
The only way I've found is to put preserveWhitespaces: true in all the components !!

Anyone has still the problem ?

Angular V.6.1.7

[Ramlz]

I still have the problem !!
I've put preserveWhitespaces: true in tsconfig.app.json, in tsconfig.json and in options of bootstrapModule but it don't works.
The only way I've found is to put preserveWhitespaces: true in all the components !!

Anyone has still the problem ?

Angular V.6.1.7

DId you put it in the angularCompilerOptions? Today Ive met the issue and after several attempts, Ive made it work. It started work after I put "angularCompilerOptions": {
"preserveWhitespaces": true,
} to both configs. ( We use aot build)

[obtdap]

I still have the problem !!
I've put preserveWhitespaces: true in tsconfig.app.json, in tsconfig.json and in options of bootstrapModule but it don't works.
The only way I've found is to put preserveWhitespaces: true in all the components !!
Anyone has still the problem ?
Angular V.6.1.7

DId you put it in the angularCompilerOptions? Today Ive met the issue and after several attempts, Ive made it work. It started work after I put "angularCompilerOptions": {
"preserveWhitespaces": true,
} to both configs. ( We use aot build)

Yes I tried but without success. It appaers that the problem is only in JIT mode, while it's compiled for buid (with AOT), don't have the problem...

[danwulff]

I still have the problem !!
I've put preserveWhitespaces: true in tsconfig.app.json, in tsconfig.json and in options of bootstrapModule but it don't works.
The only way I've found is to put preserveWhitespaces: true in all the components !!
Anyone has still the problem ?
Angular V.6.1.7

DId you put it in the angularCompilerOptions? Today Ive met the issue and after several attempts, Ive made it work. It started work after I put "angularCompilerOptions": {
"preserveWhitespaces": true,
} to both configs. ( We use aot build)

Yes I tried but without success. It appaers that the problem is only in JIT mode, while it's compiled for buid (with AOT), don't have the problem...

@obtdap See my comment above for JIT mode: https://github.com/angular/angular-cli/issues/10859#issuecomment-390808375

[obtdap]

I still have the problem !!
I've put preserveWhitespaces: true in tsconfig.app.json, in tsconfig.json and in options of bootstrapModule but it don't works.
The only way I've found is to put preserveWhitespaces: true in all the components !!
Anyone has still the problem ?
Angular V.6.1.7

DId you put it in the angularCompilerOptions? Today Ive met the issue and after several attempts, Ive made it work. It started work after I put "angularCompilerOptions": {
"preserveWhitespaces": true,
} to both configs. ( We use aot build)

Yes I tried but without success. It appaers that the problem is only in JIT mode, while it's compiled for buid (with AOT), don't have the problem...

@obtdap See my comment above for JIT mode: #10859 (comment)

Yes I have... :(

[danwulff]

@obtdap See my comment above for JIT mode: #10859 (comment)

Yes I have... :(

@obtdap shoot, that sucks.

Since you're still having issues after altering both main.ts and tsconfig.app.json I suggest creating a minimal repo and opening a new issue (this one is closed).

[whyboris]

Confirming solution by @danwulff - https://github.com/angular/angular-cli/issues/10859#issuecomment-390808375
preserveWhitespaces: true will need to be in tsconfig.json as well as in main.ts

[RickStrahl]

Little late to this party. I set both main.ts and tsconfig.json settings but I only see preserveWhitespaces working in dev mode, not in the production build.

CLI 8.0 rc2

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}