[纪录] Angular+Nest新专案建立，踩坑分享

＊资料夹结构＊

― [project name] └ frontend   └ web   └ mobile(pwa) └ backend

会这样命名跟(推1)有关。

＊技术选择＊

Angular + ngrxApolloNest.js + GraphQLRxjsMongoDB

最放会放到 Google App Engine

原本想过用一个 Angular专案，
Web, Mobile用 Module 并 rouer + lazy loading
这样能最大化共用 node_modules, ngrx ...
但考虑到案子的发展与维护，
第一次尝试以 两个 Angular专案包一个Nest，
踩了坑来写点纪录。

---

如果 Angular与 Nest 是一对一的情况：

到 ./backend/src/main.ts ，
提供 Angular build完以后的静态档案，如下：

...  const app = await NestFactory.create<NestExpressApplication>(AppModule);  app.useStaticAssets(join(__dirname, '../../frontend/dist/frontend'));...

用 nest cli 产生 middleware，如下(参1)：

$ nest g mi frontend

到 ./backend/src/frontend.middleware.ts(参2)，

...  use(req: any, res: any, next: () => void) {     res.sendFile(path.resolve('../frontend/dist/frontend/index.html'))  }...

到 ./backend/src/app.module.ts注册(参3)，

...export class AppModule implements NestModule {  configure(consumer: MiddlewareConsumer) {    consumer      .apply(FrontendMiddleware)      .forRoutes(        {           path: '/**', // For all routes          method: RequestMethod.ALL, // For all methods        },      );  }}

用 VS Code(免费)开 检视 > 终端机(Terminal)，
开始专案的开发。

// terminal for Nest$ cd backend$ npm run start:dev// 新增 Terminal window// terminal for Angular$ cd frontend$ ng build --watch

---

如果 Angular与 Nest 是多对一的情况：

到 ./backend/src/main.ts ，
提供 Angular build完以后的静态档案，
这次要加个 prefix作为前缀，如下(参4)：

...  const app = await NestFactory.create<NestExpressApplication>(AppModule);  app.useStaticAssets(join(__dirname, '../../frontend/web/dist/web'),{prefix:'/web'});  app.useStaticAssets(join(__dirname, '../../frontend/mobile/dist/mobile'),{prefix:'/mobile'});...

(同上)：

到 ./backend/src/frontend.middleware.ts，
根据 request的 url切换载入的专案切入点。

...  use(req: any, res: any, next: () => void) {      if (req['url'].includes('web'))         res.sendFile(path.resolve('../frontend/web/dist/web/index.html'))      else if (req['url'].includes('mobile'))         res.sendFile(path.resolve('../frontend/mobile/dist/mobile/index.html'))  }...

(同上)

5. 这步很重要！试了很久！
到 ./frontend/web/src/index.html，
及 ./frontend/mobile/src/index.html，

... // 找到base tag // 把"绝对路径"改成"相对路径" // 把 href="/" 改成 href="./" 如下： <base href="./">...

这时要注意
在 Angular routes使用上有几个要注意的点，
假设有个网址：http://localhost:3000/order/3
那在 app-routing.module.ts中原本应该如下：

...const routes: Routes = [  { path: 'order/:id', component: OrderComponent },];...

因为 index.html被改成相对路径加上 nest用的 prefix，
所以我们把上面的程式码稍微改一下，如下：

...const routes: Routes = [  { path: ':id', component: OrderComponent },];...

你可以这样理解，

...const routes: Routes = [  { path: '', component: AppComponent, childern:[      { path: ':id', component: OrderComponent },  ]},];...

用 VS Code(免费)开 Terminal，
开始专案的开发。

// terminal for Nest$ cd backend$ npm run start:dev// 新增 Terminal window// 分割 Terminal window// terminal for Angular$ cd frontend/web$ ng build --watch$ cd frontend/mobile$ ng build --watch

---

(2019/09/24)
专案刚开始，
日后踩坑了还记得的话再回来补，
有任何问题或是说错的地方，
欢迎大神们多多指教。

---

特别感谢：
CK大大： https://www.facebook.com/CKNotepad/
(提供思路解决多 client对一 server )

VS Code插件推荐:
(1) Material Icon Theme:https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

参考资料：
(1) nest cli: https://docs.nestjs.com/cli/usages
(2) nest middleware: https://docs.nestjs.com/middleware
(3) nest MVC: https://docs.nestjs.com/techniques/mvc
(4) mutiple static with Nest: https://stackoverflow.com/questions/54475802/setup-two-different-static-folders-with-nest
(5) redirect Angular routes in Nest: https://stackoverflow.com/questions/54838260/how-to-redirect-all-routes-to-index-html-angular-in-nest-js/54840961#54840961