Table of Contents
angular2を勉強をしたいので、いい雛形がないか調べていたら、githubによさそうなリポジトリがあったのでプロジェクトを作成してみることにしました。
moizKachwala/Angular2-express-mongoose-gulp-node-typescript
GitHub - moizKachwala/Angular2-express-mongoose-gulp-node-typescript: AngularJS 2 (Updated to 4.2.0) Mean Stack application which uses Angular2, Gulp, Express, Node, MongoDB (Mongoose) with Repository Pattern Business Layer
AngularJS 2 (Updated to 4.2.0) Mean Stack application which uses Angular2, Gulp, Express, Node, MongoDB (Mongoose) with ...
開発環境はDockerで作る。
プロジェクトディレクトリ:ng-app
コンテナのアプリのディレクトリ:/app/ng-app
dockerのネットワークを作成しておく:docker network create shared
dockdrのコンテナを作る
docker-compose.yml
version: '2'
services:
# ------------------------------------------
# app
# ------------------------------------------
ng-app:
container_name: ng-app
#build: ./
image: node:8.3.0
ports:
- "3000:3000"
tty: true
working_dir: /app/ng-app
volumes:
- ./:/app/ng-app
- /app/ng-app/node_modules
# ------------------------------------------
# mongodb
# ------------------------------------------
mongo:
image: mongo
ports:
- "27017:27017"
container_name: mongodb
restart: always
privileged: true
# ------------------------------------------
# 共有ネットワーク
# ------------------------------------------
networks:
default:
external:
name: shared
README.mdに記載されているとおり、最新のnode8.3.0のコンテナで、mongodbも立ち上げ
グローバルパッケージをインストール
npm install ts-node -g
npm install typescript-node -g
npmインストール、ビルド、デプロイ
npm install
npm run build
npm run deploy
確認
http://192.168.99.100:3000/
問題なく、起動できたが「Add New Hero」ボタンをおしてフォームに入力して「Save」ボタンを押してもデータが追加されない。
リポジトリを作ってるひとのアプリも保存されない。
Application Error
あとで、ソースをみて修正しよう。
確認
構成ではgulp-nodemoをつかってるので、修正したらビルドして、再起動するか確認、以下のファイルを少し修正して保存
/ng-app/server/src/server.ts
エラー出てる
コンパイルのときエラーになっているみたい。
/app/ng-app/node_modules/map-stream/index.js:84
[0] return mapper.call(null, input, function(err, data){
[0] ^
[0] TypeError: Cannot read property 'findConfiguration' of undefined
[0] at /app/ng-app/node_modules/gulp-tslint/index.js:100:63
[0] at wrappedMapper (/app/ng-app/node_modules/map-stream/index.js:84:19)
[0] at Stream.stream.write (/app/ng-app/node_modules/map-stream/index.js:96:21)
[0] at write (/app/ng-app/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:623:24)
[0] at flow (/app/ng-app/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:632:7)
[0] at DestroyableTransform.pipeOnReadable (/app/ng-app/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:664:5)
[0] at emitNone (events.js:105:13)
[0] at DestroyableTransform.emit (events.js:207:7)
[0] at emitReadable_ (/app/ng-app/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:448:10)
[0] at emitReadable (/app/ng-app/node_modules/vinyl-fs/node_modules/readable-stream/lib/_stream_readable.js:444:5)
[0] gulp watch exited with code 1
--> Sending SIGTERM to other processes..
[1] node ./dist/server/bin/www exited with code null
npm info lifecycle angular2-express-mongo@1.0.0~deploy: Failed to exec deploy script
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! angular2-express-mongo@1.0.0 deploy: `concurrently --kill-others "gulp watch" "node ./dist/server/bin/www"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular2-express-mongo@1.0.0 deploy script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2017-08-11T10_31_40_361Z-debug.log
## compileでエラーになる問題1
Cannot read property 'findConfiguration' of undefined ?? Issue #117 ?? panuhorsmalahti/gulp-tslint
Hi, I just updated tslint and It is failing to lint gulp-tslint version: 8.0.0 tslint version: 5.2.0 Operating system: W...
によるとtypingsの5.1.0をインストールするいいみたい
npm install --save-dev tslint@5.1.0
コンパイルしてみる
npm run compile
またエラー
[12:32:34] Finished 'tslint' after 637 ms
[12:32:34] Starting 'compile'...
client/app/services/hero.service.ts(77,16): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
/app/ng-app/node_modules/@angular/common/src/directives/ng_class.d.ts(48,34): error TS2304: Cannot find name 'Set'.
/app/ng-app/node_modules/@angular/compiler/src/aot/compiler.d.ts(55,32): error TS2304: Cannot find name 'Map'.
/app/ng-app/node_modules/@angular/compiler/src/compile_metadata.d.ts(370,20): error TS2304: Cannot find name 'Set'.
/app/ng-app/node_modules/@angular/compiler/src/compile_metadata.d.ts(372,28): error TS2304: Cannot find name 'Set'.
/app/ng-app/node_modules/@angular/compiler/src/compile_metadata.d.ts(374,15): error TS2304: Cannot find name 'Set'.
/app/ng-app/node_modules/@angular/compiler/src/compile_metadata.d.ts(376,23): error TS2304: Cannot find name 'Set'.
/app/ng-app/node_modules/@angular/compiler/src/compile_metadata.d.ts(378,17): error TS2304: Cannot find name 'Set'.
/app/ng-app/node_modules/@angular/compiler/src/compile_metadata.d.ts(380,25): error TS2304: Cannot find name 'Set'.
/app/ng-app/node_modules/@angular/compiler/src/output/output_ast.d.ts(458,63): error TS2304: Cannot find name 'Set'.
/app/ng-app/node_modules/@angular/core/src/change_detection/differs/default_iterable_differ.d.ts(28,32): error TS2304: Cannot find name 'Iterable'.
/app/ng-app/node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(24,16): error TS2304: Cannot find name 'Map'.
/app/ng-app/node_modules/@angular/core/src/change_detection/differs/default_keyvalue_differ.d.ts(32,16): error TS2304: Cannot find name 'Map'.
/app/ng-app/node_modules/@angular/core/src/change_detection/differs/iterable_differs.d.ts(15,48): error TS2304: Cannot find name 'Iterable'.
/app/ng-app/node_modules/@angular/core/src/change_detection/differs/keyvalue_differs.d.ts(23,18): error TS2304: Cannot find name 'Map'.
/app/ng-app/node_modules/@angular/core/src/di/reflective_provider.d.ts(87,123): error TS2304: Cannot find name 'Map'.
/app/ng-app/node_modules/@angular/core/src/di/reflective_provider.d.ts(87,165): error TS2304: Cannot find name 'Map'.
/app/ng-app/node_modules/@angular/http/src/headers.d.ts(52,71): error TS2304: Cannot find name 'Map'.
/app/ng-app/node_modules/@angular/http/src/url_search_params.d.ts(46,16): error TS2304: Cannot find name 'Map'.
/app/ng-app/node_modules/@angular/platform-browser/src/browser/browser_adapter.d.ts(79,33): error TS2304: Cannot find name 'Map'.
/app/ng-app/node_modules/@angular/platform-browser/src/dom/dom_adapter.d.ts(97,42): error TS2304: Cannot find name 'Map'.
/app/ng-app/node_modules/@angular/platform-browser/src/dom/shared_styles_host.d.ts(11,30): error TS2304: Cannot find name 'Set'.
/app/ng-app/node_modules/@angular/platform-browser/src/dom/shared_styles_host.d.ts(22,30): error TS2304: Cannot find name 'Set'.
/app/ng-app/node_modules/@angular/router/src/router_outlet_context.d.ts(42,28): error TS2304: Cannot find name 'Map'.
/app/ng-app/node_modules/@angular/router/src/router_outlet_context.d.ts(43,34): error TS2304: Cannot find name 'Map'.
/app/ng-app/node_modules/rxjs/Observable.d.ts(68,60): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
/app/ng-app/node_modules/rxjs/operator/toPromise.d.ts(3,79): error TS2693: 'Promise' only refers to a type, but is being used as a value here.
[12:32:38] TypeScript: 27 semantic errors
[12:32:38] TypeScript: emit succeeded (with errors)
[12:32:38] Finished 'compile' after 4.17 s
## compileでエラーになる問題2
error TS2304: Cannot find name 'Promise' · Issue #63 · angular/quickstart
Hi. I would like to build a golang+angular2 web stack skeleton. In this way I've cloned this repo to use as angular2 ske...
このissueのコメントによるとes6にすると解消されるみたい
とりあえず/ng-app/tsconfig.jsonのtargetをes6してみる
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
コンパイルしてみる
npm run compile
今度は大丈夫みたい。
ブラウザはリロードされない。次回そのあたり調べてみる