如何基于同一代码库构建多Angular项目实现自适应设计？

Hey there! This is a super common scenario when extending an Angular app to support multiple platforms while reusing core logic—great call focusing on reusing your existing services, models, directives, and pipes instead of rewriting everything. Let’s walk through the most practical approaches to set up shared code across your desktop and mobile Angular projects:

Angular’s built-in workspace system (or tools like Nx for more advanced monorepo features) is perfect here. It lets you house both your desktop and mobile apps in a single codebase, plus a shared library for all the reusable code. Here’s how to set it up:

• Create a new workspace without an initial app:

  ng new my-app-platforms --create-application false
  

• Generate a shared library for your core reusable code (services, models, directives, pipes):

  ng generate library shared-core
  

• Move your existing shared code into projects/shared-core/src/lib/. Make sure to update the library’s public-api.ts to export all the components, services, and models you want to expose to the desktop and mobile apps.
• Generate your desktop and mobile apps:

  ng generate application desktop-app
  ng generate application mobile-app
  

• Import the shared library into both apps. For example, in desktop-app/src/app/app.module.ts:

  import { SharedCoreModule } from '@my-app-platforms/shared-core';
  
  @NgModule({
    imports: [
      // ... other imports
      SharedCoreModule
    ]
  })
  export class AppModule { }
  

Bonus: Handling Device Routing/Redirection #

To serve the right app based on User-Agent, you have a couple options:

• Client-side check: Add a root component or guard in a lightweight entry app that detects navigator.userAgent, then redirects to /desktop or /mobile (where each app is deployed under its own path).
• Server-side routing: Configure your web server (like Nginx, Apache, or Firebase Hosting) to inspect the User-Agent header and serve the corresponding app build.

If you prefer keeping your desktop and mobile apps in separate Git repos, you can package your shared code as a standalone Angular library and import it into both projects. Here’s how:

• Create a separate Angular library project for your shared code:

  ng new shared-core --create-application false
  ng generate library shared-core
  

• Build the library whenever you update the shared code:

  ng build shared-core
  

• Install the library in your desktop and mobile apps. You can either:
  • Publish it to a private npm registry (like Verdaccio) and install via npm install @your-org/shared-core
  • Use a local link for development: npm link ../shared-core/dist/shared-core

This works, but the monorepo approach is better for day-to-day development since you can edit shared code and test changes in both apps instantly without rebuilding/reinstalling.

You could technically put your shared code in a separate Git repo and add it as a submodule to both desktop and mobile projects. However, this gets messy quickly—managing updates, branch syncing, and local development becomes more cumbersome compared to the monorepo or standalone library approaches. Only use this if you have strict repo separation requirements.

• Keep shared code UI-agnostic: Make sure your shared library only contains business logic, data models, and utility code—avoid any desktop/mobile-specific UI components or styles.
• Use dependency injection for platform-specific logic: If some logic needs to differ between devices, define an abstract interface in the shared library (e.g., DeviceService) and provide platform-specific implementations in each app. This way, your shared code stays decoupled from platform details.
• Separate build configurations: Configure distinct build commands for each app in your workspace’s angular.json so you can deploy them independently (e.g., ng build desktop-app --prod or ng build mobile-app --prod).

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