読者です 読者をやめる 読者になる 読者になる

DRYな備忘録

Don't Repeat Yourself.

Angular2 on TypeScriptの最小構成をつくってHello Worldするまでのみちのり

2017/04/24 追記

参考

以下原文

Angular2のquickstart、たしかにその通りにやれば動くんだけど、開発用サーバもwebpack dev serverで提供してたり、謎の依存を勝手にインストールしてたりしてて、たとえば既存のプロジェクトにAngular2を段階的導入をしたいときとか、jsだけさくっとほしいときとか、余計なものが多すぎる感があるし、必要最低限の挙動を学ぶにはブラックボックスすぎる。

ということで、Angular2とTypeScriptのjsプロジェクトをつくる最小構成を手探りでつくってみた。

HTML

ReactでいうReactDOM.renderとの対応を意識して、まず、こういうHTMLを書いた。

<html>
<head>
  <meta charset="utf-8">
</head>
<body>
<h1>てすてす</h1>
<app>
  ここを、AngularがReplaceする
</app>
<!-- このScriptが<app></app>を置換する、はず... -->
<script type="text/javascript" src="/public/js/bundle.js"></script>
</body>
</html>

bundle.jsになる前のTypeScriptを書いてみる

とりあえず、all.tsという名前で

import {bootstrap} from '@angular/platform-browser-dynamic';
import {Component} from '@angular/core';

@Component({
  selector: 'app',
  template: '<h2>Hello, {{name}}! Welcome to Angular2</h2>'
})
class App {
  name: string = 'otiai10'
}

bootstrap(App); // たぶんこれがReactDOM.renderてきなやつ

このTypeScriptをトランスパイルしつつbundle.jsにする

こういうwebpack.config.jsを書いたけど、どうせエラー出る

  1. そもそもwebpackインストールしてないから
  2. .ts解決できないから
  3. importしてる@angularとかnode_modulesにないから

そんなこと考えつつ、とりあえず

module.exports = {
  entry: {
    bundle: './client/src/all.ts'
  },
  output: {
    path: 'server/assets/js',
    filename: 'bundle.js'
  }
}

つぎに、npm initとかして適当にpackage.jsonつくってから、webpackをインストール

% npm install --save-dev webpack

で、package.jsonで、

   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "webpack"
   },

で、とりあえずnpm run buildしてみる。エラー出るはず。

エラー: Unexpected character ‘@’. You may need an appropriate loader to handle this file type.

んーなんか直接的ではないけれど、.tsファイルをloadできてないような感じするので、

% npm install --save-dev ts-loader

で、webpack.config.js

   output: {
     path: 'server/assets/js',
     filename: 'bundle.js'
+  },
+  module: {
+    loaders: [
+      {
+        test: /\.ts$/,
+        loader: 'ts-loader'
+      }
+    ]
   }
 }

で、npm run build

エラー: Could not load TypeScript. Try installing with npm install typescript. If TypeScript is installed globally, try using npm link typescript.

オッケーオッケー

% npm install --save-dev typescript

で、npm run build

エラー: TypeError: Path must be a string. Received undefined

んんー?なんだろ。

I’ve seen some weird Node 6 reports so maybe that’s it?

マジかよw

% nvm ls
        v0.12.2
         v5.3.0
         v6.1.0
->       v6.2.0
% nvm use 5.3
Now using node v5.3.0 (npm v3.3.12)

で、rm -rf node_modules && npm install && npm run build

エラー: Cannot find module ‘@angular/platform-browser-dynamic’

やっと予想つきそうなエラーに来た。

% npm install --save-dev @angular/platform-browser-dynamic
chant@3.0.0 /Users/otiai10/proj/go/src/github.com/otiai10/chant
├── UNMET PEER DEPENDENCY @angular/common@^2.0.0-rc.4
├── UNMET PEER DEPENDENCY @angular/compiler@^2.0.0-rc.4
├── UNMET PEER DEPENDENCY @angular/core@^2.0.0-rc.4
├── UNMET PEER DEPENDENCY @angular/platform-browser@^2.0.0-rc.4
└── @angular/platform-browser-dynamic@2.0.0-rc.4

npm WARN EPEERINVALID @angular/platform-browser-dynamic@2.0.0-rc.4 requires a peer of @angular/core@^2.0.0-rc.4 but none was installed.
npm WARN EPEERINVALID @angular/platform-browser-dynamic@2.0.0-rc.4 requires a peer of @angular/common@^2.0.0-rc.4 but none was installed.
npm WARN EPEERINVALID @angular/platform-browser-dynamic@2.0.0-rc.4 requires a peer of @angular/compiler@^2.0.0-rc.4 but none was installed.
npm WARN EPEERINVALID @angular/platform-browser-dynamic@2.0.0-rc.4 requires a peer of @angular/platform-browser@^2.0.0-rc.4 but none was installed.

依存パッケージが無いっていうので、ついでに

% npm install --save-dev @angular/common@^2.0.0-rc.4 @angular/compiler@^2.0.0-rc.4 @angular/core@^2.0.0-rc.4 @angular/platform-browser@^2.0.0-rc.4
chant@3.0.0 /Users/otiai10/proj/go/src/github.com/otiai10/chant
├── @angular/common@2.0.0-rc.4
├── @angular/compiler@2.0.0-rc.4
├── @angular/core@2.0.0-rc.4
├── @angular/platform-browser@2.0.0-rc.4
├── UNMET PEER DEPENDENCY rxjs@5.0.0-beta.6
└── UNMET PEER DEPENDENCY zone.js@^0.6.6

npm WARN EPEERINVALID @angular/core@2.0.0-rc.4 requires a peer of rxjs@5.0.0-beta.6 but none was installed.
npm WARN EPEERINVALID @angular/core@2.0.0-rc.4 requires a peer of zone.js@^0.6.6 but none was installed.

またしても依存パッケージが無いと言われるので、ついでに

% npm install --save-dev rxjs@5.0.0-beta.6 zone.js@^0.6.6
chant@3.0.0 /Users/otiai10/proj/go/src/github.com/otiai10/chant
├── rxjs@5.0.0-beta.6
└── zone.js@0.6.12

お、全部入った? で、とりあえず npm run build

エラー: Cannot find name ‘Map’. Cannot find name ‘Promise’. Cannot find name ‘Set’.

なんか標準のES6のdefinitionを見つけられてない気がするぞ。

% npm install --save-dev typings
% ./node_modules/.bin/typings install dt~es6-shim --save --global
% cat typings.json

で、npm run build

エラー: Experimental support for decorators is a feature that is subject to change in a future release. Set the ‘experimentalDecorators’ option to remove this warning.

ああそうですか、的な感じで、tscのエラーなので、tsconfigに以下を追加

 1 file changed, 1 insertion(+)

diff --git a/tsconfig.json b/tsconfig.json
index e30c6ef..6cece18 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "experimentalDecorators": true,
     "target": "es5"
   },
   "files": [

で、npm run build

f:id:otiai10:20160725005212p:plain

エラー無しだ!!やったー!!

エラー: bundle.js:4658Uncaught reflect-metadata shim is required when using class decorators

で、ブラウザで確認

f:id:otiai10:20160725005432p:plain

なるほど?

% npm install --save-dev zone.js reflect-metadata

エラー: Exported external package typings file ‘**/node_modules/zone.js/dist/zone.js.d.ts’ is not a module. Please contact the package author to update the package definition.

まじかよ

% rm ./node_modules/zone.js/dist/zone.js.d.ts
% ./node_modules/.bin/typings install zone.js --save --global

Hello, Angular2 on TypeScript!!

やっと動いた。

f:id:otiai10:20160725011542p:plain

雑感

  • Angular2 on TypeScript界隈の、エコシステムWIP感やばすぎるでしょ
  • 安定したころに「じゃあstable版に上げましょうか」みたいなタスク発生するのつらいので、さすがに仕事では使いたくない
  • Angular1 on TypeScriptとかでじゅうぶんなのでは?もちろんプロジェクトの規模によるけど
  • 個人開発でやろうとしたのはReact(非reduct)-> Angular2 x TypeScriptなんだけど、わりと心折れそうです

DRYな備忘録として

f:id:otiai10:20160716213843j:plain

f:id:otiai10:20160716214711j:plain

Thanks to U+Driving your business ideas to digital reality | Usertech