Angular2 + Webpack项目搭建Demo

本文将从头开始编写实际的代码来完成一个angular2的demo。

题外话是其实angular2官网的快速开始项目已经很酷炫了，但其侧重快速二字，只够拿来练习玩耍，倒是github上确实已经有了一些不错的angular2-starter。

1. 安装必要的node环境与npm

1 // Angular 2
2 import {
3   enableDebugTools,
4   disableDebugTools
5 } from '@angular/platform-browser';
6 import {
7   ApplicationRef,
8   enableProdMode
9 } from '@angular/core';
10 // Environment Providers
11 let PROVIDERS: any[] = [
12   // common env directives
13 ];
14
15 // Angular debug tools in the dev console
16 // https://github.com/angular/angular/blob/86405345b781a9dc2438c0fbe3e9409245647019/TOOLS_JS.md 17 let _decorateModuleRef = <T>(value: T): T => { return value; };
18
19 if ('production' === ENV) {
20   enableProdMode();
21
22   // Production
23   _decorateModuleRef = (modRef: any) => {
24     disableDebugTools();
25
26     return modRef;
27   };
28
29   PROVIDERS = [
30     ...PROVIDERS,
31     // custom providers in production
32   ];
33
34 } else {
35
36   _decorateModuleRef = (modRef: any) => {
37     const appRef = modRef.injector.get(ApplicationRef);
38     const cmpRef = appRef.components[0];
39
40     let _ng = (<any> window).ng;
41     enableDebugTools(cmpRef);
42     (<any> window).ng.probe = _ng.probe;
43     (<any> window).ng.coreTokens = _ng.coreTokens;
44     return modRef;
45   };
46
47   // Development
48   PROVIDERS = [
49     ...PROVIDERS,
50     // custom providers in development
51   ];
52
53 }
54
55 export const decorateModuleRef = _decorateModuleRef;
56
57 export const ENV_PROVIDERS = [
58   ...PROVIDERS
59 ];

environment.ts
下面是现在的文件目录结构：



现在只要先运行 npm install 安装好所有npm包，然后运行指令 npm run server:dev 就可以运行起第一个angular2项目了！



后记：

此angular2 demo的配置有使用到AngularClass的hmr插件，并且搭建的目的以学习与总结为主，实际开发中还需要配置单元测试等东西，可以直接查看AngularClass的angular-webpack-starter开源项目，其给出了一套非常完善的angular2启动项目，值得花费一些时间来看懂。

最后给出此demo的github地址：

https://github.com/yitimo/angular2-demo-yitim