Angular: Tạo nhiều project trong cùng 1 workspace

Giả sử bạn có 2 project Angular, muốn tạo cùng 1 folder Angular thì phải làm thế nào?

Lúc này chúng ta sử dụng khái niệm workspace

Workspace

Workspace trong Angular là một thư mục gốc chứa tất cả các project liên quan đến ứng dụng của bạn. Nó bao gồm các tệp cấu hình và các thư mục chứa mã nguồn của các project. Bạn có thể sử dụng workspace để quản lý các project liên quan đến ứng dụng của mình và chia sẻ các thư viện giữa các project khác nhau.

Cấu trúc

📁 my-workspace
    └──… (workspace-wide config files)
    └──📂 projects (generated applications and libraries)
        ├──📂 my-first-app --(an explicitly generated application)
            ├──📂 src --(source and support files for application)
                ├──*.*
        ├──📂 my-lib --(an explicitly generated application)
            ├──📂 src --(source and support files for application)
                ├──*.*

Đầu tiên, chúng ta tạo một workspace trống:

ng new <workspace-name>  --create-application=false

ví dụ:

ng new nhat-ky-hoc-tap --create-application=false

"--create-application=false" sẽ tạo một workspace mà không bao gồm một ứng dụng Angular mặc định.

Sau đó, bạn có thể thêm các project vào workspace bằng cách chạy lệnh

ng generate application <project-name> 

Ví dụ:

cd nhat-ky-hoc-tap
ng generate application book-admin --prefix=bo

Git

Thêm folder .angular vào gitignore

/.angular

Setup từng project

Mặc định, khi tạo project Angular, port là 4200. Để tùy chỉnh sang port khác, bạn mở file angular.json, thêm đoạn config sau

"projects": {
    "my-project": {
        ... rest of project config omitted
        "architect": {
            "serve": {
                "options": {
                    "port": 4201    //-- add your custom port number here      
                }
            }
        }
    }
}

Setup routing

Các ứng dụng trong workspace của bạn sẽ có thể chia sẻ một chức năng routing chung hoặc có thể có routing riêng biệt. Để thiết lập routing, bạn có thể sử dụng Angular Router.

Di chuyển vào thư mục của từng ứng dụng:

Import router

// src/app/app.module.ts
import { RouterModule, Routes } from '@angular/router'

//..

const routes: Routes = []

@NgModule({
  //...
  ,imports: [
    //..
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Thêm out-routlet vào file app.component.ts // src/app/app.component.ts

<router-outlet></router-outlet>

Để tạo mới 1 component, bạn gõ như sau:

ng generate component <component-name> --project <project-name>

Tham khảo

https://www.samjulien.com/add-routing-existing-angular-project