寻求企业级Angular应用项目架构示例，含核心共享模块、通用HTTP服务等要求

1. 多模块设计方案 #

采用核心模块+共享模块+业务模块的分层模块设计，严格约束各模块职责：

• CoreModule（核心模块）：全局单例模块，仅允许在根模块AppModule中导入一次，禁止在业务模块中重复导入。内部存放全局单例服务、HTTP拦截器、路由守卫、全局类型定义等仅需要初始化一次的全局资源，避免服务重复实例化。
• SharedModule（共享模块）：无状态通用模块，所有需要通用能力的业务模块均可导入。内部存放跨业务复用的UI组件、管道、指令，不允许存放单例服务，避免产生多实例冲突。
• 业务模块：按业务域独立拆分，每个业务模块内部实现懒加载，独立维护自身的组件、服务、路由逻辑，模块间低耦合，便于并行开发和后续迭代维护。

2. 规范项目文件夹结构 #

src/
├── app/
│   ├── core/                  # 核心模块目录
│   │   ├── interceptors/      # HTTP拦截器存放目录
│   │   ├── guards/            # 路由守卫存放目录
│   │   ├── services/          # 全局单例服务存放目录
│   │   ├── models/            # 全局通用类型定义目录
│   │   └── core.module.ts     # 核心模块定义文件
│   ├── shared/                # 共享模块目录
│   │   ├── components/        # 通用UI组件（按钮、表格、弹窗等）
│   │   ├── pipes/             # 通用管道（日期格式化、枚举转文本等）
│   │   ├── directives/        # 通用指令（权限控制、输入限制等）
│   │   └── shared.module.ts   # 共享模块定义文件
│   ├── modules/               # 业务模块目录，按业务域拆分
│   │   ├── user/              # 用户管理业务模块
│   │   ├── order/             # 订单管理业务模块
│   │   └── dashboard/         # 数据看板业务模块
│   ├── layouts/               # 全局布局组件（顶部导航、侧边栏、页脚等）
│   ├── app-routing.module.ts  # 根路由配置文件
│   └── app.module.ts          # 根模块定义文件
├── assets/                    # 静态资源（图片、字体、配置文件等）
└── environments/              # 多环境配置（开发、测试、生产）

每个业务模块内部可按照自身复杂度，拆分components、services、models、routing子目录管理内部资源。

3. 通用HTTP服务封装方案 #

基于Angular原生HttpClient封装通用请求服务，统一处理基础路径拼接、默认请求头添加、参数序列化逻辑，简化业务侧调用成本：

// core/services/http.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';

@Injectable({ providedIn: 'root' })
export class HttpService {
  private baseUrl = environment.baseApiUrl;
  private defaultHeaders = new HttpHeaders({
    'Content-Type': 'application/json'
  });

  constructor(private http: HttpClient) {}

  get<T>(url: string, params?: Record<string, any>, headers?: HttpHeaders): Observable<T> {
    let httpParams = new HttpParams();
    if (params) {
      Object.keys(params).forEach(key => httpParams = httpParams.set(key, params[key]));
    }
    return this.http.get<T>(`${this.baseUrl}${url}`, {
      headers: headers || this.defaultHeaders,
      params: httpParams
    });
  }

  post<T>(url: string, body: any, headers?: HttpHeaders): Observable<T> {
    return this.http.post<T>(`${this.baseUrl}${url}`, body, {
      headers: headers || this.defaultHeaders
    });
  }

  // 同理封装put、delete、上传文件等通用请求方法
}

业务侧服务直接注入HttpService即可调用接口，无需重复处理基础配置。

4. 统一错误处理机制 #

从请求层和运行时两层实现全链路错误统一处理：

4.1 HTTP请求错误拦截 #

通过拦截器统一处理所有接口请求的异常返回：

// core/interceptors/error.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { MessageService } from '../services/message.service';

@Injectable()
export class ErrorInterceptor implements HttpInterceptor {
  constructor(private messageService: MessageService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        let errorMsg = '请求异常，请稍后重试';
        if (error.status === 401) {
          errorMsg = '登录已过期，请重新登录';
          // 补充跳转登录页、清除本地登录态逻辑
        } else if (error.status === 403) {
          errorMsg = '您无权限执行该操作';
        } else if (error.status >= 500) {
          errorMsg = '服务器异常，请联系管理员';
        } else if (error.error?.message) {
          errorMsg = error.error.message;
        }
        this.messageService.error(errorMsg);
        return throwError(() => error);
      })
    );
  }
}

4.2 全局运行时错误处理 #

重写Angular原生ErrorHandler捕获所有前端运行时异常：

// core/services/global-error-handler.service.ts
import { ErrorHandler, Injectable } from '@angular/core';
import { MessageService } from './message.service';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  constructor(private messageService: MessageService) {}

  handleError(error: unknown): void {
    console.error('全局运行时错误：', error);
    if (!environment.production) {
      this.messageService.error(`运行错误：${error instanceof Error ? error.message : '未知错误'}`);
    } else {
      this.messageService.error('系统运行异常，请稍后重试');
    }
  }
}

在根模块AppModule的providers中注册拦截器和全局错误处理器即可生效。

其他企业级适配架构设计 #

• 多环境配置：在environments目录下配置开发、测试、生产三套环境，分别对应不同的接口地址、功能开关，构建时通过ng build --configuration [环境名]指定目标环境。
• 权限控制体系：基于自定义指令实现页面元素级权限控制，基于路由守卫实现路由级权限拦截，统一对接后端权限接口获取当前用户权限集合。
• 状态管理：中等以上复杂度项目推荐使用NgRx或者RxJS实现全局状态管理，统一存储用户信息、全局配置等共享状态，避免组件间传值混乱。
• 构建优化配置：开启生产环境构建摇树优化、懒加载模块拆分、预加载策略配置，减少首屏加载时间。
• 代码规范约束：集成ESLint、Prettier、Stylelint统一代码风格，提交代码前通过husky执行代码检查，规范提交信息格式。

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