Empty comments in Angular application

Question

Is there any configuration setting which would remove these empty comments and whitespace?

My build command is ng build --environment prod --progress false --target production and tsconfig is:

{
    "compileOnSave": false,
    "compilerOptions": {
        "alwaysStrict": true,
        "baseUrl": "/",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "forceConsistentCasingInFileNames": true,
        "lib": [ "es2015", "dom" ],
        "module": "es2015",
        "moduleResolution": "node",
        "newLine": "CRLF",
        "noFallthroughCasesInSwitch": true,
        "noImplicitAny": true,
        "noImplicitReturns": true,
        "noUnusedLocals": true,
        "noUnusedParameters": false,
        "outDir": "./dist/out-tsc",
        "removeComments": true,
        "skipDefaultLibCheck": true,
        "skipLibCheck": true,
        "strictNullChecks": true,
        "target": "es5",
        "typeRoots": [ "./node_modules/@types" ]
    }
}

@angular/cli: 1.0.4
node: 7.2.1
os: win32 x64
@angular/common: 4.1.3

Thank you.

Answer 1

This is generated based on your Angular directive, tag, conditions(if,for...), so this blank space is required. If you remove that then it will not behave well all two way bindings will gone away. Those space determine how your angular DOM will render and bind to Model and variables. Also the comment keep track where new DOM element will render(if conditions and other).

Refer this link for more information: https://github.com/angular/angular.js/issues/8722

Answer 2

Every one of those comments is a ViewContainerRef that Angular uses to keep the spot for an expression that could render a view.

when you have an ngIf, if the expression is evaluated as false, obviously Angular wont render the element, but as soon as it becomes true, it will render the element, so how does it know where to put it ?

   <div *ngIf="expression"></div>

Of course other expression evaluation and view template bindings are there, but ngIf is the easiest one to understand

That's where those comments come from.

Answer 3

you simply can't!

Angular needs these comments to keep track of many things like where to render the *ngIf content so long story short comments need to be in your HTML or Angular simply will not work.