能否在CLI工作区将多项目懒加载到统一主应用？

Absolutely! You can absolutely lazy-load independently built Angular CLI apps (as modules) into a host shell application, and your desired directory structure is totally workable. Let's walk through exactly how to make this happen, including the correct routing syntax, configuration tweaks, and best practices for multi-team collaboration:

Core Feasibility & Correct Routing Syntax #

Your initial idea is solid, but Angular's lazy-loading syntax has evolved—the old string-based format (../projects/app1/src/app.module#AppModule) is deprecated as of Angular 8. The modern, official recommended approach uses dynamic import() syntax, which aligns with ES standards, supports tree-shaking, and provides better type safety.

Here's the correct routing configuration for your host app:

const routes: Routes = [
  // Host app's own routes
  { path: '', component: HomeComponent },
  // Lazy-load App1
  { 
    path: 'app1', 
    loadChildren: () => import('../projects/app1/src/app/app.module')
      .then(module => module.AppModule)
  },
  // Repeat for other sub-apps
  { 
    path: 'app2', 
    loadChildren: () => import('../projects/app2/src/app/app.module')
      .then(module => module.AppModule)
  }
];

Critical TypeScript Configuration #

To make sure TypeScript can resolve paths to your sub-apps, update your host app's tsconfig.json:

{
  "compilerOptions": {
    "baseUrl": "./",
    // Optional: Use aliases for cleaner imports
    "paths": {
      "@app1/*": ["../projects/app1/src/app/*"],
      "@app2/*": ["../projects/app2/src/app/*"]
    }
  },
  "include": [
    "src/**/*",
    "../projects/**/*" // Include all sub-app source files
  ]
}

With aliases, your routing can be simplified to:

loadChildren: () => import('@app1/app.module').then(m => m.AppModule)

Multi-Team Collaboration: Directory Structure & Workflow #

Your ideal directory structure is fully achievable, with each sub-app as its own Git repo and the host app as a separate shell:

projects/
├── app1/          # Independent Git repo, maintained by Team A
├── app2/          # Independent Git repo, maintained by Team B
├── ...
└── app/           # Host shell, maintained by core team
    ├── app.module.ts
    ├── app.component.ts
    └── ...

Collaboration Best Practices #

• Each sub-app team owns their codebase: they can develop, test, and iterate independently without impacting the host app or other sub-apps.
• The host app team only manages routing, shared UI components, and core shell logic. When a sub-app updates, just pull the latest code from that sub-app's repo.
• Enforce consistent Angular versions across all apps to avoid dependency conflicts. You can either use a monorepo tool like Nx/Lerna to manage shared dependencies, or simply agree on strict version ranges for all Angular packages.

Experience Optimization Tips #

Preloading for Smoother Transitions #

To eliminate wait times when switching between sub-apps, use Angular's preloading strategies. The simplest option is to preload all lazy-loaded modules during idle time:

import { PreloadAllModules } from '@angular/router';

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules
  })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

For more control, you can create a custom preloading strategy—for example, only preload modules users have visited before, or skip preloading on slow networks.

Avoid Duplicate Dependency Bundling #

If multiple sub-apps share dependencies (like Angular core, or third-party libraries), configure Webpack to extract common code into shared chunks. Update your host app's angular.json build options:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // Other config...
    "vendorChunk": true,
    "commonChunk": true
  }
}

Common Pitfalls & Fixes #

1. Route Conflicts: Ensure each sub-app's root route uses path: '' (since the host app already defines the app1/app2 prefix). This prevents sub-app routes from overriding the host app's routes.
2. "Cannot Find Module" Errors: Double-check your tsconfig.json's include and paths settings—make sure sub-app paths are correctly included.
3. Missing Static Assets: If sub-app images/fonts fail to load, add their asset paths to the host app's angular.json:

"assets": [
  "src/favicon.ico",
  "src/assets",
  "../projects/app1/src/assets",
  "../projects/app2/src/assets"
]

内容的提问来源于stack exchange，提问作者dasfmi