CDNプロバイダの https://unpkg.com を利用するとAngular2の各バージョンが取得可能です。
@angular/coreパッケージを例にすると、URLの指定方法は以下の通りとなります。
| # | URL | Summary |
|---|---|---|
| 1 | https://unpkg.com/@angular/core | 最新バージョンを取得 |
| 2 | https://unpkg.com/@angular/core@2.2.4 | バージョンを指定して取得 |
| 3 | https://unpkg.com/@angular/core@2.2.4/ | ブラウザでファイル一覧を見れる (画面右上からバージョンの切り替えも可能) |
動作確認環境
angular@2.3.0を指定したサンプルをPlunkerに用意しました。
サンプルコード
index.html
<!DOCTYPE html>
<html>
<head>
<base href="." />
<title>angular2 playground</title>
<!-- [ Load: Environment Library ] -->
<script src="https://unpkg.com/zone.js@0.7.2/dist/zone.js"></script>
<script src="https://unpkg.com/zone.js@0.7.2/dist/long-stack-trace-zone.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script>
<script src="https://unpkg.com/systemjs@0.19.31/dist/system.js"></script>
<!-- [ Load: Angular2 Library ] -->
<script>
System.config({
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true,
},
paths: {
// 'cdn'の定義
'cdn:': 'https://unpkg.com/',
},
map: {
'typescript': 'cdn:typescript@2.1.4',
'rxjs' : 'cdn:rxjs@5.0.1',
'@angular/core' : 'cdn:@angular/core@2.3.0',
'@angular/common' : 'cdn:@angular/common@2.3.0',
'@angular/compiler' : 'cdn:@angular/compiler@2.3.0',
'@angular/platform-browser' : 'cdn:@angular/platform-browser@2.3.0',
'@angular/platform-browser-dynamic': 'cdn:@angular/platform-browser-dynamic@2.3.0',
'@angular/http' : 'cdn:@angular/http@2.3.0',
'@angular/router' : 'cdn:@angular/router@3.3.0',
'@angular/forms' : 'cdn:@angular/forms@2.3.0',
},
packages: {
app: { defaultExtension: 'ts' },
rxjs: { defaultExtension: 'js' },
},
});
System.import('app/main.ts').catch(console.error.bind(console));
</script>
</head>
<body>
<my-app>loading...</my-app>
</body>
</html>
app/mail.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { BrowserModule } from '@angular/platform-browser';
import { Component, NgModule } from '@angular/core';
/**
* Main Application Component
*/
@Component({
selector: 'my-app',
template: `
<div>
<h2>Hello</h2>
</div>
`,
})
export class App
{
}
/**
* Application Module
*/
@NgModule({
imports: [ BrowserModule ],
declarations: [ App ],
bootstrap: [ App ],
})
export class AppModule
{
}
platformBrowserDynamic().bootstrapModule(AppModule);