在基于angular/cli搭建的angular2项目中集成systemjs加载器
2017-04-06 14:46
489 查看
在学习angular2教程时,里面的“英雄编辑器”实例项目在模拟服务(内存 Web API)中获取和保存数据时用到了In-Memory Web API,那么怎么将In-Memory Web API添加到systemjs加载器中呢?
1.打开package.json,添加依赖包:
2.通过命令行窗口,执行命令来添加本项目的systemjs包
依赖添加完后,在生成的node_modules文件夹下就多出了一个systemjs的依赖包
3.在src目录下添加systemjs.config.js文件,内容如下,为模块加载器提供了该到哪里查找应用模块的信息,并注册了所有必备的依赖包。
1.打开package.json,添加依赖包:
"angular-in-memory-web-api": "^0.3.1", "systemjs": "0.19.40",
2.通过命令行窗口,执行命令来添加本项目的systemjs包
$ cd AngularDemo3 $ npm install
依赖添加完后,在生成的node_modules文件夹下就多出了一个systemjs的依赖包
3.在src目录下添加systemjs.config.js文件,内容如下,为模块加载器提供了该到哪里查找应用模块的信息,并注册了所有必备的依赖包。
/** * System configuration for Angular samples * Adjust as necessary for your application needs. */ (function (global) { System.config({ paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { // our app is within the app folder app: 'app', // angular bundles '@angular/core': 'npm:@angular/core/bundles/core.umd.js', '@angular/common': 'npm:@angular/common/bundles/common.umd.js', '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', '@angular/http': 'npm:@angular/http/bundles/http.umd.js', '@angular/router': 'npm:@angular/router/bundles/router.umd.js', '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', // other libraries 'rxjs': 'npm:rxjs', 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api', }, // packages tells the System loader how to load when no filename and/or no extension packages: { app: { main: './main.js', defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, 'angular-in-memory-web-api': { main: './index.js', defaultExtension: 'js' } } }); })(this);4.按照“英雄编辑器”实例教程在app.module.ts中导入相应模块使用即可。
相关文章推荐
- 如何在ASP.NET 5上搭建基于TypeScript的Angular2项目
- 使用angular-cli构建angular2项目时遇到的问题及解决方案
- 基于vue-cli vue-router搭建底部导航栏移动前端项目
- 最新基于yeoman+angular前端项目的开发环境搭建
- Angular-cli项目搭建
- 基于vue-cli网上商城项目实战开发——搭建一个完整的SPA项目开发框架(一)
- (jenkins)hudson平台搭建android项目持续化集成以及基于NativeDriver的UI自动化测试环境
- Angular2使用Angular-CLI快速搭建工程(二)
- angular2项目下载后运行以及报错,The "@angular/compiler-cli" package was not properly installed
- Angular02 通过angular-cli来搭建web前端项目
- 详解基于Vue-cli搭建的项目如何和后台交互
- (jenkins)hudson平台搭建android项目持续化集成以及基于NativeDriver的UI自动化测试环境
- Angular2-使用Angular-CLI快速搭建工程(二)
- Angular通过angular-cli来搭建web前端项目的方法
- vue基于vue-cli的项目搭建及部分依赖的添加
- angular之Angular-cli搭建通讯系统项目
- spring+struts+hibernate集成环境(基于maven项目搭建)
- (jenkins)hudson平台搭建android项目持续化集成以及基于NativeDriver的自动化测试环境
- Angular01 利用grunt搭建自动web前端开发环境、利用angular-cli搭建web前端项目