bootstrap-standalone-component

你也许在Angular的文档或者某些博客中看到过这样一句话：
Every application has at least one Angular module, the root module, which must be present for bootstrapping the application on launch. By convention and by default, this NgModule is named AppModule

在Angular 14之前，这句话是正确的。但是从Angular 14开始，你可以不用AppModule，因为standalone component可以替代它。下面我们来看看，如何移除AppModule。

创建一个Angular项目

ng new my-app

将app component设置为standalone

首先要将app.component.ts中的standalone设置为true。如果使用了router，还需要将RouterModule导入到component中。否则在html中使用router-outlet或者routerLink会报错。

import {Component} from '@angular/core';
import {RouterModule} from "@angular/router";

@Component({
  standalone: true, // set standalone to true
  selector: 'app-root',
  imports: [RouterModule], // import RouterModule if you use router
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-router';
}

创建routes文件

新建一个app-routes.ts文件，用来定义路由，就是将原本在app-routing.module.ts中定义的路由移到这个文件中。

import {Routes} from "@angular/router";
import {HomeComponent} from "./home/home.component";
import {AboutComponent} from "./about/about.component";
import {NotFoundComponent} from "./not-found/not-found.component";

export const routes: Routes = [
  {path: 'home', component: HomeComponent},
  {path: 'product', loadChildren: () => import('./product/product.module').then(m => m.ProductModule)},
  {path: 'about', component: AboutComponent},
  {path: '**', component: NotFoundComponent},
];

删除AppModule

经过上面的改造，我们已经将AppModule中的内容移到了AppComponent中，现在可以删除AppModule了。

1. 删除app module文件：src/app/app.module.ts。
2. 删除route文件：src/app/app-routing.module.ts。（如果创建项目时选择了router）

修改main.ts

最后，我们还需要修改main.ts，main.ts是app的入口文件，它本来引入的是AppModule，我们需要修改它来引入standalone component。

1. 将bootstrapModule替换为bootstrapApplication。
2. 将AppModule替换为AppComponent。
3. 引入importProvidersFrom来加载路由。

修改前

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();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

修改后

import {enableProdMode, importProvidersFrom} from '@angular/core';

import {environment} from './environments/environment';
import {RouterModule} from "@angular/router";
import {routes} from "./app/app.routes";
import {bootstrapApplication} from "@angular/platform-browser";
import {AppComponent} from "./app/app.component";

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

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(RouterModule.forRoot(routes))
  ]
})
  .catch(err => console.error(err));

Angular 17+

从Angular 17开始，使用Angular CLI创建的app默认就是standalone component，不需要再做上面的修改。一个新的Angular 17+项目结构如下：

my-app/
├─ node-modules/
├─ src/
│  ├─ app/
│  │  ├─ app.component.css
│  │  ├─ app.component.html
│  │  ├─ app.component.ts
│  │  ├─ app.config.ts
│  │  ├─ app.routes.ts
│  ├─ index.html
│  ├─ main.ts
├─ angular.json
├─ package.json

// app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'my-app';
}

// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes)]
};

// app.routes.ts
import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'product',
    component: ProductComponent,
  }
];

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));