← back to the blog


Angular2 StackOverflow List

Posted in Angular2 by dake

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: `
  &lt;h2&gt;{{title}}&lt;/h2&gt;
  //&lt;h1&gt;{{name.first}} {{name.last}}&lt;/h1&gt;  
  /*
  &lt;div&gt;
  	&lt;label&gt;first name: &lt;/label&gt;
  	&lt;input [(ngModel)]="name.first"/&gt;&lt;br&gt;
  	&lt;label&gt;last name: &lt;/label&gt;
  	&lt;input [(ngModel)]="name.last"/&gt;
  &lt;/div&gt;
  */
  `
})
</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: `&lt;/pre&gt;
&lt;h2&gt;{{title}}&lt;/h2&gt;
&lt;pre class="language-javascript"&gt;  &lt;!-- 
  &lt;h1&gt;{{name.first}} {{name.last}}&lt;/h1&gt;
  &lt;div&gt;
  	&lt;label&gt;first name: &lt;/label&gt;
  	&lt;input [(ngModel)]="name.first"/&gt;&lt;br&gt;
  	&lt;label&gt;last name: &lt;/label&gt;
  	&lt;input [(ngModel)]="name.last"/&gt;
  &lt;/div&gt;
  --&gt;
  
  `
})
</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: `
    &lt;h1&gt;{{title}}&lt;/h1&gt;
    &lt;h2&gt;{{name.firstname}} man!&lt;/h2&gt;
    &lt;h3&gt;{{name.id}}&lt;/h3&gt;
    &lt;div&gt;
        &lt;label&gt;name: &lt;/label&gt;
        &lt;input [(ngModel)]="name.firstname" placeholder="name"&gt;
    &lt;/div&gt;
    `
})
</pre>
<h3>Fix</h3>
<pre class="language-javascript">import {Component} from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
    &lt;h1&gt;{{title}}&lt;/h1&gt;
    &lt;h2&gt;{{name.firstname}} man!&lt;/h2&gt;
    &lt;h3&gt;{{name.id}}&lt;/h3&gt;
    &lt;div&gt;
        &lt;label&gt;name: &lt;/label&gt;
        &lt;input [(ngModel)]="name.firstname" placeholder="name"&gt;
    &lt;/div&gt;
    `
})
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(&hellip;)(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(&hellip;)
</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);