プログラマーの調べ物

プログラマーが調べ物をするときに役に立つサイトを作ります。

npmを使ってAngularプロジェクトの雛形を作ってみる

npmを使って、Angularプロジェクトの雛形を作ってみます。

フォルダ構成は以下のとおりです。

f:id:sho322:20170330134828j:plain

今回の目標は、ブラウザにHello Angular2!と表示させるところまでです。

npm init -yコマンドで、まずはpackage.jsonの雛形を作ります。

package.jsonを以下のように編集します。

{
  "name": "angular-seed",
  "version": "1.0.0",
  "description": "An initial npm-managed project",
  "private": true,
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "live-server"
  },
  "keywords": [],
  "author": "test",
  "license": "ISC",
  "dependencies": {
    "@angular/common": "^2.4.0",
    "@angular/compiler": "^2.4.0",
    "@angular/core": "^2.4.0",
    "@angular/forms": "^2.4.0",
    "@angular/http": "^2.4.0",
    "@angular/platform-browser": "^2.4.0",
    "@angular/platform-browser-dynamic": "^2.4.0",
    "@angular/router": "^3.4.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.7.6",
    "systemjs": "0.19.37"
  },
  "devDependencies": {
    "live-server": "0.8.2",
    "typescript": "^2.0.0"
  }
}

以下の部分は、npm startコマンドでlive-serverが起動するように設定したものです。 事前にnpm install live-server -yでlive-serverをインストールしておく必要があります。

"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "live-server"
},

package.jsonを用意したら、npm installを実行します。 プロジェクトフォルダ直下にnode_modulesフォルダができます。

次に、index.htmlファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <title>Angular seed</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src="node_modules/typescript/lib/typescript.js"></script>
  <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/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>
<app>Loading...</app>
</body>
</html>

<script src="systemjs.config.js"></script>の部分で、SystemJSの設定ファイルを読み込んでいます。

System.import('app').catch(function(err){ console.error(err);})では、main.tsを読み込んでいます。

次に、systemjs.config.jsを作成します。

System.config({
    transpiler: 'typescript',
    typescriptOptions: {emitDecoratorMetadata: true},
    map: {
      '@angular': 'node_modules/@angular',
      'rxjs'    : 'node_modules/rxjs'
    },
    paths: {
      'node_modules/@angular/*': 'node_modules/@angular/*/bundles'
    },
    meta: {
      '@angular/*': {'format': 'cjs'}
    },
    packages: {
      'app'                              : {main: 'main', defaultExtension: 'ts'},
      'rxjs'                             : {main: 'Rx'},
      '@angular/core'                    : {main: 'core.umd.min.js'},
      '@angular/common'                  : {main: 'common.umd.min.js'},
      '@angular/compiler'                : {main: 'compiler.umd.min.js'},
      '@angular/platform-browser'        : {main: 'platform-browser.umd.min.js'},
      '@angular/platform-browser-dynamic': {main: 'platform-browser-dynamic.umd.min.js'}
    }
});

ここの部分では、main.tsとappをマッピングしています。 'app' : {main: 'main', defaultExtension: 'ts'}, マッピングの記載をすることで、System.import('app')のように、マッピング名でimportすることができるようになります。

次に、tsconfig.jsonを作成します。 これは、tscコンパイラのオプションを設定するものです。

{
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "experimentalDecorators": true,
    "noImplicitAny": true
  }
}

次に、アプリケーションコードを書いていきます。 app/以下にファイルを置きます。

app.component.tsです。

import {Component} from '@angular/core';

@Component({
    selector: 'app',
    template: `<h1>Hello {{name}}!</h1>`
})
export class AppComponent {
    name: string;

    constructor() {
        this.name = 'Angular2';
    }
}

app.component.tsはコンポーネントを定義するためのファイルです。 次に、app.module.tsを作成します。 こちらは、コンポーネントにincludeするモジュールの宣言を書きます。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

@NgModule({
    imports: [ BrowserModule ],
    declarations: [AppComponent],
    bootstrap: [ AppComponent]
})

export class AppModule {}

最後に、起点となるmain.tsを作成します。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';


platformBrowserDynamic().bootstrapModule(AppModule);

AppModuleとしてapp.moduleを取り込み、起動時に実行します。

結果、以下のように表示されます。

f:id:sho322:20170330134846j:plain