node、typescript、angular2、express、mongoose、gulpを使ってアプリをつくりたい その1

angular2を勉強をしたいので、いい雛形がないか調べていたら、githubによさそうなリポジトリがあったのでプロジェクトを作成してみることにしました。

 

moizKachwala/Angular2-express-mongoose-gulp-node-typescript

https://github.com/moizKachwala/Angular2-express-mongoose-gulp-node-typescript

開発環境は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」ボタンを押してもデータが追加されない。

リポジトリを作ってるひとのアプリも保存されない。

https://angular2-express-mongoose.herokuapp.com/#/heroes

あとで、ソースをみて修正しよう。

確認

構成では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 [email protected]~deploy: Failed to exec deploy script npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] deploy: `concurrently --kill-others "gulp watch" "node ./dist/server/bin/www"` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the [email protected] 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

https://github.com/panuhorsmalahti/gulp-tslint/issues/117

によるとtypingsの5.1.0をインストールするいいみたい

npm install --save-dev [email protected]

コンパイルしてみる

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

https://github.com/angular/quickstart/issues/63

この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

今度は大丈夫みたい。

ブラウザはリロードされない。次回そのあたり調べてみる