npmを使ってAngularプロジェクトの雛形を作ってみる
npmを使って、Angularプロジェクトの雛形を作ってみます。
フォルダ構成は以下のとおりです。
今回の目標は、ブラウザに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
を取り込み、起動時に実行します。
結果、以下のように表示されます。