为什么多语句函数返回Angular模块declarations、imports、providers会报错

• 核心约束：Angular默认启用的AOT（提前编译）机制要求，@NgModule装饰器的所有配置项必须是构建期可静态求值的常量，编译器不会在构建阶段执行任何JavaScript运行时代码，仅做静态语法分析。
• 函数兼容规则：Angular编译器仅对「函数体仅包含一行return 字面量数组语句」的极简场景做特殊兼容，能够直接提取返回的字面量作为元数据。但只要函数内出现任何其他语句——哪怕是完全无副作用的未使用变量、甚至是把数组先赋值给同作用域常量再返回的两行代码——编译器就会判定这是「复杂函数」，无法保证能静态推导出最终的返回值，因此直接抛出NG1010错误，停止元数据解析。
• 连锁错误来源：由于declarations元数据解析失败，编译器无法正确识别AppComponent所属的模块，自然不会关联对应模块导出的指令（比如CommonModule提供的ngSwitch、AppRoutingModule提供的router-outlet），才会连带出现各类模板编译报错。

完全不需要用函数返回配置项，只要保证所有配置都是静态常量即可实现模块拆分：

1. 单独创建配置文件存储拆分后的配置项，直接导出顶层常量，不要用函数包裹：
   比如新建app-module-config.ts：

   import { BrowserModule } from '@angular/platform-browser';
   import { AppRoutingModule } from './app-routing.module';
   import { AppComponent } from './app.component';
   
   // 直接导出静态常量数组
   export const APP_DECLARATIONS = [AppComponent];
   export const APP_IMPORTS = [BrowserModule, AppRoutingModule];
   export const APP_PROVIDERS = [];
   

2. 在app.module.ts中直接引用这些常量作为@NgModule的配置：

   import { NgModule } from '@angular/core';
   import { APP_DECLARATIONS, APP_IMPORTS, APP_PROVIDERS } from './app-module-config';
   
   @NgModule({
     declarations: APP_DECLARATIONS,
     imports: APP_IMPORTS,
     providers: APP_PROVIDERS,
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

如果需要根据场景调整配置项，只要条件本身是构建期可确定的（比如生产/开发环境区分），可以直接用静态表达式拼接，不需要写函数：
比如在开发环境添加调试组件，生产环境移除：

// app-module-config.ts
import { AppComponent } from './app.component';
import { DevToolbarComponent } from './dev-toolbar/dev-toolbar.component';
import { environment } from '../environments/environment';

// 三元表达式在构建期就会被求值，属于静态可推导内容
export const APP_DECLARATIONS = environment.production
  ? [AppComponent]
  : [AppComponent, DevToolbarComponent];

注意：所有依赖运行时动态判断的逻辑，都不能直接放在NgModule的静态配置里，这类需求需要用Angular官方提供的动态API实现：比如路由懒加载用loadChildren、运行时动态注入服务用EnvironmentInjector或Injector.create，不要试图修改NgModule装饰器的静态配置项。

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