angular2教程例子配置文件

angular2教程例子配置文件

学习angular2官方文档的《路由与导航》一节时下载的例子缺少配置文件,npm start无法运行程序，在router目录下添加如下两个文件即可。

1. bs-config.json

{
  "server": {
    "baseDir": "src",
    "routes": {
      "/node_modules": "node_modules"
    }
  }
}

2. typings.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  }
}

添加完毕后文件目录结构应该是下面这样：

C:.
│  bs-config.json
│  package.json
│  typings.json
│  
└─src
    │  index.html
    │  main.ts
    │  systemjs-angular-loader.js
    │  systemjs.config.js
    │  tsconfig.json
    │  
    └─app
        │  animations.ts
        │  app-routing.module.ts
        │  app.component.ts
        │  app.module.ts
        │  auth-guard.service.ts
        │  auth.service.ts
        │  can-deactivate-guard.service.ts
        │  compose-message.component.html
        │  compose-message.component.ts
        │  dialog.service.ts
        │  login-routing.module.ts
        │  login.component.ts
        │  not-found.component.ts
        │  selective-preloading-strategy.ts
        │  
        ├─admin
        │      admin-dashboard.component.ts
        │      admin-routing.module.ts
        │      admin.component.ts
        │      admin.module.ts
        │      manage-crises.component.ts
        │      manage-heroes.component.ts
        │      
        ├─crisis-center
        │      crisis-center-home.component.ts
        │      crisis-center-routing.module.ts
        │      crisis-center.component.ts
        │      crisis-center.module.ts
        │      crisis-detail-resolver.service.ts
        │      crisis-detail.component.ts
        │      crisis-list.component.ts
        │      crisis.service.ts
        │      
        └─heroes
                hero-detail.component.ts
                hero-list.component.ts
                hero.service.ts
                heroes-routing.module.ts
                heroes.module.ts

3. npm install

4. npm start

若是npm start失败，还可能需要安装下面两个库：
npm install phantomjs-prebuilt@2.1.14
npm install @angular/animations@4.0.3
根据命令行提示缺少的库进行安装。
npm start 运行即可

5. 虽然工程可以运行，但是你发现样式似乎不对，在src目录下添加styles.css文件，内容从在线例子上拷贝下来即可。