Issue 1:
A little suggestion about generate smaller *.chunk.js

I run command ng build -aot, and then generate some *.chunk.js file in dist folder.

I open a file '0.b7bbe93ad30bd6c6f312.chunk.js, this file size is about 474kb, I search by matching text "this.renderer.createText" in file, there are 432 matches, I can also see other long variable name or method name. Can we generate a short name for them. or we create convenient method for them.

transform "this.renderer.createText" to "this.r.c", this can save (7 + 9) * 432 = 6912 character
transform "this._text_..." to "this.txt...", this can save 3 * 909 = 2727 character
transform "this._anchor_..." to "this.ac..." this can save 6 * 228 character
and etc...

like this

[ ] feature request

Current behavior

Generate big *.chunk.js file with webpack tools.

Expected behavior

Generate more smaller *.chunk.js.

What is the motivation / use case for changing the behavior?

Make more smaller *.chunk.js for mobile application.

Angular version: 2.2.3

Browser: [Chrome]

Language: [TypeScript 2 ]

Node (for AoT issues): node --version = 7.0

Issue 2:
I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting

[x] feature request

[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

I have a component:

sandbox.component.ts

import { Component, OnInit } from '@angular/core';
import { PhonesService, Phone } from '../services/phones.service';

@Component({
templateUrl: 'sandbox.component.html'
})
export class SandboxComponent implements OnInit {

phones: Phone[] = [];

constructor(private phSrv: PhonesService) {
}

ngOnInit() {

this.phones = this.phSrv.GetPhones();
}
}

sandbox.component.html

<div class="panel panel-default">
<div class="panel-heading">Sandbox for testing any</div>
<div class="panel-body">
<h4>List of phones</h4>
<table class="table table-bordered table-hover">
<thead>
<tr>
<th>#</th>
<th>Brand</th>
<th>Model</th>
<th>OS</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let phone of phones">
<td>{{phone.id}}</td>
<td>{{phone.brand}}</td>
<td>{{phone.model}}</td>
<td>{{phone.os}}</td>
</tr>
</tbody>
</table>
</div>
</div>

tsconfig-aot.js

{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"lib": [
"es2015",
"dom"
]
},
"files": [
"angular2App/app/app.module.ts",
"angular2App/main-aot.ts"
],
"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit": true
},
"compileOnSave": false,
"buildOnSave": false
}

do 'npm run ngc'

and go aot\app\sandbox folder

sandbox.component.ngfactory.js = 15614 bytes

var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
import * as import0 from '../../../../angular2App/app/sandbox/sandbox.component';
import * as import1 from '@angular/core/src/linker/view';
import * as import3 from '@angular/core/src/linker/view_utils';
import * as import4 from '@angular/core/src/metadata/view';
import * as import5 from '@angular/core/src/linker/view_type';
import * as import6 from '@angular/core/src/change_detection/constants';
import * as import7 from '@angular/core/src/linker/component_factory';
import * as import8 from '../../../../angular2App/app/services/phones.service';
import * as import9 from '@angular/core/src/linker/view_container';
import * as import10 from '../../../node_modules/@angular/common/src/directives/ng_for.ngfactory';
import * as import11 from '@angular/core/src/linker/template_ref';
import * as import12 from '@angular/core/src/change_detection/differs/iterable_differs';
import * as import13 from '@angular/common/src/directives/ng_for';
import * as import14 from '@angular/core/src/change_detection/change_detection_util';
export var Wrapper_SandboxComponent = (function () {
function Wrapper_SandboxComponent(p0) {
this._changed = false;
this.context = new import0.SandboxComponent(p0);
}
Wrapper_SandboxComponent.prototype.ngOnDetach = function (view, componentView, el) {
};
Wrapper_SandboxComponent.prototype.ngOnDestroy = function () {
};
Wrapper_SandboxComponent.prototype.ngDoCheck = function (view, el, throwOnChange) {
var changed = this._changed;
this._changed = false;
if (!throwOnChange) {
if ((view.numberOfChecks === 0)) {
this.context.ngOnInit();
}
}
return changed;
};
Wrapper_SandboxComponent.prototype.checkHost = function (view, componentView, el, throwOnChange) {
};
Wrapper_SandboxComponent.prototype.handleEvent = function (eventName, $event) {
var result = true;
return result;
};
Wrapper_SandboxComponent.prototype.subscribe = function (view, _eventHandler) {
this._eventHandler = _eventHandler;
};
return Wrapper_SandboxComponent;
}());
var renderType_SandboxComponent_Host = import3.createRenderComponentType('', 0, import4.ViewEncapsulation.None, [], {});
var View_SandboxComponent_Host0 = (function (_super) {
__extends(View_SandboxComponent_Host0, _super);
function View_SandboxComponent_Host0(viewUtils, parentView, parentIndex, parentElement) {
_super.call(this, View_SandboxComponent_Host0, renderType_SandboxComponent_Host, import5.ViewType.HOST, viewUtils, parentView, parentIndex, parentElement, import6.ChangeDetectorStatus.CheckAlways);
}
View_SandboxComponent_Host0.prototype.createInternal = function (rootSelector) {
this._el_0 = import3.selectOrCreateRenderHostElement(this.renderer, 'ng-component', import3.EMPTY_INLINE_ARRAY, rootSelector, null);
this.compView_0 = new View_SandboxComponent0(this.viewUtils, this, 0, this._el_0);
this._SandboxComponent_0_3 = new Wrapper_SandboxComponent(this.injectorGet(import8.PhonesService, this.parentIndex));
this.compView_0.create(this._SandboxComponent_0_3.context);
this.init(this._el_0, (this.renderer.directRenderer ? null : [this._el_0]), null);
return new import7.ComponentRef_(0, this, this._el_0, this._SandboxComponent_0_3.context);
};
View_SandboxComponent_Host0.prototype.injectorGetInternal = function (token, requestNodeIndex, notFoundResult) {
if (((token === import0.SandboxComponent) && (0 === requestNodeIndex))) {
return this._SandboxComponent_0_3.context;
}
return notFoundResult;
};
View_SandboxComponent_Host0.prototype.detectChangesInternal = function (throwOnChange) {
this._SandboxComponent_0_3.ngDoCheck(this, this._el_0, throwOnChange);
this.compView_0.detectChanges(throwOnChange);
};
View_SandboxComponent_Host0.prototype.destroyInternal = function () {
this.compView_0.destroy();
};
View_SandboxComponent_Host0.prototype.visitRootNodesInternal = function (cb, ctx) {
cb(this._el_0, ctx);
};
return View_SandboxComponent_Host0;
}(import1.AppView));
export var SandboxComponentNgFactory = new import7.ComponentFactory('ng-component', View_SandboxComponent_Host0, import0.SandboxComponent);
var styles_SandboxComponent = [];
var renderType_SandboxComponent = import3.createRenderComponentType('', 0, import4.ViewEncapsulation.None, styles_SandboxComponent, {});
export var View_SandboxComponent0 = (function (_super) {
__extends(View_SandboxComponent0, _super);
function View_SandboxComponent0(viewUtils, parentView, parentIndex, parentElement) {
_super.call(this, View_SandboxComponent0, renderType_SandboxComponent, import5.ViewType.COMPONENT, viewUtils, parentView, parentIndex, parentElement, import6.ChangeDetectorStatus.CheckAlways);
}
View_SandboxComponent0.prototype.createInternal = function (rootSelector) {
var parentRenderNode = this.renderer.createViewRoot(this.parentElement);
this._el_0 = import3.createRenderElement(this.renderer, parentRenderNode, 'div', new import3.InlineArray2(2, 'class', 'panel panel-default'), null);
this._text_1 = this.renderer.createText(this._el_0, '\n	', null);
this._el_2 = import3.createRenderElement(this.renderer, this._el_0, 'div', new import3.InlineArray2(2, 'class', 'panel-heading'), null);
this._text_3 = this.renderer.createText(this._el_2, 'Sandbox for testing any', null);
this._text_4 = this.renderer.createText(this._el_0, '\n	', null);
this._el_5 = import3.createRenderElement(this.renderer, this._el_0, 'div', new import3.InlineArray2(2, 'class', 'panel-body'), null);
this._text_6 = this.renderer.createText(this._el_5, '\n	', null);
this._el_7 = import3.createRenderElement(this.renderer, this._el_5, 'h4', import3.EMPTY_INLINE_ARRAY, null);
this._text_8 = this.renderer.createText(this._el_7, 'List of phones', null);
this._text_9 = this.renderer.createText(this._el_5, '\n	', null);
this._el_10 = import3.createRenderElement(this.renderer, this._el_5, 'table', new import3.InlineArray2(2, 'class', 'table table-bordered table-hover'), null);
this._text_11 = this.renderer.createText(this._el_10, '\n	', null);
this._el_12 = import3.createRenderElement(this.renderer, this._el_10, 'thead', import3.EMPTY_INLINE_ARRAY, null);
this._text_13 = this.renderer.createText(this._el_12, '\n	', null);
this._el_14 = import3.createRenderElement(this.renderer, this._el_12, 'tr', import3.EMPTY_INLINE_ARRAY, null);
this._text_15 = this.renderer.createText(this._el_14, '\n	', null);
this._el_16 = import3.createRenderElement(this.renderer, this._el_14, 'th', import3.EMPTY_INLINE_ARRAY, null);
this._text_17 = this.renderer.createText(this._el_16, '#', null);
this._text_18 = this.renderer.createText(this._el_14, '\n	', null);
this._el_19 = import3.createRenderElement(this.renderer, this._el_14, 'th', import3.EMPTY_INLINE_ARRAY, null);
this._text_20 = this.renderer.createText(this._el_19, 'Brand', null);
this._text_21 = this.renderer.createText(this._el_14, '\n	', null);
this._el_22 = import3.createRenderElement(this.renderer, this._el_14, 'th', import3.EMPTY_INLINE_ARRAY, null);
this._text_23 = this.renderer.createText(this._el_22, 'Model', null);
this._text_24 = this.renderer.createText(this._el_14, '\n	', null);
this._el_25 = import3.createRenderElement(this.renderer, this._el_14, 'th', import3.EMPTY_INLINE_ARRAY, null);
this._text_26 = this.renderer.createText(this._el_25, 'OS', null);
this._text_27 = this.renderer.createText(this._el_14, '\n	', null);
this._text_28 = this.renderer.createText(this._el_12, '\n	', null);
this._text_29 = this.renderer.createText(this._el_10, '\n	', null);
this._el_30 = import3.createRenderElement(this.renderer, this._el_10, 'tbody', import3.EMPTY_INLINE_ARRAY, null);
this._text_31 = this.renderer.createText(this._el_30, '\n	', null);
this._anchor_32 = this.renderer.createTemplateAnchor(this._el_30, null);
this._vc_32 = new import9.ViewContainer(32, 30, this, this._anchor_32);
this._TemplateRef_32_5 = new import11.TemplateRef_(this, 32, this._anchor_32);
this._NgFor_32_6 = new import10.Wrapper_NgFor(this._vc_32.vcRef, this._TemplateRef_32_5, this.parentView.injectorGet(import12.IterableDiffers, this.parentIndex), this.ref);
this._text_33 = this.renderer.createText(this._el_30, '\n	', null);
this._text_34 = this.renderer.createText(this._el_10, '\n	', null);
this._text_35 = this.renderer.createText(this._el_5, '\n	', null);
this._text_36 = this.renderer.createText(this._el_0, '\n', null);
this.init(null, (this.renderer.directRenderer ? null : [
this._el_0,
this._text_1,
this._el_2,
this._text_3,
this._text_4,
this._el_5,
this._text_6,
this._el_7,
this._text_8,
this._text_9,
this._el_10,
this._text_11,
this._el_12,
this._text_13,
this._el_14,
this._text_15,
this._el_16,
this._text_17,
this._text_18,
this._el_19,
this._text_20,
this._text_21,
this._el_22,
this._text_23,
this._text_24,
this._el_25,
this._text_26,
this._text_27,
this._text_28,
this._text_29,
this._el_30,
this._text_31,
this._anchor_32,
this._text_33,
this._text_34,
this._text_35,
this._text_36
]), null);
return null;
};
View_SandboxComponent0.prototype.injectorGetInternal = function (token, requestNodeIndex, notFoundResult) {
if (((token === import11.TemplateRef) && (32 === requestNodeIndex))) {
return this._TemplateRef_32_5;
}
if (((token === import13.NgFor) && (32 === requestNodeIndex))) {
return this._NgFor_32_6.context;
}
return notFoundResult;
};
View_SandboxComponent0.prototype.detectChangesInternal = function (throwOnChange) {
var currVal_32_0_0 = this.context.phones;
this._NgFor_32_6.check_ngForOf(currVal_32_0_0, throwOnChange, false);
this._NgFor_32_6.ngDoCheck(this, this._anchor_32, throwOnChange);
this._vc_32.detectChangesInNestedViews(throwOnChange);
};
View_SandboxComponent0.prototype.destroyInternal = function () {
this._vc_32.destroyNestedViews();
};
View_SandboxComponent0.prototype.createEmbeddedViewInternal = function (nodeIndex) {
if ((nodeIndex == 32)) {
return new View_SandboxComponent1(this.viewUtils, this, 32, this._anchor_32, this._vc_32);
}
return null;
};
return View_SandboxComponent0;
}(import1.AppView));
var View_SandboxComponent1 = (function (_super) {
__extends(View_SandboxComponent1, _super);
function View_SandboxComponent1(viewUtils, parentView, parentIndex, parentElement, declaredViewContainer) {
_super.call(this, View_SandboxComponent1, renderType_SandboxComponent, import5.ViewType.EMBEDDED, viewUtils, parentView, parentIndex, parentElement, import6.ChangeDetectorStatus.CheckAlways, declaredViewContainer);
this._expr_14 = import14.UNINITIALIZED;
this._expr_15 = import14.UNINITIALIZED;
this._expr_16 = import14.UNINITIALIZED;
this._expr_17 = import14.UNINITIALIZED;
}
View_SandboxComponent1.prototype.createInternal = function (rootSelector) {
this._el_0 = import3.createRenderElement(this.renderer, null, 'tr', import3.EMPTY_INLINE_ARRAY, null);
this._text_1 = this.renderer.createText(this._el_0, '\n	', null);
this._el_2 = import3.createRenderElement(this.renderer, this._el_0, 'td', import3.EMPTY_INLINE_ARRAY, null);
this._text_3 = this.renderer.createText(this._el_2, '', null);
this._text_4 = this.renderer.createText(this._el_0, '\n	', null);
this._el_5 = import3.createRenderElement(this.renderer, this._el_0, 'td', import3.EMPTY_INLINE_ARRAY, null);
this._text_6 = this.renderer.createText(this._el_5, '', null);
this._text_7 = this.renderer.createText(this._el_0, '\n	', null);
this._el_8 = import3.createRenderElement(this.renderer, this._el_0, 'td', import3.EMPTY_INLINE_ARRAY, null);
this._text_9 = this.renderer.createText(this._el_8, '', null);
this._text_10 = this.renderer.createText(this._el_0, '\n	', null);
this._el_11 = import3.createRenderElement(this.renderer, this._el_0, 'td', import3.EMPTY_INLINE_ARRAY, null);
this._text_12 = this.renderer.createText(this._el_11, '', null);
this._text_13 = this.renderer.createText(this._el_0, '\n	', null);
this.init(this._el_0, (this.renderer.directRenderer ? null : [
this._el_0,
this._text_1,
this._el_2,
this._text_3,
this._text_4,
this._el_5,
this._text_6,
this._text_7,
this._el_8,
this._text_9,
this._text_10,
this._el_11,
this._text_12,
this._text_13
]), null);
return null;
};
View_SandboxComponent1.prototype.detectChangesInternal = function (throwOnChange) {
var currVal_14 = import3.inlineInterpolate(1, '', this.context.$implicit.id, '');
if (import3.checkBinding(throwOnChange, this._expr_14, currVal_14)) {
this.renderer.setText(this._text_3, currVal_14);
this._expr_14 = currVal_14;
}
var currVal_15 = import3.inlineInterpolate(1, '', this.context.$implicit.brand, '');
if (import3.checkBinding(throwOnChange, this._expr_15, currVal_15)) {
this.renderer.setText(this._text_6, currVal_15);
this._expr_15 = currVal_15;
}
var currVal_16 = import3.inlineInterpolate(1, '', this.context.$implicit.model, '');
if (import3.checkBinding(throwOnChange, this._expr_16, currVal_16)) {
this.renderer.setText(this._text_9, currVal_16);
this._expr_16 = currVal_16;
}
var currVal_17 = import3.inlineInterpolate(1, '', this.context.$implicit.os, '');
if (import3.checkBinding(throwOnChange, this._expr_17, currVal_17)) {
this.renderer.setText(this._text_12, currVal_17);
this._expr_17 = currVal_17;
}
};
View_SandboxComponent1.prototype.visitRootNodesInternal = function (cb, ctx) {
cb(this._el_0, ctx);
};
return View_SandboxComponent1;
}(import1.AppView));

all works fine.

But, if I commented template like this:

<div class="panel panel-default"><!--
--><div class="panel-heading">Sandbox for testing any</div><!--
--><div class="panel-body"><!--
--><h4>List of phones</h4><!--
--><table class="table table-bordered table-hover"><!--
--><thead><!--
--><tr><!--
--><th>#</th><!--
--><th>Brand</th><!--
--><th>Model</th><!--
--><th>OS</th><!--
--></tr><!--
--></thead><!--
--><tbody><!--
--><tr *ngFor="let phone of phones"><!--
--><td>{{phone.id}}</td><!--
--><td>{{phone.brand}}</td><!--
--><td>{{phone.model}}</td><!--
--><td>{{phone.os}}</td><!--
--></tr><!--
--></tbody><!--
--></table><!--
--></div><!--
--></div>

and recompile project, I get less file size:

sandbox.component.ngfactory.js = 13141 bytes (~14% less)

var __extends = (this && this.__extends) || function (d, b) {
for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
import * as import0 from '../../../../angular2App/app/sandbox/sandbox.component';
import * as import1 from '@angular/core/src/linker/view';
import * as import3 from '@angular/core/src/linker/view_utils';
import * as import4 from '@angular/core/src/metadata/view';
import * as import5 from '@angular/core/src/linker/view_type';
import * as import6 from '@angular/core/src/change_detection/constants';
import * as import7 from '@angular/core/src/linker/component_factory';
import * as import8 from '../../../../angular2App/app/services/phones.service';
import * as import9 from '@angular/core/src/linker/view_container';
import * as import10 from '../../../node_modules/@angular/common/src/directives/ng_for.ngfactory';
import * as import11 from '@angular/core/src/linker/template_ref';
import * as import12 from '@angular/core/src/change_detection/differs/iterable_differs';
import * as import13 from '@angular/common/src/directives/ng_for';
import * as import14 from '@angular/core/src/change_detection/change_detection_util';
export var Wrapper_SandboxComponent = (function () {
function Wrapper_SandboxComponent(p0) {
this._changed = false;
this.context = new import0.SandboxComponent(p0);
}
Wrapper_SandboxComponent.prototype.ngOnDetach = function (view, componentView, el) {
};
Wrapper_SandboxComponent.prototype.ngOnDestroy = function () {
};
Wrapper_SandboxComponent.prototype.ngDoCheck = function (view, el, throwOnChange) {
var changed = this._changed;
this._changed = false;
if (!throwOnChange) {
if ((view.numberOfChecks === 0)) {
this.context.ngOnInit();
}
}
return changed;
};
Wrapper_SandboxComponent.prototype.checkHost = function (view, componentView, el, throwOnChange) {
};
Wrapper_SandboxComponent.prototype.handleEvent = function (eventName, $event) {
var result = true;
return result;
};
Wrapper_SandboxComponent.prototype.subscribe = function (view, _eventHandler) {
this._eventHandler = _eventHandler;
};
return Wrapper_SandboxComponent;
}());
var renderType_SandboxComponent_Host = import3.createRenderComponentType('', 0, import4.ViewEncapsulation.None, [], {});
var View_SandboxComponent_Host0 = (function (_super) {
__extends(View_SandboxComponent_Host0, _super);
function View_SandboxComponent_Host0(viewUtils, parentView, parentIndex, parentElement) {
_super.call(this, View_SandboxComponent_Host0, renderType_SandboxComponent_Host, import5.ViewType.HOST, viewUtils, parentView, parentIndex, parentElement, import6.ChangeDetectorStatus.CheckAlways);
}
View_SandboxComponent_Host0.prototype.createInternal = function (rootSelector) {
this._el_0 = import3.selectOrCreateRenderHostElement(this.renderer, 'ng-component', import3.EMPTY_INLINE_ARRAY, rootSelector, null);
this.compView_0 = new View_SandboxComponent0(this.viewUtils, this, 0, this._el_0);
this._SandboxComponent_0_3 = new Wrapper_SandboxComponent(this.injectorGet(import8.PhonesService, this.parentIndex));
this.compView_0.create(this._SandboxComponent_0_3.context);
this.init(this._el_0, (this.renderer.directRenderer ? null : [this._el_0]), null);
return new import7.ComponentRef_(0, this, this._el_0, this._SandboxComponent_0_3.context);
};
View_SandboxComponent_Host0.prototype.injectorGetInternal = function (token, requestNodeIndex, notFoundResult) {
if (((token === import0.SandboxComponent) && (0 === requestNodeIndex))) {
return this._SandboxComponent_0_3.context;
}
return notFoundResult;
};
View_SandboxComponent_Host0.prototype.detectChangesInternal = function (throwOnChange) {
this._SandboxComponent_0_3.ngDoCheck(this, this._el_0, throwOnChange);
this.compView_0.detectChanges(throwOnChange);
};
View_SandboxComponent_Host0.prototype.destroyInternal = function () {
this.compView_0.destroy();
};
View_SandboxComponent_Host0.prototype.visitRootNodesInternal = function (cb, ctx) {
cb(this._el_0, ctx);
};
return View_SandboxComponent_Host0;
}(import1.AppView));
export var SandboxComponentNgFactory = new import7.ComponentFactory('ng-component', View_SandboxComponent_Host0, import0.SandboxComponent);
var styles_SandboxComponent = [];
var renderType_SandboxComponent = import3.createRenderComponentType('', 0, import4.ViewEncapsulation.None, styles_SandboxComponent, {});
export var View_SandboxComponent0 = (function (_super) {
__extends(View_SandboxComponent0, _super);
function View_SandboxComponent0(viewUtils, parentView, parentIndex, parentElement) {
_super.call(this, View_SandboxComponent0, renderType_SandboxComponent, import5.ViewType.COMPONENT, viewUtils, parentView, parentIndex, parentElement, import6.ChangeDetectorStatus.CheckAlways);
}
View_SandboxComponent0.prototype.createInternal = function (rootSelector) {
var parentRenderNode = this.renderer.createViewRoot(this.parentElement);
this._el_0 = import3.createRenderElement(this.renderer, parentRenderNode, 'div', new import3.InlineArray2(2, 'class', 'panel panel-default'), null);
this._el_1 = import3.createRenderElement(this.renderer, this._el_0, 'div', new import3.InlineArray2(2, 'class', 'panel-heading'), null);
this._text_2 = this.renderer.createText(this._el_1, 'Sandbox for testing any', null);
this._el_3 = import3.createRenderElement(this.renderer, this._el_0, 'div', new import3.InlineArray2(2, 'class', 'panel-body'), null);
this._el_4 = import3.createRenderElement(this.renderer, this._el_3, 'h4', import3.EMPTY_INLINE_ARRAY, null);
this._text_5 = this.renderer.createText(this._el_4, 'List of phones', null);
this._el_6 = import3.createRenderElement(this.renderer, this._el_3, 'table', new import3.InlineArray2(2, 'class', 'table table-bordered table-hover'), null);
this._el_7 = import3.createRenderElement(this.renderer, this._el_6, 'thead', import3.EMPTY_INLINE_ARRAY, null);
this._el_8 = import3.createRenderElement(this.renderer, this._el_7, 'tr', import3.EMPTY_INLINE_ARRAY, null);
this._el_9 = import3.createRenderElement(this.renderer, this._el_8, 'th', import3.EMPTY_INLINE_ARRAY, null);
this._text_10 = this.renderer.createText(this._el_9, '#', null);
this._el_11 = import3.createRenderElement(this.renderer, this._el_8, 'th', import3.EMPTY_INLINE_ARRAY, null);
this._text_12 = this.renderer.createText(this._el_11, 'Brand', null);
this._el_13 = import3.createRenderElement(this.renderer, this._el_8, 'th', import3.EMPTY_INLINE_ARRAY, null);
this._text_14 = this.renderer.createText(this._el_13, 'Model', null);
this._el_15 = import3.createRenderElement(this.renderer, this._el_8, 'th', import3.EMPTY_INLINE_ARRAY, null);
this._text_16 = this.renderer.createText(this._el_15, 'OS', null);
this._el_17 = import3.createRenderElement(this.renderer, this._el_6, 'tbody', import3.EMPTY_INLINE_ARRAY, null);
this._anchor_18 = this.renderer.createTemplateAnchor(this._el_17, null);
this._vc_18 = new import9.ViewContainer(18, 17, this, this._anchor_18);
this._TemplateRef_18_5 = new import11.TemplateRef_(this, 18, this._anchor_18);
this._NgFor_18_6 = new import10.Wrapper_NgFor(this._vc_18.vcRef, this._TemplateRef_18_5, this.parentView.injectorGet(import12.IterableDiffers, this.parentIndex), this.ref);
this.init(null, (this.renderer.directRenderer ? null : [
this._el_0,
this._el_1,
this._text_2,
this._el_3,
this._el_4,
this._text_5,
this._el_6,
this._el_7,
this._el_8,
this._el_9,
this._text_10,
this._el_11,
this._text_12,
this._el_13,
this._text_14,
this._el_15,
this._text_16,
this._el_17,
this._anchor_18
]), null);
return null;
};
View_SandboxComponent0.prototype.injectorGetInternal = function (token, requestNodeIndex, notFoundResult) {
if (((token === import11.TemplateRef) && (18 === requestNodeIndex))) {
return this._TemplateRef_18_5;
}
if (((token === import13.NgFor) && (18 === requestNodeIndex))) {
return this._NgFor_18_6.context;
}
return notFoundResult;
};
View_SandboxComponent0.prototype.detectChangesInternal = function (throwOnChange) {
var currVal_18_0_0 = this.context.phones;
this._NgFor_18_6.check_ngForOf(currVal_18_0_0, throwOnChange, false);
this._NgFor_18_6.ngDoCheck(this, this._anchor_18, throwOnChange);
this._vc_18.detectChangesInNestedViews(throwOnChange);
};
View_SandboxComponent0.prototype.destroyInternal = function () {
this._vc_18.destroyNestedViews();
};
View_SandboxComponent0.prototype.createEmbeddedViewInternal = function (nodeIndex) {
if ((nodeIndex == 18)) {
return new View_SandboxComponent1(this.viewUtils, this, 18, this._anchor_18, this._vc_18);
}
return null;
};
return View_SandboxComponent0;
}(import1.AppView));
var View_SandboxComponent1 = (function (_super) {
__extends(View_SandboxComponent1, _super);
function View_SandboxComponent1(viewUtils, parentView, parentIndex, parentElement, declaredViewContainer) {
_super.call(this, View_SandboxComponent1, renderType_SandboxComponent, import5.ViewType.EMBEDDED, viewUtils, parentView, parentIndex, parentElement, import6.ChangeDetectorStatus.CheckAlways, declaredViewContainer);
this._expr_9 = import14.UNINITIALIZED;
this._expr_10 = import14.UNINITIALIZED;
this._expr_11 = import14.UNINITIALIZED;
this._expr_12 = import14.UNINITIALIZED;
}
View_SandboxComponent1.prototype.createInternal = function (rootSelector) {
this._el_0 = import3.createRenderElement(this.renderer, null, 'tr', import3.EMPTY_INLINE_ARRAY, null);
this._el_1 = import3.createRenderElement(this.renderer, this._el_0, 'td', import3.EMPTY_INLINE_ARRAY, null);
this._text_2 = this.renderer.createText(this._el_1, '', null);
this._el_3 = import3.createRenderElement(this.renderer, this._el_0, 'td', import3.EMPTY_INLINE_ARRAY, null);
this._text_4 = this.renderer.createText(this._el_3, '', null);
this._el_5 = import3.createRenderElement(this.renderer, this._el_0, 'td', import3.EMPTY_INLINE_ARRAY, null);
this._text_6 = this.renderer.createText(this._el_5, '', null);
this._el_7 = import3.createRenderElement(this.renderer, this._el_0, 'td', import3.EMPTY_INLINE_ARRAY, null);
this._text_8 = this.renderer.createText(this._el_7, '', null);
this.init(this._el_0, (this.renderer.directRenderer ? null : [
this._el_0,
this._el_1,
this._text_2,
this._el_3,
this._text_4,
this._el_5,
this._text_6,
this._el_7,
this._text_8
]), null);
return null;
};
View_SandboxComponent1.prototype.detectChangesInternal = function (throwOnChange) {
var currVal_9 = import3.inlineInterpolate(1, '', this.context.$implicit.id, '');
if (import3.checkBinding(throwOnChange, this._expr_9, currVal_9)) {
this.renderer.setText(this._text_2, currVal_9);
this._expr_9 = currVal_9;
}
var currVal_10 = import3.inlineInterpolate(1, '', this.context.$implicit.brand, '');
if (import3.checkBinding(throwOnChange, this._expr_10, currVal_10)) {
this.renderer.setText(this._text_4, currVal_10);
this._expr_10 = currVal_10;
}
var currVal_11 = import3.inlineInterpolate(1, '', this.context.$implicit.model, '');
if (import3.checkBinding(throwOnChange, this._expr_11, currVal_11)) {
this.renderer.setText(this._text_6, currVal_11);
this._expr_11 = currVal_11;
}
var currVal_12 = import3.inlineInterpolate(1, '', this.context.$implicit.os, '');
if (import3.checkBinding(throwOnChange, this._expr_12, currVal_12)) {
this.renderer.setText(this._text_8, currVal_12);
this._expr_12 = currVal_12;
}
};
View_SandboxComponent1.prototype.visitRootNodesInternal = function (cb, ctx) {
cb(this._el_0, ctx);
};
return View_SandboxComponent1;
}(import1.AppView));

Look at

"View_SandboxComponent0.prototype.createInternal = function (rootSelector){ "

"View_SandboxComponent1.prototype.createInternal = function (rootSelector){ "

we see that the second assembly line does not like this:

this._text_1 = this.renderer.createText(this._el_0, '\n	', null);

Expected behavior

Add compilation option, something like this:

"angularCompilerOptions": {
"genDir": "aot",
"skipMetadataEmit": true,
"removeEmptySpaceBetweenTags": true
},

Minimal reproduction of the problem with instructions

What is the motivation / use case for changing the behavior?

I have project with more 50 components and ~5 Mbytes app.bundle.js

I want less file size

Please tell us about your environment:

Win 8.1

VSCode 1.7.2

Angular version: 2.0.X

package.json

{
"version": "1.0.0",
"description": "",
"main": "wwwroot/index.html",
"author": "",
"license": "ISC",
"scripts": {
"ngc": "ngc -p ./tsconfig-aot.json",
"start": "concurrently \"webpack-dev-server --inline --progress --port 8080\" \"dotnet run\" ",
"webpack-dev": "set NODE_ENV=development&& webpack",
"webpack-prod": "set NODE_ENV=production&& webpack",
"build": "npm run webpack-dev",
"buildProduction": "npm run ngc && npm run webpack-prod"
},
"dependencies": {
"@angular/common": "~2.2.4",
"@angular/compiler": "~2.3.0",
"@angular/compiler-cli": "~2.3.0",
"@angular/core": "~2.3.0",
"@angular/forms": "~2.3.0",
"@angular/http": "~2.3.0",
"@angular/platform-browser": "~2.3.0",
"@angular/platform-browser-dynamic": "~2.3.0",
"@angular/router": "~3.3.0",
"@angular/upgrade": "~2.3.0",
"angular-in-memory-web-api": "~0.1.17",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-rc.5",
"zone.js": "^0.7.2",

"@angular/platform-server": "~2.3.0",
"bootstrap": "^3.3.7",
"ie-shim": "^0.1.0"
},
"devDependencies": {
"@types/node": "^6.0.51",
"angular2-template-loader": "^0.5.0",
"awesome-typescript-loader": "^2.2.4",
"clean-webpack-plugin": "^0.1.9",
"concurrently": "^3.1.0",
"copy-webpack-plugin": "^2.1.3",
"css-loader": "^0.23.0",
"file-loader": "^0.8.4",
"html-webpack-plugin": "^2.8.1",
"jquery": "^2.2.0",
"json-loader": "^0.5.3",
"node-sass": "^3.10.1",
"raw-loader": "^0.5.1",
"rimraf": "^2.5.2",
"sass-loader": "^4.0.2",
"source-map-loader": "^0.1.5",
"style-loader": "^0.13.0",
"ts-helpers": "^1.1.1",
"typescript": "2.0.3",
"url-loader": "^0.5.6",
"webpack": "2.1.0-beta.27",
"webpack-dev-server": "^1.16.2"
}
}

Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Language: [all | TypeScript X.X | ES6/7 | ES5]

Node (for AoT issues): node --version =

npm: 3.10.9

node: 6.9.1