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”中

<TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>

.....

<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
    <TypeScriptRemoveComments>false</TypeScriptRemoveComments>
    <TypeScriptSourceMap>true</TypeScriptSourceMap>
    <TypeScriptModuleKind>commonjs</TypeScriptModuleKind>
    <TypeScriptTarget>ES6</TypeScriptTarget>
    <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
  </PropertyGroup>
  <PropertyGroup Condition="'$(Configuration)' == 'Release'">
    <TypeScriptRemoveComments>true</TypeScriptRemoveComments>
    <TypeScriptSourceMap>false</TypeScriptSourceMap>
    <TypeScriptExperimentalDecorators>true</TypeScriptExperimentalDecorators>
  </PropertyGroup>

......

 第四步，npm install

最后开始我们的第一个angular2 应用吧，下面是个例子

Html

<html>

  <head>

    <title>Angular 2 QuickStart</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    

    <!-- 1. Load libraries -->

     <!-- Polyfill(s) for older browsers -->

    <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>

    <!-- 2. Configure SystemJS -->

    <script src="systemjs.config.js"></script>

    <script>

      System.import('app').catch(function(err){ console.error(err); });

    </script>

  </head>

  <!-- 3. Display the application -->

  <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: '<h1>My First Angular 2 App</h1>'

})

export class AppComponent { }

到此，编译运行一切正常。。。。感谢Lantern，不然这些问题我是无法到国外站点去检查的，也无法在csdn上记录发布，万恶的墙啊！