Angular应用组件实例化顺序疑问：子组件为何先于父组件创建？

基础启动流程（初始加载根路由） #

当Angular CLI创建的应用首次启动时，完整的创建/执行顺序为：

• 浏览器加载 index.html(B)：作为应用入口页面，加载Angular运行时脚本与打包后的应用代码。
• 执行 main.ts(A)：调用platformBrowserDynamic().bootstrapModule(AppModule)，触发Angular应用启动，引导根模块。
• 初始化 AppModule(C)：Angular处理模块的导入项、提供者配置，随后定位到bootstrap数组指定的根组件AppComponent。
• 创建 AppComponent(D)：实例化根组件并解析其模板，此时模板中的<router-outlet>处于等待状态，直到路由系统完成解析。
• 创建路由组件 my-own-comp-1(E)：若路由配置默认路由指向E，Angular会在<router-outlet>位置实例化该组件，此时顺序为D→E。

刷新路由页面时的特殊顺序 #

当导航到E组件后刷新浏览器，会出现E→D的构造函数执行顺序，原因是：
Angular在应用重启时会优先解析当前URL对应的路由规则：

• 完成AppModule初始化后，路由系统立即匹配当前URL，定位到要加载的E组件，先完成其实例化（提前准备路由内容）。
• 随后才会完成根组件D的实例化及模板渲染，因为<router-outlet>需要挂载已准备好的E组件，最终构造函数执行顺序变为E→D。

核心逻辑说明 #

Angular的路由系统在启动阶段会优先处理当前URL的路由匹配，确保路由组件提前就绪，再完成根组件的完整渲染流程。这就是作为父容器的D会在子组件E之后执行构造函数的原因——路由组件的准备是根组件模板渲染的前置依赖之一。

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