Angular中app.module.ts为何先于main.ts执行？如何确保环境变量先初始化？

为什么app.module.ts会先执行？ #

问题出在ES模块的静态导入机制上：当你在main.ts里用import { AppModule } from './app/app.module'静态导入AppModule时，JavaScript会在执行main.ts的任何代码之前，先加载并执行app.module.ts里的所有顶级代码（比如你写在顶部的console.log('3')）。哪怕你在main.ts里用异步Promise延迟调用bootstrapModule，静态导入的模块已经提前执行了，所以会出现3先输出的情况。

怎么确保main.ts完成环境变量更新后再运行app.module.ts？ #

核心思路是延迟加载AppModule，不要用静态导入，而是等异步操作完成后再动态导入它：

修改main.ts的代码，去掉顶部的静态导入，改为在Promise完成后动态导入：

// 移除顶部的 import { AppModule } from './app/app.module';

environmentLoaderPromise.then(() => {
  console.log('1');
  console.log('2');
  // 动态导入AppModule，此时才会加载并执行app.module.ts的代码
  import('./app/app.module').then(({ AppModule }) => {
    platformBrowserDynamic().bootstrapModule(AppModule)
      .catch(err => console.error(err));
  });
});

这样调整后，执行顺序就会变成：

1. 先完成environmentLoaderPromise的异步操作，输出1、2
2. 动态导入AppModule，此时才会执行app.module.ts的顶级代码，输出3
3. 最后启动Angular应用

如果你的app.module.ts里有依赖环境变量的模块配置（比如providers、imports），这种方式也能保证环境变量已经更新完成，再初始化模块。

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