Angular2 RC1 在vs2013下的环境搭建
在前面的文章中已经讲到了angular2的环境搭建，但前面使用的版本是beta 17，本文讲的是angular RC1的环境搭建，和beta 17略有不同。
首先要在vs2013下新建typescript的html项目，然后在项目下配置angular环境，主要用到package.json配置angular，typings.json用来配置typescript编译环境，最后使用systemjs.config.js用来动态加载所需得angular2组件，配置文件如下：
Package.json
{
"name": "angular2-quickstart2",
"version": "1.0.0",
"scripts": {
"start": "tsc && 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.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"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.11",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^1.0.4"
}
}
Typings.json
{
"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"
}
}
systemjs.config
/**
* 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: 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);
第二步：设置vs2013环境，选择typescirpt生成项，选择commonJS，同时选择ES6，这个很重要不然编译出现大量错误，我为此花了大量时间在这里。
第三步：卸载项目，编辑项目文件，添加下面的语句在“debug”中
.....
<PropertyGroup Condition="'$(Configuration)' == 'Debug'"> <TypeScriptRemoveComments>falseTypeScriptRemoveComments> <TypeScriptSourceMap>trueTypeScriptSourceMap> <TypeScriptModuleKind>commonjsTypeScriptModuleKind> <TypeScriptTarget>ES6TypeScriptTarget> <TypeScriptExperimentalDecorators>trueTypeScriptExperimentalDecorators> PropertyGroup> <PropertyGroup Condition="'$(Configuration)' == 'Release'"> <TypeScriptRemoveComments>trueTypeScriptRemoveComments> <TypeScriptSourceMap>falseTypeScriptSourceMap> <TypeScriptExperimentalDecorators>trueTypeScriptExperimentalDecorators> PropertyGroup>
......
第四步，npm install
最后开始我们的第一个angular2 应用吧，下面是个例子
Html
<html>
<head>
<title>Angular 2 QuickStarttitle>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="node_modules/core-js/client/shim.min.js">script>
<script src="node_modules/zone.js/dist/zone.js">script>
<script src="node_modules/reflect-metadata/Reflect.js">script>
<script src="node_modules/systemjs/dist/system.src.js">script>
<script src="systemjs.config.js">script>
<script>
System.import('app').catch(function(err){ console.error(err); });
script>
head>
<body>
<my-app>Loading...my-app>
body>
html>
Main.ts
import { bootstrap } from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
template: 'My First Angular 2 App
'
})
export class AppComponent { }
到此，编译运行一切正常。。。。感谢Lantern，不然这些问题我是无法到国外站点去检查的，也无法在csdn上记录发布，万恶的墙啊！
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！