Example: embedding an Angular project as a source-code child app

🎯 Goal: Get a quick feel for Angular 20 child app integration

⏱️ Total time: 30 minutes for three scenarios

🚀 Scenario 1: Hello World (10 minutes)

Goal: One page, so you can see the integration working right away.

Step 1: Download and run

The demo project uses Angular 20 + the Angular CLI.

git clone https://github.com/lovrabet-ai/sub-app-angular-demo
npm install
ng serve

Step 2: Build and deploy

ng build
# 上传dist文件夹到CDN，获得地址：https://your-cdn.com/demo/

Step 3: Configure the menu in Lovrabet

菜单名称：Hello World
菜单标识：hello-world
菜单路径：/hello-world
菜单类型：子应用页面
应用入口：https://your-cdn.com/demo/
页面路径：/
状态：启用

✅ Success: Clicking the menu opens the Hello World page.

---

📊 Scenario 2: Data display (15 minutes)

Goal: Add a data API and a chart on top of Hello World.

Step 1: Switch branches

git checkout fetch
npm install
ng serve

Step 2: Build and deploy

ng build --configuration=production
# 上传到CDN：https://your-cdn.com/demo-fetch/

Step 3: Configure two menus

Menu 1: Hello World page

菜单名称：Hello World
菜单标识：hello-world-v2
菜单路径：/hello-world-v2
应用入口：https://your-cdn.com/demo-fetch/
页面路径：/
状态：启用

Menu 2: Data chart page

菜单名称：数据图表
菜单标识：data-chart
菜单路径：/data-chart
应用入口：https://your-cdn.com/demo-fetch/
页面路径：/chart
API权限：✅ 开启
状态：启用

✅ Success: Both menus open correctly, and the chart page shows data.

---

🔧 Scenario 3: Adapting an existing legacy project (5 minutes)

Goal: Understand how the integration works under the hood.

Key technical points

1. Angular 20 micro-frontend lifecycle

// main.ts 核心代码
export async function mount(props: any) {
// 启动Angular应用
appRef = await bootstrapApplication(AppComponent, appConfig);
}

export async function unmount() {
// 销毁Angular应用
if (appRef) {
  appRef.destroy();
}
}

2. Route configuration

// app.routes.ts
export const routes: Routes = [
{ path: '', component: HelloWorldComponent },    // 对应菜单页面路径 "/"
{ path: 'chart', component: ChartComponent }     // 对应菜单页面路径 "/chart"
];

3. API calls

// 使用Angular 20的新HTTP客户端
private http = inject(HttpClient);

getData() {
return this.http.get('https://api.example.com/data');
}

4. Build configuration

// angular.json 关键配置
"configurations": {
"production": {
  "outputHashing": "none",    // 不使用hash，便于CDN缓存
  "vendorChunk": false        // 打包成单个文件
}
}

How it works

1. App startup: the platform calls mount() to boot the Angular app.
2. Route matching: the menu's "page path" maps to an Angular route path.
3. App teardown: switching menus calls unmount() to destroy the app.
4. Style isolation: Angular scopes component styles automatically, so styles never clash.

---

🎯 Key configuration mapping

菜单配置中的"页面路径" ←→ Angular路由中的path
/                      ←→ { path: '', component: HelloWorldComponent }
/chart                 ←→ { path: 'chart', component: ChartComponent }

In one sentence: the menu's page path is simply the Angular route path, and the platform takes care of loading and unloading the app for you.

---

❓ FAQ

Q: Why do I need two menus?

A: Configure one menu per page in your Angular app — each menu maps to one route.

Q: When should API permissions be enabled?

A: Whenever the page calls backend APIs.

Q: What happens if the page path is configured incorrectly?

A: Clicking the menu shows a blank page or a 404 error.

---

✅ Completion checklist

• [ ] Scenario 1: the Hello World page renders correctly
• [ ] Scenario 2: both menus open correctly
• [ ] Scenario 3: you understand how it works

Congratulations — you now have the core skills for Angular 20 child app integration.