Empty comments in Angular app

Is there any config option that removes these empty comments and spaces?

enter image description here

My build command ng build --environment prod --progress false --target production

, and tsconfig:

{
    "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.

+3


source to share


3 answers


you just can't!



Angular needs these comments to keep track of a lot of things like rendering content *ngIf

so short short comments need to be in your HTML or Angular just won't work.

+1


source


This is generated based on your Angular directive, tag, conditions (if, for ...), so white space is required . If you remove this then it will not behave well, all double-sided bindings are gone. This space defines how your angular DOM will render and bind to model and variables. Also the comment keeps track of where the new DOM element will be displayed (if conditions and others).



For more information see this link: https://github.com/angular/angular.js/issues/8722

+1


source


Each of these comments is ViewContainerRef

one that Angular uses to save room for an expression that the view could render.

if you have ngIf

, if expression evaluates to false, it is obvious that Angular will not render the element, but once it becomes true it will render the element since it knows where to put It?

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

      

Of course there are other expressions and template bindings in the view, but this ngIf

is the easiest to understand

That's where these comments come from.

+1


source







All Articles