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 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);
このTypeScriptをトランスパイルしつつbundle.jsにする
こういうwebpack.config.jsを書いたけど、どうせエラー出る
- そもそもwebpackインストールしてないから
.ts解決できないから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
エラー無しだ！！やったー！！
エラー: bundle.js:4658Uncaught reflect-metadata shim is required when using class decorators
で、ブラウザで確認
なるほど？
% 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!!
やっと動いた。
雑感
- Angular2 on TypeScript界隈の、エコシステムWIP感やばすぎるでしょ
- 安定したころに「じゃあstable版に上げましょうか」みたいなタスク発生するのつらいので、さすがに仕事では使いたくない
- Angular1 on TypeScriptとかでじゅうぶんなのでは？もちろんプロジェクトの規模によるけど
- 個人開発でやろうとしたのはReact（非reduct）-> Angular2 x TypeScriptなんだけど、わりと心折れそうです
DRYな備忘録として
Thanks to U+Driving your business ideas to digital reality | Usertech
