Angular入门系列（四） Angular中的启动入口点

Angular是如何启动的

简单来说，angular启动时经历如下过程

 

之前我们学习可以知道，组件才是用户可以看到的东西，所以angular启动的时候就是要先知道，我应该先显示哪个组件

angular会先执行main.ts

我们可以看到main.ts代码

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

// 可以看到Angular先加载根模块
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

这时候我们再去看看根模块定义

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  // 定义了启动组件
  bootstrap: [AppComponent]
})
export class AppModule { }

这里发现AppComponent是我们入口组件，也就是打开页面应该看到的组件，angular在加载完imports的依赖后，就开始渲染我们的组件