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文件，内容从在线例子上拷贝下来即可。