Angular2 StackOverflow List
2016/5/284 min read
bookmark this
TypeScript Build error
<h3>Html comment on Angular decorator</h3>
<p>Now, you want to add html comment to angular decorator, following will fail.</p>
<pre class="language-javascript">@Component({
selector: 'my-app',
template: `
<h2>{{title}}</h2>
//<h1>{{name.first}} {{name.last}}</h1>
/*
<div>
<label>first name: </label>
<input [(ngModel)]="name.first"/><br>
<label>last name: </label>
<input [(ngModel)]="name.last"/>
</div>
*/
`
})
</pre>
<h3>Fix</h3>
<p>Now, add as html comment will not throw typescript error, and will return remove the comment section during TypeScript compiler</p>
<pre class="language-javascript">@Component({
selector: 'my-app',
template: `</pre>
<h2>{{title}}</h2>
<pre class="language-javascript"> <!--
<h1>{{name.first}} {{name.last}}</h1>
<div>
<label>first name: </label>
<input [(ngModel)]="name.first"/><br>
<label>last name: </label>
<input [(ngModel)]="name.last"/>
</div>
-->
`
})
</pre>
<h3>Angular2 Decorator's order</h3>
<p>Now, following code will break, you have to put AppComponent under decorator @Component, that's the way angular2 will recorgize the AppComponent.</p>
<pre class="language-javascript">import {Component} from '@angular/core';
export class Name {
id: number;
firstname: string;
}
export class AppComponent {
title = 'hi yo';
name: Name = {
id: 1,
firstname: 'tt'
};
}
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>{{name.firstname}} man!</h2>
<h3>{{name.id}}</h3>
<div>
<label>name: </label>
<input [(ngModel)]="name.firstname" placeholder="name">
</div>
`
})
</pre>
<h3>Fix</h3>
<pre class="language-javascript">import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>{{name.firstname}} man!</h2>
<h3>{{name.id}}</h3>
<div>
<label>name: </label>
<input [(ngModel)]="name.firstname" placeholder="name">
</div>
`
})
export class AppComponent {
title = 'hi yo';
name: Name = {
id: 1,
firstname: 'tt'
};
}
export class Name {
id: number;
firstname: string;
}
</pre>
<h3>404 javascript issue on platform-browser-dynamic.umd.js</h3>
<p>If you getting this issue, looks like the folder is not correct.</p>
<pre class="language-javascript">zone.js:101 GET http://localhost:3000/node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM146:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
(index):17 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js(…)(anonymous function) @ (index):17ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426
zone.js:101 GET http://localhost:3000/node_modules/@angular/core/core.umd.js 404 (Not Found)
</pre>
<h3>Fix</h3>
<p>Adding 'bundle' here, because that's the location for my .umd.js</p>
<pre>function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
</pre>
<h3>Error: ReferenceError: enableProdMode is not defined</h3>
<pre>(index):17 Error: ReferenceError: enableProdMode is not defined(…)
</pre>
<h3>Fix</h3>
<pre class="language-javascript">// at main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
// add following two lines
import {enableProdMode} from '@angular/core';
enableProdMode();
bootstrap(AppComponent);
</pre>
Html comment on Angular decorator
Now, you want to add html comment to angular decorator, following will fail.
@Component({
selector: 'my-app',
template: `
<h2>{{title}}</h2>
//<h1>{{name.first}} {{name.last}}</h1>
/*
<div>
<label>first name: </label>
<input [(ngModel)]="name.first"/><br>
<label>last name: </label>
<input [(ngModel)]="name.last"/>
</div>
*/
`
})
Fix
Now, add as html comment will not throw typescript error, and will return remove the comment section during TypeScript compiler
@Component({
selector: 'my-app',
template: `</pre>
<h2>{{title}}</h2>
<pre class="language-javascript"> <!--
<h1>{{name.first}} {{name.last}}</h1>
<div>
<label>first name: </label>
<input [(ngModel)]="name.first"/><br>
<label>last name: </label>
<input [(ngModel)]="name.last"/>
</div>
-->
`
})
Angular2 Decorator's order
Now, following code will break, you have to put AppComponent under decorator @Component, that's the way angular2 will recorgize the AppComponent.
import {Component} from '@angular/core';
export class Name {
id: number;
firstname: string;
}
export class AppComponent {
title = 'hi yo';
name: Name = {
id: 1,
firstname: 'tt'
};
}
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>{{name.firstname}} man!</h2>
<h3>{{name.id}}</h3>
<div>
<label>name: </label>
<input [(ngModel)]="name.firstname" placeholder="name">
</div>
`
})
Fix
import {Component} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>{{title}}</h1>
<h2>{{name.firstname}} man!</h2>
<h3>{{name.id}}</h3>
<div>
<label>name: </label>
<input [(ngModel)]="name.firstname" placeholder="name">
</div>
`
})
export class AppComponent {
title = 'hi yo';
name: Name = {
id: 1,
firstname: 'tt'
};
}
export class Name {
id: number;
firstname: string;
}
404 javascript issue on platform-browser-dynamic.umd.js
If you getting this issue, looks like the folder is not correct.
zone.js:101 GET http://localhost:3000/node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js 404 (Not Found)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:336Zone.scheduleMacroTask @ zone.js:273(anonymous function) @ zone.js:122send @ VM146:3fetchTextFromURL @ system.src.js:1156(anonymous function) @ system.src.js:1739ZoneAwarePromise @ zone.js:584(anonymous function) @ system.src.js:1738(anonymous function) @ system.src.js:2764(anonymous function) @ system.src.js:3338(anonymous function) @ system.src.js:3605(anonymous function) @ system.src.js:3990(anonymous function) @ system.src.js:4453(anonymous function) @ system.src.js:4705(anonymous function) @ system.src.js:408ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 (index):17 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/node_modules/@angular/platform-browser-dynamic/platform-browser-dynamic.umd.js(…)(anonymous function) @ (index):17ZoneDelegate.invoke @ zone.js:323Zone.run @ zone.js:216(anonymous function) @ zone.js:571ZoneDelegate.invokeTask @ zone.js:356Zone.runTask @ zone.js:256drainMicroTaskQueue @ zone.js:474ZoneTask.invoke @ zone.js:426 zone.js:101 GET http://localhost:3000/node_modules/@angular/core/core.umd.js 404 (Not Found)
Fix
Adding 'bundle' here, because that's the location for my .umd.js
function packUmd(pkgName) {
packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
Error: ReferenceError: enableProdMode is not defined
(index):17 Error: ReferenceError: enableProdMode is not defined(…)
Fix
// at main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
// add following two lines
import {enableProdMode} from '@angular/core';
enableProdMode();
bootstrap(AppComponent);