Angular2 StackOverflow List

2016/05/284 min read
bookmark this
Responsive image

Table of Contents

  1. TypeScript Build error
  2. Html comment on Angular decorator
  3. Fix
  4. Angular2 Decorator's order
  5. Fix
  6. 404 javascript issue on platform-browser-dynamic.umd.js
  7. Fix
  8. Error: ReferenceError: enableProdMode is not defined
  9. Fix

TypeScript Build error

Html comment on Angular decorator
Now, you want to add html comment to angular decorator, following will fail.


@Component({
  selector: 'my-app',
  template: `
  {{title}}
  //{{name.first}} {{name.last}}
  /*

  	first name:


  	last name:


  */
  `
})

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: `
{{title}}
  <!--
  {{name.first}} {{name.last}}

  	first name:


  	last name:


  -->

  `
})

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: `
    {{title}}
    {{name.firstname}} man!
    {{name.id}}

        name:


    `
})

Fix
import {Component} from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
    {{title}}
    {{name.firstname}} man!
    {{name.id}}

        name:


    `
})
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(&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)

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(&hellip;)

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);

Html comment on Angular decorator

Now, you want to add html comment to angular decorator, following will fail.

@Component({
  selector: 'my-app',
  template: `
  {{title}}
  //{{name.first}} {{name.last}}
  /*

  	first name:


  	last name:


  */
  `
})

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: `
{{title}}
<!--
  {{name.first}} {{name.last}}

  	first name:


  	last name:


  -->

  `
})

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: `
    {{title}}
    {{name.firstname}} man!
    {{name.id}}

        name:


    `
})

Fix

import {Component} from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
    {{title}}
    {{name.firstname}} man!
    {{name.id}}

        name:


    `
})
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(&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)

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(&hellip;)

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);
Angular2

More Blogs Like This