This blog demo how to build angualr2 master/detail page, following is the template page for now.

Angular2 Master/Detail Page Example


<h2>Detect breakpoint by use <strong>@angular/cdk</strong></h2>
<p>
  breakpoint usually is CSS, you write media query for different style for
  different view. However, sometime you might want to do that in Javascript
  instead of CSS. At this blog, we'll use <strong>@angular/cdk</strong> at
  Angular Universal App project.
</p>
<h2>First intall <strong>@angular/cdk</strong></h2>
<pre><code>
"@angular/cdk": "^7.3.3",
</code>
</pre>
<h2>Add Layout Module to root angular module</h2>
<pre><code>
import { LayoutModule } from "@angular/cdk/layout";

@NgModule({
  declarations: [AppComponent, HomeComponent],
  imports: [
    BrowserModule.withServerTransition({ appId: "my-app" }),
    RouterModule.forRoot([
      { path: "", component: HomeComponent, pathMatch: "full" },
      { path: "lazy", loadChildren: "./lazy/lazy.module#LazyModule" },
      { path: "lazy/nested", loadChildren: "./lazy/lazy.module#LazyModule" }
    ]),
    TransferHttpCacheModule,
    LayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
</code>
</pre>
<h2>Use <strong>@angular/cdk</strong> at Angular component</h2>
<pre><code>
  ngOnInit(): void {
    this.breakpointObserver
      .observe(["(min-width: 500px)"])
      .subscribe((state: BreakpointState) =&gt; {
        if (state.matches) {
          console.log("Viewport is 500px or over!");
        } else {
          console.log("Viewport is getting smaller!");
        }
      });
  }
</code>
</pre>
<h3>References</h3>
<p>
  <a
    href="https://alligator.io/angular/breakpoints-angular-cdk/"
    target="_blank"
    >https://alligator.io/angular/breakpoints-angular-cdk/</a
  >
</p>


Sample code about how to detect breakpoint at Angular.

Detect Breakpoint at Angular


<p>
  Following is for someone who one to get quick hello world angular2 running,
  the code is reference from&nbsp;<a
    href="https://github.com/angular/quickstart"
    target="_blank"
    rel="noopener"
    >angular2's original quickstart GitHub source code</a
  >&nbsp;and with additional few udpates, all code shows here are at my Github
  repository&nbsp;<a
    href="https://github.com/keke78ui9/Angular2HelloWorld"
    target="_blank"
    rel="noopener"
    >Angular2HelloWorld</a
  >
</p>
<p><strong>File Structure</strong></p>
<pre
  style="
    margin-top: 0px;
    margin-bottom: 1em;
    padding: 5px;
    border: 0px;
    font-size: 13px;
    width: auto;
    max-height: 600px;
    overflow: auto;
    font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono',
      'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace,
      sans-serif;
    word-wrap: normal;
    color: #242729;
    background-color: #eff0f1;
  "
><code style="margin: 0px; padding: 0px; border: 0px; font-family: Consolas, Menlo, Monaco, 'Lucida Console', 'Liberation Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', monospace, sans-serif; white-space: inherit;">.
+-- app
|   +-- main.ts
|   +-- app.component.ts
+-- .gitignore<br />+-- index.html<br />+-- package.json<br />+-- styles.css<br />+-- systemjs.config.js<br />+-- tsconfig.json<br />+-- typings.json</code></pre>
<h3>Features</h3>
<ul>
  <li>HelloWorld Angular2</li>
  <li>Runtime TypeScript compiler</li>
  <li>One Html example</li>
  <li>Css</li>
</ul>
<h3><code>index.html</code></h3>
<p>
  index.html is the main page, <code>my-app</code> is the section will inject by
  angular2 code.
</p>
<pre class="language-javascript">
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    &lt;!-- 1. Load libraries --&gt;
     &lt;!-- Polyfill(s) for older browsers --&gt;
    &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;!-- 2. Configure SystemJS --&gt;
    &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      System.import('app').catch(function(err){ console.error(err); });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;!-- 3. Display the application --&gt;
  &lt;body&gt;
    &lt;my-app&gt;Loading...&lt;/my-app&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
<h3><code>package.json</code></h3>
<p>
  package.json contains all the dependency modules for this app, just run
  <code>npm install -d </code>, will install all the npm modules.
</p>
<pre class="language-javascript">
{
  "name": "angular2_helloworld",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc &amp;&amp; concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.2",
    "@angular/compiler":  "2.0.0-rc.2",
    "@angular/core":  "2.0.0-rc.2",
    "@angular/http":  "2.0.0-rc.2",
    "@angular/platform-browser":  "2.0.0-rc.2",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.2",
    "@angular/router":  "2.0.0-rc.2",
    "@angular/router-deprecated":  "2.0.0-rc.2",
    "@angular/upgrade":  "2.0.0-rc.2",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.12",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  },
  "description": "helloworld",
  "repository": "helloworld"
}
</pre>
<h3><code>styles.css</code></h3>
<p>
  Just a style for this example, later want to try how to use SASS with this
  hello world structure.
</p>
<pre class="language-css">
h1 { color: #ffffff; font-family: 'Lato', sans-serif; font-size: 54px; font-weight: 300; line-height: 58px; margin: 0 0 58px; }
body {
    background-color: #333;
}
</pre>
<h3><code>systemjs.config.js</code></h3>
<p>
  A file from original angular2 quick start example, which bootstrap the
  angualr2 code.
</p>
<pre class="language-javascript">
/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);
</pre>
<h3><code>tsconfig.json</code></h3>
<p>Typescript config files.</p>
<pre class="language-javascript">
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}
</pre>
<h3><code>typings.json</code></h3>
<p>Typing script config files.</p>
<pre class="language-javascript">
{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}
</pre>
<h3><code>main.ts</code></h3>
<p>HelloWorld app's main class.</p>
<pre class="language-javascript">
import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import {enableProdMode} from '@angular/core';
enableProdMode();
bootstrap(AppComponent);
</pre>
<h3><code>app.component.ts</code></h3>
<pre class="language-javascript">
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '&lt;h1&gt;Hello World! Angular2!&lt;/h1&gt;'
})
export class AppComponent { }
</pre>
<h3><code>.gitignore</code></h3>
<p>.gitignore, so you won't check-in extra code to git.</p>
<pre class="language-javascript">
.idea
typings/**
node_modules
jspm_packages
link-checker-results.txt
**/*npm-debug.log.*
*.js
*.js.map
_test-output
_temp

!**/*e2e-spec.js
!karma*.js
!protractor*.js
!systemjs.config.js
!typings/typings.d.ts
!wallaby.js
</pre>
<h3>Get code form github</h3>
<p>
  Now, you can get code as following, first clone and download to your local.
</p>
<pre class="language-javascript">
a:\&gt;git clone https://github.com/keke78ui9/Angular2HelloWorld helloAngular2
Cloning into 'helloAngular2'...
remote: Counting objects: 15, done.
remote: Compressing objects: 100% (15/15), done.
remote: Total 15 (delta 1), reused 11 (delta 0), pack-reused 0
Unpacking objects: 100% (15/15), done.
Checking connectivity... done.
</pre>
<p>Then go to the new folder contains the code</p>
<pre class="language-javascript">
a:\&gt;cd helloAngular2
</pre>
<pre class="language-javascript">
a:\helloAngular2&gt;npm install -d
</pre>
<pre class="language-javascript">
a:\helloAngular2&gt;npm start
</pre>


Use Angular2 to create a Simple Sample App.

Angular2 HelloWorld


<h3>Learn Angular2 from angular.io's QuickStart Example</h3>
<p>
  So I'm trying to learn Angular by checking angular.io's QuickStart Example.
  Once you get all the files as following,
  <code>index.html</code
  >,<code>package.json</code>,<code>styles.css</code>,<code>systemjs.config.js</code>,<code>tsconfig.json</code>,<code>typings.json</code>.
  Also, you'll need <code>main.ts</code> and <code>app.component.ts</code>, but
  you can get all these files at&nbsp;<a
    href="https://angular.io/docs/ts/latest/quickstart.html"
    target="_blank"
    rel="noopener"
    >Angular quickstart</a
  >. I'll list my files here which I copied from angular.io because the code
  here you can reference what's file are using.
</p>
<p>
  Once you got all files, run <code>npm install</code> so you can all npm
  modules, then run <code>npm start</code> you should be see site by running at
  <code>http://localhost:3000</code>. You might see following issue as...
</p>
<pre
  class="language-javascript"
><code>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)
</code></pre>
<p>
  This is because the file <code>systemjs.config.js</code> is missing
  <code>'/bundles/'</code>, looks like the current
  https://angular.io/docs/ts/latest/quickstart.html# already has the code, but
  that's why for the umd.js is missing issue.
</p>
<pre class="language-javascript"><code>  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
</code></pre>
<p>
  Also, when you run the site and once you see the text 'My First Angular 2
  App', check the console window, if you have log says.
</p>
<pre
  class="language-xml"
><code>(index):17 Error: ReferenceError: enableProdMode is not defined(&hellip;)
</code></pre>
<p>You can add following code to enable it.</p>
<pre class="language-javascript"><code>// 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);
</code></pre>
<p><code>index.html</code></p>
<pre class="language-javascript"><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Angular 2 QuickStart&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="styles.css"&gt;
    
    &lt;!-- 1. Load libraries --&gt;
     &lt;!-- Polyfill(s) for older browsers --&gt;
    &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;!-- 2. Configure SystemJS --&gt;
    &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      System.import('app').catch(function(err){ console.error(err); });
    &lt;/script&gt;
  &lt;/head&gt;
  &lt;!-- 3. Display the application --&gt;
  &lt;body&gt;
    &lt;my-app&gt;Loading...&lt;/my-app&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>
<p><code>package.json</code></p>
<pre class="language-javascript"><code>{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc &amp;&amp; concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common":  "2.0.0-rc.2",
    "@angular/compiler":  "2.0.0-rc.2",
    "@angular/core":  "2.0.0-rc.2",
    "@angular/http":  "2.0.0-rc.2",
    "@angular/platform-browser":  "2.0.0-rc.2",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.2",
    "@angular/router":  "2.0.0-rc.2",
    "@angular/router-deprecated":  "2.0.0-rc.2",
    "@angular/upgrade":  "2.0.0-rc.2",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.12",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings":"^1.0.4"
  },
  "description": "asdf",
  "repository": "sss"
}
</code></pre>
<p><code>systemjs.config.js</code></p>
<pre class="language-javascript"><code>/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'app':                        'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
    'app':                        { main: 'main.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
  };
  var ngPackageNames = [
    'common',
    'compiler',
    'core',
    'http',
    'platform-browser',
    'platform-browser-dynamic',
    'router',
    'router-deprecated',
    'upgrade',
  ];
  // Individual files (~300 requests):
  function packIndex(pkgName) {
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
  }
  // Bundled (~40 requests):
  function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
  // Most environments should use UMD; some (Karma) need the individual index files
  var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
  // Add package entries for angular packages
  ngPackageNames.forEach(setPackageConfig);
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);
</code></pre>
<p><code>tsconfig.json</code></p>
<pre class="language-javascript"><code>{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  }
}
</code></pre>
<p><code>typings.json</code></p>
<pre class="language-javascript"><code>{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
    "node": "registry:dt/node#4.0.0+20160509154515"
  }
}
</code></pre>
<p><code>main.ts</code></p>
<pre
  class="language-javascript"
><code>import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import {enableProdMode} from '@angular/core';
enableProdMode();
bootstrap(AppComponent);
</code></pre>
<p><code>app.component.ts</code></p>
<pre
  class="language-javascript"
><code>import { Component } from '@angular/core';
enableProdMode();
@Component({
  selector: 'my-app',
  template: '&lt;h1&gt;My First Angular 2 App2&lt;/h1&gt;'
})
export class AppComponent { }
</code></pre>
<h3>Get quickstart from github</h3>
<p>
  Also, you can get all these code from github, which is most update to
  date,&nbsp;<a
    href="https://github.com/angular/quickstart"
    target="_blank"
    rel="noopener"
    >https://github.com/angular/quickstart</a
  >.
</p>
<p>
  To start use this is easy, you'll need to
  <code>git clone https://github.com/angular/quickstart</code>, then run
  <code>npm install</code>, and <code>run npm start</code>, the github is also
  contains the unitest.
</p>


So I'm trying to learn Angular by checking angular.io's QuickStart Example. Once you get all the files as following,index.html,package.json,styles.css,systemjs.config.js,tsconfig.json,typings.json. Also, you'll need main.ts and app.component.ts,but you can get all these files at Angular quickstart [https://angular.io/docs/ts/latest/quickstart.html]. I'll list my files herewhich I copied from angular.io because the code here you can reference what's file are using.

Angular2 - Quickstart Angular2 with angular.io


<h3>TypeScript Build error</h3>
<pre class="language-javascript">
&lt;h3&gt;Html comment on Angular decorator&lt;/h3&gt;
&lt;p&gt;Now, you want to add html comment to angular decorator, following will fail.&lt;/p&gt;
&lt;pre class="language-javascript"&gt;@Component({
  selector: 'my-app',
  template: `
  &amp;lt;h2&amp;gt;{{title}}&amp;lt;/h2&amp;gt;
  //&amp;lt;h1&amp;gt;{{name.first}} {{name.last}}&amp;lt;/h1&amp;gt;  
  /*
  &amp;lt;div&amp;gt;
  	&amp;lt;label&amp;gt;first name: &amp;lt;/label&amp;gt;
  	&amp;lt;input [(ngModel)]="name.first"/&amp;gt;&amp;lt;br&amp;gt;
  	&amp;lt;label&amp;gt;last name: &amp;lt;/label&amp;gt;
  	&amp;lt;input [(ngModel)]="name.last"/&amp;gt;
  &amp;lt;/div&amp;gt;
  */
  `
})
&lt;/pre&gt;
&lt;h3&gt;Fix&lt;/h3&gt;
&lt;p&gt;Now, add as html comment will not throw typescript error, and will return remove the comment section during TypeScript compiler&lt;/p&gt;
&lt;pre class="language-javascript"&gt;@Component({
  selector: 'my-app',
  template: `&amp;lt;/pre&amp;gt;
&amp;lt;h2&amp;gt;{{title}}&amp;lt;/h2&amp;gt;
&amp;lt;pre class="language-javascript"&amp;gt;  &amp;lt;!-- 
  &amp;lt;h1&amp;gt;{{name.first}} {{name.last}}&amp;lt;/h1&amp;gt;
  &amp;lt;div&amp;gt;
  	&amp;lt;label&amp;gt;first name: &amp;lt;/label&amp;gt;
  	&amp;lt;input [(ngModel)]="name.first"/&amp;gt;&amp;lt;br&amp;gt;
  	&amp;lt;label&amp;gt;last name: &amp;lt;/label&amp;gt;
  	&amp;lt;input [(ngModel)]="name.last"/&amp;gt;
  &amp;lt;/div&amp;gt;
  --&amp;gt;
  
  `
})
&lt;/pre&gt;
&lt;h3&gt;Angular2 Decorator's order&lt;/h3&gt;
&lt;p&gt;Now, following code will break, you have to put AppComponent under decorator @Component, that's the way angular2 will recorgize the AppComponent.&lt;/p&gt;
&lt;pre class="language-javascript"&gt;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: `
    &amp;lt;h1&amp;gt;{{title}}&amp;lt;/h1&amp;gt;
    &amp;lt;h2&amp;gt;{{name.firstname}} man!&amp;lt;/h2&amp;gt;
    &amp;lt;h3&amp;gt;{{name.id}}&amp;lt;/h3&amp;gt;
    &amp;lt;div&amp;gt;
        &amp;lt;label&amp;gt;name: &amp;lt;/label&amp;gt;
        &amp;lt;input [(ngModel)]="name.firstname" placeholder="name"&amp;gt;
    &amp;lt;/div&amp;gt;
    `
})
&lt;/pre&gt;
&lt;h3&gt;Fix&lt;/h3&gt;
&lt;pre class="language-javascript"&gt;import {Component} from '@angular/core';
@Component({
    selector: 'my-app',
    template: `
    &amp;lt;h1&amp;gt;{{title}}&amp;lt;/h1&amp;gt;
    &amp;lt;h2&amp;gt;{{name.firstname}} man!&amp;lt;/h2&amp;gt;
    &amp;lt;h3&amp;gt;{{name.id}}&amp;lt;/h3&amp;gt;
    &amp;lt;div&amp;gt;
        &amp;lt;label&amp;gt;name: &amp;lt;/label&amp;gt;
        &amp;lt;input [(ngModel)]="name.firstname" placeholder="name"&amp;gt;
    &amp;lt;/div&amp;gt;
    `
})
export class AppComponent {
    title = 'hi yo';
    name: Name = {
        id: 1,
        firstname: 'tt'
    };
}
export class Name {
    id: number;
    firstname: string;
}
&lt;/pre&gt;
&lt;h3&gt;404 javascript issue on platform-browser-dynamic.umd.js&lt;/h3&gt;
&lt;p&gt;If you getting this issue, looks like the folder is not correct.&lt;/p&gt;
&lt;pre class="language-javascript"&gt;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(&amp;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)
&lt;/pre&gt;
&lt;h3&gt;Fix&lt;/h3&gt;
&lt;p&gt;Adding 'bundle' here, because that's the location for my .umd.js&lt;/p&gt;
&lt;pre&gt;function packUmd(pkgName) {
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
  }
&lt;/pre&gt;
&lt;h3&gt;Error: ReferenceError: enableProdMode is not defined&lt;/h3&gt;
&lt;pre&gt;(index):17 Error: ReferenceError: enableProdMode is not defined(&amp;hellip;)
&lt;/pre&gt;
&lt;h3&gt;Fix&lt;/h3&gt;
&lt;pre class="language-javascript"&gt;// 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);
&lt;/pre&gt;
</pre>
<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>


Angular2 StackOverflow List


<p>Start doing angular2's tutorial</p>
<pre>
import { Component } from '@angular/core';

export class Name {
	id: number;
	first: string;
}

const NAMES: Name[] = [
  { id: 11, first: 'Mr. Nice' },
  { id: 12, first: 'Narco' },
  { id: 13, first: 'Bombasto' },
  { id: 14, first: 'Celeritas' },
  { id: 15, first: 'Magneta' },
  { id: 16, first: 'RubberMan' },
  { id: 17, first: 'Dynama' },
  { id: 18, first: 'Dr IQ' },
  { id: 19, first: 'Magma' },
  { id: 20, first: 'Tornado' }
];

@Component({
  selector: 'my-app',
  template: `</pre
>
<h6>{{title}}</h6>
<ul>
  <li>{{n.id}}: {{n.first}}</li>
</ul>
<div>
  <h6>{{selectedName.id}}</h6>
  <div><label>name: </label> <input type="text" /></div>
</div>
<pre>
  `,
  styles: [`
	  h6 {
	  	font-size: small;
	  }
	  ul li.selected {
	  	font-size: large;
	  }
  `]
})
export class AppComponent {
  title = 'Awesome';
  names = NAMES;

  onSelect(name: Name) {
  	this.selectedName = name;
  	console.info(name);
  }
}

</pre>


A code snippet about how to use Angular2.

Angular2 - Try angular.io's tutorial


<p>
  <a
    href="https://github.com/AngularClass/angular2-webpack-starter"
    target="_blank"
    >Angular2 Webpack Starter</a
  >&nbsp;is prototype Angular2 application for you to start build application.
  You can reference their Github for the latest information,&nbsp;<a
    href="https://github.com/AngularClass/angular2-webpack-starter"
    target="_blank"
    >https://github.com/AngularClass/angular2-webpack-starter</a
  >.
</p>
<p>
  First you'll need to install or make sure your npm and node is correct
  version, <code>Node &gt;= 5.0 &amp; NPM &gt;= 3</code>
</p>
<h3>Then, you'll need to install <code>webpack</code></h3>
<p>
  You can reference following link for webpack's documentation.&nbsp;<a
    href="https://webpack.github.io/docs/?utm_source=github&amp;utm_medium=readme&amp;utm_campaign=trdr"
    target="_blank"
    >Webpack document</a
  >,&nbsp;<a href="https://www.npmjs.com/package/webpack" target="_blank"
    >webpack npm</a
  >.
</p>
<pre class="language-xml">
npm install -g webpack
</pre>
<p>
  You could also check
  <a target="_blank">webpack-bundle-size-analyzer</a> tool.
</p>
<p>
  Then, following angualr2-webpack-starter's quick start guide to run command.
  Following is the the one I run production mode, you can see the javascript
  bundle become much more smaller now.
</p>
<p>
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_szsm8abny.png"
    alt=""
  />
</p>


Get start with Angular2 with Angular2-webpack-starter

Start Angular2 with Angular2-Webpack-starter


<h2>Get Start angular2 with angualr-cli</h2>
<p>
  There're lots of thing you have to worry about for starting angular2, now
  <code>Angular-CLI</code> is build for this kind of purpose, it's a Prototype
  Angular2 application based on the ember-cli project.
</p>
<p>For this blog's example, I'm using tools as following.</p>
<pre class="language-xml">
node: 6.5.0
os: win32 x64
</pre>
<p>For Angular-CLI, I'm using following version.</p>
<pre class="language-xml">
angular-cli: 1.0.0-beta.10
</pre>
<p>Then, run following to install angular-cli to your environment</p>
<pre class="language-xml">
npm install -g angular-cli
</pre>
<p>
  Now, the first command you'd like to try is <code>ng --help</code>. You would
  able to check the document from github, but thought from the downloaded
  angular-cli code will show the latest document by just type
  <code>ng --help</code>.
</p>
<h4>Following is what <code>ng --help</code> shows by above version</h4>
<pre
  class="language-xml"
  style="height: 400px"
>(node:16908) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please u
pdate it to a more recent version.
Usage: ng <command></command>

Available commands in angular-cli:

ng addon  
  Generates a new folder structure for building an addon, complete with test harness.
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String) (Default: addon)
    aliases: -b 
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: false)
    aliases: -sb
  --skip-git (Boolean) (Default: false)
    aliases: -sg
  --directory (String)
    aliases: -dir 

ng asset-sizes 
  Shows the sizes of your asset files.
  --output-path (Path) (Default: dist/)
    aliases: -o 

ng build 
  Builds your app and places it into the output path (dist/ by default).
  aliases: b
  --environment (String) (Default: development)
    aliases: -e , -dev (--environment=development), -prod (--environment=production)
  --output-path (Path) (Default: dist/)
    aliases: -o 
  --watch (Boolean) (Default: false)
    aliases: -w
  --watcher (String)
  --suppress-sizes (Boolean) (Default: false)

ng destroy  
  Destroys code generated by `generate` command.
  aliases: d
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --pod (Boolean) (Default: false)
    aliases: -p
  --classic (Boolean) (Default: false)
    aliases: -c
  --dummy (Boolean) (Default: false)
    aliases: -dum, -id
  --in-repo-addon (String) (Default: null)
    aliases: --in-repo , -ir 

ng generate  
  Generates new code from blueprints.
  aliases: g
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --pod (Boolean) (Default: false)
    aliases: -p
  --classic (Boolean) (Default: false)
    aliases: -c
  --dummy (Boolean) (Default: false)
    aliases: -dum, -id
  --in-repo-addon (String) (Default: null)
    aliases: --in-repo , -ir 

ng help  
  Outputs the usage instructions for all commands or the provided command
  aliases: h, --help, -h
  --verbose (Boolean) (Default: false)
    aliases: -v
  --json (Boolean) (Default: false)

ng init  
  Creates a new angular-cli project in the current folder.
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String)
    aliases: -b 
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: false)
    aliases: -sb
  --name (String) (Default: )
    aliases: -n 

ng install 
  Installs an angular-cli addon from npm.
  aliases: i

ng new  
  Creates a new directory and runs ng init in it.
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String) (Default: app)
    aliases: -b 
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: false)
    aliases: -sb
  --skip-git (Boolean) (Default: false)
    aliases: -sg
  --directory (String)
    aliases: -dir 

ng serve 
  Builds and serves your app, rebuilding on file changes.
  aliases: server, s
  --port (Number) (Default: 4200)
    aliases: -p 
  --host (String) Listens on all interfaces by default
    aliases: -H 
  --proxy (String)
    aliases: -pr , -pxy 
  --insecure-proxy (Boolean) (Default: false) Set false to proxy self-signed SSL certificates
    aliases: --inspr
  --watcher (String) (Default: events)
    aliases: -w 
  --live-reload (Boolean) (Default: true)
    aliases: -lr
  --live-reload-host (String) Defaults to host
    aliases: -lrh 
  --live-reload-base-url (String) Defaults to baseURL
    aliases: -lrbu 
  --live-reload-port (Number) (Defaults to port number within [49152...65535])
    aliases: -lrp 
  --environment (String) (Default: development)
    aliases: -e , -dev (--environment=development), -prod (--environment=production)
  --output-path (Path) (Default: dist/)
    aliases: -op , -out 
  --ssl (Boolean) (Default: false)
  --ssl-key (String) (Default: ssl/server.key)
  --ssl-cert (String) (Default: ssl/server.crt)

ng test 
  Runs your app's test suite.
  aliases: t
  --environment (String) (Default: test)
    aliases: -e 
  --config-file (String)
    aliases: -c , -cf 
  --server (Boolean) (Default: false)
    aliases: -s
  --host (String)
    aliases: -H 
  --test-port (Number) (Default: 7357) The test port to use when running with --server.
    aliases: -tp 
  --filter (String) A string to filter tests to run
    aliases: -f 
  --module (String) The name of a test module to run
    aliases: -m 
  --watcher (String) (Default: events)
    aliases: -w 
  --launch (String) (Default: false) A comma separated list of browsers to launch for tests.
  --reporter (String) Test reporter to use [tap|dot|xunit] (default: tap)
    aliases: -r 
  --silent (Boolean) (Default: false) Suppress any output except for the test report
  --test-page (String) Test page to invoke
  --path (Path) Reuse an existing build at given path.
  --query (String) A query string to append to the test page URL.

ng version 
  outputs angular-cli version
  aliases: v, --version, -v
  --verbose (Boolean) (Default: false)


Available commands from ng2:
ng new 
  Creates a new directory and runs ng init in it.
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String) (Default: ng2)
    aliases: -b 
  --link-cli (Boolean) (Default: false)
    aliases: -lc
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: true)
    aliases: -sb
  --skip-git (Boolean) (Default: false)
    aliases: -sg
  --directory (String)
    aliases: -dir 
  --source-dir (String) (Default: src)
    aliases: -sd 
  --style (String) (Default: css)
  --prefix (String) (Default: app)
    aliases: -p 
  --mobile (Boolean) (Default: false)

ng generate  
  Generates new code from blueprints.
  aliases: g
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --pod (Boolean) (Default: false)
    aliases: -p
  --classic (Boolean) (Default: false)
    aliases: -c
  --dummy (Boolean) (Default: false)
    aliases: -dum, -id
  --in-repo-addon (String) (Default: null)
    aliases: --in-repo , -ir 

ng init  
  Creates a new angular-cli project in the current folder.
  aliases: i
  --dry-run (Boolean) (Default: false)
    aliases: -d
  --verbose (Boolean) (Default: false)
    aliases: -v
  --blueprint (String)
    aliases: -b 
  --link-cli (Boolean) (Default: false)
    aliases: -lc
  --skip-npm (Boolean) (Default: false)
    aliases: -sn
  --skip-bower (Boolean) (Default: true)
    aliases: -sb
  --name (String) (Default: )
    aliases: -n 
  --source-dir (String) (Default: src)
    aliases: -sd 
  --style (String) (Default: css)
  --prefix (String) (Default: app)
    aliases: -p 
  --mobile (Boolean) (Default: false)

ng test 
  Runs your app's test suite.
  aliases: t
  --watch (Boolean) (Default: true)
    aliases: -w
  --browsers (String)
  --colors (Boolean)
  --log-level (String)
  --port (Number)
  --reporters (String)
  --build (Boolean) (Default: true)

ng e2e
  Run e2e tests in existing project

ng lint
  Lints code in existing project

ng version 
  outputs angular-cli version
  aliases: v, --version, -v
  --verbose (Boolean) (Default: false)

ng completion
  Adds autocomplete functionality to `ng` commands and subcommands

ng doc 
  Opens the official Angular documentation for a given keyword.

ng make-this-awesome

ng set 
  Set a value in the configuration.
  --global (Boolean) (Default: false)
    aliases: -g

ng get
  Get a value from the configuration.
</pre>
<p>
  To actually create prototype angular2 application you'll need to type
  following command.
</p>
<pre class="language-xml">
ng new PROJECT_NAME
cd PROJECT_NAME
ng serve
</pre>
<h4>Following is example when use Angular-CLI to create a project</h4>
<pre class="language-xml" style="height: 600px">
PS C:\Test&gt; cd a_cli
PS C:\Test\a_cli&gt; ng new cl
installing ng2
  create .clang-format
  create .editorconfig
  create src\app\cli-1.component.css
  create src\app\cli-1.component.html
  create src\app\cli-1.component.spec.ts
  create src\app\cli-1.component.ts
  create src\app\environment.ts
  create src\app\index.ts
  create src\app\shared\index.ts
  create src\favicon.ico
  create src\icon.png
  create src\index.html
  create src\main.ts
  create src\manifest.webapp
  create src\system-config.ts
  create src\tsconfig.json
  create src\typings.d.ts
  create angular-cli-build.js
  create angular-cli.json
  create config\environment.dev.ts
  create config\environment.js
  create config\environment.prod.ts
  create config\karma-test-shim.js
  create config\karma.conf.js
  create config\protractor.conf.js
  create e2e\app.e2e.ts
  create e2e\app.po.ts
  create e2e\tsconfig.json
  create e2e\typings.d.ts
  create .gitignore
  create package.json
  create public\.npmignore
  create tslint.json
  create typings.json
Successfully initialized git.
- Installing packages for tooling via npm
├── es6-shim (ambient)
├── angular-protractor (ambient dev)
├── jasmine (ambient dev)
└── selenium-webdriver (ambient dev)

Installed packages for tooling via npm.
</pre>
<h4><code>ng serve</code> to start the site</h4>
<p>
  Following is example when run ng serve to start the site, it's using Broccoli
  but Angular-CLI will move to WebPack.
</p>
<pre class="language-xml">
PS C:\Test\cli_1&gt; ng serve
Livereload server on http://localhost:49152
Serving on http://localhost:4200/

Build successful - 3400ms.

Slowest Trees                                 | Total
----------------------------------------------+-----------
vendor                                        | 2431ms
BroccoliTypeScriptCompiler                    | 705ms

Slowest Trees (cumulative)                    | Total (avg
----------------------------------------------+-----------
vendor (1)                                    | 2431ms
BroccoliTypeScriptCompiler (1)                | 705ms
</pre>
<h4>What shows the browser?</h4>
<h4>What kinds of files will generate for you?</h4>
<p>Try following command, which will generate tree of directory folder.</p>
<pre class="language-xml">
tree /A /F ["directory path"] &gt; tree.txt
</pre>
<p>
  Following files is not include files for <code>node_modules, bowers</code>,
  because it's running Angular-CLI as
  <code>ng new [Project-Name] --skip-npm --skip-bower --skip-git</code>. If you
  run default command <code>ng new [project-name]</code> will include above
  tasks, but sometime depend on your enviroment, it'll take a long time and at
  the end it's because of the permission issue. You could
  <code>npm insall -d</code> to install all dependencies files.
</p>
<pre class="language-xml" style="height: 400px">
|   .editorconfig
|   .gitignore
|   angular-cli-build.js
|   angular-cli.json
|   package.json
|   README.md
|   tslint.json
|   typings.json
|   
+---config
|       environment.dev.ts
|       environment.js
|       environment.prod.ts
|       karma-test-shim.js
|       karma.conf.js
|       protractor.conf.js
|       
// Your unit test(karma) or intergration test(protractor)
+---e2e
|       app.e2e-spec.ts
|       app.po.ts
|       tsconfig.json
|       typings.d.ts
|       
// when run ng build, Angular-CLI will buidl production ready which will set here
+---public
|       .npmignore
|       
// during development, you'll add code here.
\---src
    |   favicon.ico
    |   index.html
    |   main.ts
    |   system-config.ts
    |   tsconfig.json
    |   typings.d.ts
    |   
    \---app
        |   app.component.css
        |   app.component.html
        |   app.component.spec.ts
        |   app.component.ts
        |   environment.ts
        |   index.ts
        |   
        \---shared
                index.ts
</pre>
<h4>Package.json's Angular2 version rc4!?</h4>
<p>
  At this point, 9/1/2016, angular2 is already in rc7, so whey when using
  Angular-CLI is using couple month version behind!? Actually, angular-cli is
  moving to webpack, so you'll have uninstall angular-cli and install the
  webpack version of angular-cli.
</p>
<pre class="language-xml">
npm uninstall -g angular-cli
</pre>
<pre class="language-xml">
npm install -g angular-cli@webpack
</pre>
<p>
  After install the angular-cli's webpack version, run the project command to
  create prototype again.
</p>
<pre class="language-xml">
ng new [project-name] --skip-npm --skip-bower --skip-git
</pre>
<p>
  Then run this comannd to generate directory tree,
  <code>tree /a /f "myfolder" &gt; tree.txt</code>
</p>
<pre class="language-xml" style="height: 400px">
|   .gitignore
|   angular-cli.json
|   karma.conf.js
|   package.json
|   protractor.conf.js
|   README.md
|   tree.txt
|   tslint.json
|   
+---e2e
|       app.e2e-spec.ts
|       app.po.ts
|       tsconfig.json
|       
\---src
    |   favicon.ico
    |   index.html
    |   main.ts
    |   polyfills.ts
    |   styles.css
    |   test.ts
    |   tsconfig.json
    |   typings.d.ts
    |   
    +---app
    |   |   app.component.css
    |   |   app.component.html
    |   |   app.component.spec.ts
    |   |   app.component.ts
    |   |   app.module.ts
    |   |   index.ts
    |   |   
    |   \---shared
    |           index.ts
    |           
    \---environments
            environment.prod.ts
            environment.ts
</pre>
<h4>Angular2 is using <code>2.0.0.-rc7</code> now!</h4>
<pre class="language-xml" style="height: 400px">
{
  "name": "ali-006",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.7",
    "@angular/compiler": "2.0.0-rc.7",
    "@angular/core": "2.0.0-rc.7",
    "@angular/forms": "2.0.0-rc.7",
    "@angular/http": "2.0.0-rc.7",
    "@angular/platform-browser": "2.0.0-rc.7",
    "@angular/platform-browser-dynamic": "2.0.0-rc.7",
    "@angular/router": "3.0.0-rc.3",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.21"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.11-webpack.9-4",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.5",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}
</pre>
<h3>Issues:</h3>
<p>
  One of my biggest issue is when I use Angular-CLI@webpack the vendor
  javascript size is 2.7MB, that's killing, I think Angular-CLI will fix or
  maybe just document is not good I'm not able to set up it correctly by running
  the webpack.
</p>
<p>
  <img
    class="img-responsive"
    src="https://d1p0mp3f1fx0hz.cloudfront.net/_vsdpc4kd6.png"
    alt=""
  />
</p>
<p>
  If you're concern of this production assests bundle issue, you can use
  following <a target="_blank">Angular2-webpack-starter</a>
</p>


This blog will show how to get start with Angular2 with angular-cli.

Start Angular2 with angular-cli


<h3>A resource to Learn Angular2</h3>
<p>
  This blog just provides a few links to learn Angular2, I create this page just
  want to memo a few links of how to learn Angular2.
</p>
<ul>
  <li>
    <a
      href="https://github.com/timjacobi/angular2-education"
      target="_blank"
      rel="noopener"
      >BadAssList - Resource of Learn Angular2</a
    >
  </li>
  <ul>
    <li>A very helpful list to learn Angular2</li>
  </ul>
  <li>
    <a
      href="https://books.ninja-squad.com/public/samples/Become_a_ninja_with_Angular2_sample.pdf"
      target="_blank"
      rel="noopener"
      >PDF - Become a Ninja with Angular2</a
    >
  </li>
  <li>
    <a href="https://angular.io/" target="_blank" rel="noopener"
      >Info - Angular2 Home Page</a
    >
  </li>
  <ul>
    <li>Go to the Angular2 home page to check what's the main features.</li>
  </ul>
  <li>
    <a
      href="https://angular.io/docs/ts/latest/quickstart.html"
      target="_blank"
      rel="noopener"
      >Try 1 - Angular2 Quick Start</a
    >
  </li>
  <ul>
    <li>
      Use this Angular.io's quick start to learn how to build a Hello world by
      Angular2.
    </li>
  </ul>
  <li>
    <a
      href="https://angular.io/docs/ts/latest/tutorial/"
      target="_blank"
      rel="noopener"
      >Try 2 - Angular2 Tutorial</a
    >
  </li>
  <ul>
    <li>
      This Angular2.io's tutorial will learn how to use angular2 Components,
      services, Routing, and HTTP.
    </li>
  </ul>
  <li>
    <a
      href="https://angular.io/docs/ts/latest/guide/"
      target="_blank"
      rel="noopener"
      >Document - Angular.io's guide</a
    >
  </li>
  <ul>
    <li>A basic guide for the developer</li>
  </ul>
  <li>
    <a
      href="https://angular.io/docs/ts/latest/guide/attribute-directives.html"
      target="_blank"
      rel="noopener"
      >Document - Angular.io's developer guide</a
    >
  </li>
  <ul>
    <li>More information about Angular2.</li>
  </ul>
  <li>
    <a
      href="https://angular.io/docs/ts/latest/api/"
      target="_blank"
      rel="noopener"
      >Angular2 API</a
    >
  </li>
  <li>
    <a
      href="https://github.com/x6doooo/generator-gulp-angular2"
      target="_blank"
      rel="noopener"
      >Example - generator-gulp-angular2</a
    >
  </li>
  <ul>
    <li>Yeoman generator's angular2 version</li>
  </ul>
  <li>
    <a
      href="https://github.com/angular/quickstart/blob/master/README.md"
      target="_blank"
      rel="noopener"
      >Angular.io quick start's github location</a
    >
  </li>
  <li>
    <a
      href="http://whatpixel.com/learn-angular2-from-scratch/"
      target="_blank"
      rel="noopener"
      >Blog - how to learn Angular2</a
    >
  </li>
  <li>
    <a
      href="http://thenewstack.io/google-preps-angular-2-final-release/"
      target="_blank"
      rel="noopener"
      >News - Positive - Google Preps Angular 2 for Final Release</a
    >
  </li>
  <li>
    <a
      href="https://www.youtube.com/watch?v=_-CD_5YhJTA"
      target="_blank"
      rel="noopener"
      >Video - Angular2 Tutorial for beginner</a
    >
  </li>
  <li>
    <a
      href="https://egghead.io/courses/angular-2-fundamentals"
      target="_blank"
      rel="noopener"
      >Video - egghead - Learn Angular2</a
    >
  </li>
  <li>
    <a
      href="https://www.pluralsight.com/courses/angular-2-first-look"
      target="_blank"
      rel="noopener"
      >Video - Angular 2 : First Look</a
    >
  </li>
  <li>
    <a
      href="https://www.pluralsight.com/courses/angular-2-getting-started"
      target="_blank"
      rel="noopener"
      >Video - Angular 2 - Getting Started</a
    >
  </li>
  <li>
    <a
      href="https://www.pluralsight.com/courses/play-by-play-angular-typescript-john-papa-christopher-martin"
      target="_blank"
      rel="noopener"
      >Video - Play by Play</a
    >
  </li>
  <li>
    <a href="http://learnangular2.com/" target="_blank" rel="noopener"
      >site - learnangular2.com</a
    >
  </li>
  <ul>
    <li>a website build for people who want to learn angular2</li>
  </ul>
  <li>
    <a href="http://www.angular2.com/" target="_blank" rel="noopener"
      >site - angular2.com</a
    >
  </li>
  <li>
    <a href="https://nodejs.org/en/" target="_blank" rel="noopener"
      >Tool - Node.js - You need this to try angular2</a
    >
  </li>
  <li>
    <a
      href="https://www.typescriptlang.org/index.html"
      target="_blank"
      rel="noopener"
      >Tool - TypeScript - Angular2 could build with TypeScript</a
    >
  </li>
  <li>
    <a
      href="https://www.pluralsight.com/search?q=angular+2&amp;categories=all"
      target="_blank"
      rel="noopener"
      >Course - Paid to learn Angular2 - Pluralsight</a
    >
  </li>
  <ul>
    <li>If you pay you can take the angular2 course here.</li>
  </ul>
</ul>
<h3>Resource for other languages/tools relative to Angular2</h3>
<ol>
  <li>
    <a href="https://www.typescriptlang.org/" target="_blank" rel="noopener"
      >TypeScript</a
    >
  </li>
  <li>
    <a
      href="https://github.com/systemjs/systemjs/blob/master/docs/config-api.md"
      target="_blank"
      rel="noopener"
      >SystemJs</a
    >
  </li>
</ol>
<h3>Environment for start doing Anglar2</h3>
<ul>
  <li>node.js</li>
  <ul>
    <li>http://nodejs.org/</li>
    <li>version: 4.x is better stable than 5.x (7/72016 point)</li>
  </ul>
  <li>npm</li>
  <ul>
    <li>version: 2.x, will come along when installing node.js</li>
  </ul>
  <li>IDE</li>
  <ul>
    <li>Visual Studio Code</li>
    <ul>
      <li>
        <a
          href="https://code.visualstudio.com/Docs/?dv=win"
          target="_blank"
          rel="noopener"
          >https://code.visualstudio.com/Docs/?dv=win</a
        >
      </li>
    </ul>
    <li>Cloud9</li>
    <li>WebStorm</li>
    <li>Sublime</li>
  </ul>
  <li>Git</li>
  <ul>
    <li>
      <a href="http://git-scm.com/" target="_blank" rel="noopener"
        >http://git-scm.com/</a
      >
    </li>
  </ul>
</ul>
<h3>Angular2 Tags</h3>
<ul>
  <li>TypeScript</li>
  <li>SystemJs</li>
  <li>Single Responsibility Principle</li>
  <li>dash case (aka kebab-case)</li>
  <li>decorator</li>
  <li>Injectable</li>
  <li>@Injectable()</li>
  <li>Dependency Injection</li>
  <li>Promise</li>
  <li>ngOnInt</li>
  <li>Angular Lifecycle Hook</li>
  <li>Pipes</li>
  <li>interpolation</li>
  <li>one-way data binding</li>
  <li>two-way data binding</li>
  <li>Multi-line template strings</li>
  <li>template strings feature in ES2015</li>
  <li>double curly braces of interpolation</li>
  <li>ngFor</li>
  <ul>
    <li>build-in directive</li>
  </ul>
  <li>ngIf&nbsp;</li>
  <li>Structural Directives</li>
  <li>property binding</li>
  <li>Attribute Directives</li>
  <li>@Input()</li>
  <li>angular2 promise service</li>
  <li>Async Angular Service with Promises</li>
  <li>ES2015 Promises</li>
  <li>ES2015 arrow function</li>
  <li>Angular2 base href</li>
  <li>component-relative paths</li>
  <li>parent component property binding</li>
  <li>ActivateRoute</li>
  <li>ngOnDesroy</li>
  <li>angular2's subscribe -&gt; params.subscribe</li>
  <li>angular2's unsubscribe -&gt; this.sub.unsubscribe();</li>
  <li>Javascript(+) operator</li>
  <li>CanDeactivate guard</li>
  <li>routerLinkActive</li>
</ul>
<h3>Angular2 Coding Styles</h3>
<ul>
  <li>service</li>
  <ul>
    <li>.service</li>
    <li>MyGreateService -&gt; my-greate.service.ts</li>
  </ul>
</ul>
<h3>How to Learn Angular2</h3>
<ol>
  <li>Angular2</li>
  <ul>
    <li>
      First, learn basic angular2, tutorial, read documentation, build a
      prototype.
    </li>
  </ul>
  <li>TypeScript</li>
  <ul>
    <li>Learn basic with angular2, also dive deep into TypeScript</li>
  </ul>
  <li>Visual Studio Code</li>
  <li>SystemJs</li>
  <li>Npm</li>
  <li>Grunt/Gulp</li>
  <li>Visual Studio</li>
  <ul>
    <li>
      How to integrate the above technology into visual studio, let's say,
      ASP.NET MVC, MVC5
    </li>
  </ul>
</ol>
<h3>Question for Angular2</h3>
<ol>
  <li>When should we use Angular2?</li>
  <li>Angular2 for SEO?</li>
  <li>Why need to unsubscribe()? -&gt; this.sub.unsubscribe();</li>
  <li>
    The angular component could add CSS URLs, but how to work with SASS or
    minified CSS?
  </li>
</ol>


Category Angular2