upgrade angular 2 to RC1 solution ( from beta.17 )

在 2016/05/02 angular2 就已發佈至 RC 0

緊接著在 2016/05/02 又發佈了 RC1 

升級的過程一直不順利，

看來無法跟之前一樣，package 版本的數字改一改就好，

要乖乖看文件了！

終於把問題解決了，大致要處理的部分如下：

• package module rename
• typescript typing
• systemjs.config.js

package module rename

先來看看 change log，在 RC0 做了重大變更，

node_module 資料夾下，angular2 資料夾換成 ＠angular 當然底下的路徑都換了，
所以要將以下 package 路徑做替換，

詳情如下：

To import various symbols please adjust the paths in the following way:

• angular2/core -> @angular/core
• angular2/compiler -> @angular/compiler
• angular2/common -> @angular/common
• angular2/platform/browser -> @angular/platform-browser (applications with precompiled templates) + @angular/platform-browser-dynamic (applications that compile templates on the fly)
• angular2/platform/server -> @angular/platform-server
• angular2/testing -> @angular/core/testing (it/describe/..) + @angular/compiler/testing (TestComponentBuilder) + @angular/platform-browser/testing
• angular2/upgrade -> @angular/upgrade
• angular2/http -> @angular/http
• angular2/router -> @angular/router-deprecated (snapshot of the component router from beta.17 for backwards compatibility)
• new package: @angular/router - component router with several breaking changes

typescript typing
接著設定 typescript typing ( 參考 )：
在專案根目錄新增 typings.json 檔案，內容：

{
  "ambientDependencies": {
    "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654",
    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438"
  }
}

設定 package.json

在 Visual Studio 2015 對 package.json 儲存後，
即會在專案根目錄下，建立 typeings 資料夾，

在 root componment 加入 typings/browser/ambient/es6-shim/index.d.ts reference

systemjs.config.js (參考)

html 頁面使用方式，

<!-- 1. Load libraries -->
<script src="~/node_modules/es6-shim/es6-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 type="text/javascript">
    window.filterSystemConfig = function (config) {
        config.baseURL = '@Url.Content("~/")';
    }
</script>

<!-- 2. Configure SystemJS -->
<script src="~/systemjs.config.js"></script>
<script type="text/javascript">
    System.import('PublishScenario')
        .catch(function (err) { console.error(err); });
</script>

其中指定 config.baseURL  為 網站的根目錄

<script type="text/javascript">
    window.filterSystemConfig = function (config) {
        config.baseURL = '@Url.Content("~/")';
    }
</script>

systemjs.config.js 的內容如下：

(function (global) {

    // map tells the System loader where to look for things
    var map = {
        'PublishScenario': 'Scripts/angular-app/PublishScenario', // 'dist',
        'rxjs': 'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular': 'node_modules/@angular',
        'ng2-bs3-modal': 'node_modules/ng2-bs3-modal'
    };

    // packages tells the System loader how to load when no filename
    // and/or no extension
    var packages = {
        'PublishScenario': {
           
            main: 'main.js',
            defaultExtension: 'js'
        },
        'rxjs': { defaultExtension: 'js' },
        'ng2-bs3-modal': { main: 'ng2-bs3-modal.js', defaultExtension: 'js' },
        'angular2-in-memory-web-api': { defaultExtension: 'js' },
    };

    var packageNames = [
      '@angular/common',
      '@angular/compiler',
      '@angular/core',
      '@angular/http',
      '@angular/platform-browser',
      '@angular/platform-browser-dynamic',
      '@angular/router',
      '@angular/router-deprecated',
      '@angular/testing',
      '@angular/upgrade',
    ];

    // add package entries for angular packages in the form 
    // '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function (pkgName) {
        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });

    var config = {
        map: map,
        packages: packages
    }

    // filterSystemConfig - index.html's chance to modify 
    // config before we register it.
    if (global.filterSystemConfig) { global.filterSystemConfig(config); }

    System.config(config);

})(this);

以上是查看官方文件後，進行的設定，若仍有問題，就到官網去看看吧！