Download as PDF, PPTX
![Multiple project ng g application [プロジェクト名] ng g component [コンポネント名] –project [プロジェクト名] ng g library [ライブラリ名] ng serve –project [プロジェクト名] ng new [プロジェクト名] 普通にプロジェクトを作る プロジェクトを追加する ライブラリプロジェクトを追加する プロジェクトを指定して実行する プロジェクトを指定してコンポーネントを追加する](https://image.slidesharecdn.com/ng-japankponda-180616071049/75/Angular-18-2048.jpg)
Angularで新サービス作って学んだこととか
- 1.
- 2. 自己紹介 本田 克己 @kponda おんせん♨ と からあげの国から来ました 電子工作から年末調整まで事務員の心に寄り添うプログラマ 今月は標準報酬月額の算定基礎届や労働保険の年度更新、会社の決算処理などあって事務作業が山積みです 2,3年前まではAndroidアプリ、iPhoneアプリを主に作ってました Webの開発を主にしていたのはサーバサイドJava (EJB3あたり）
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10. 困ったことなど 1. ページ切替時にページの先頭が表示されない 2. 複数アプリケーションを効率よく管理したい 3.新しいバージョンをデプロイしたその後に 4. やっぱり必要だったサーバサイドレンダリング 5. 本当は怖かったサーバサイドレンダリング
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. Angular CLIで複数アプリ Angular CLIのmultipleappsの設定で1つのプロジェクト内で複数アプリを操作できる Angular CLI 1.xまでは Angular CLI 6では multiple projectsとなります。
- 18. Multiple project ng gapplication [プロジェクト名] ng g component [コンポネント名] –project [プロジェクト名] ng g library [ライブラリ名] ng serve –project [プロジェクト名] ng new [プロジェクト名] 普通にプロジェクトを作る プロジェクトを追加する ライブラリプロジェクトを追加する プロジェクトを指定して実行する プロジェクトを指定してコンポーネントを追加する
- 19. 複数アプリのデプロイ https://example.com/app1 https://example.com/app2 https://example.com/app3 パスを分ける --base-href オプション ng serve–base-href /app1/ ng build –base-href /app1/ 開発・実行 ビルド時
- 20. 複数プロジェクトを同時に動かしたい ポート(4200)をプロジェクト毎に変えて動かす ng serve –base-hrefapp1 ng serve –project app2 –base-href app2 –port 4201 ng serve –project app3 –base-href app3 –port 4202 package.json に同時に動かすスクリプト追加
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. Angular Universal Starter AngularUniversal Starterをベースにすると圧倒的に楽 https://github.com/angular/universal-starter npm run build:ssr && npm run serve:ssr
- 30.
- 31.
- 32.
- 33. 本当は恐ろしかったSSR URLを直接指定したら 404 NotFound 他のページから遷移した時は表示される ブラウザでリロードかけても 404 Not Found
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.