新Angular项目ng serve默认页面异常，如何恢复标准默认页面？

你看到的页面差异确实是Angular版本更新导致的：Angular 17及以后版本创建项目时，默认采用**独立组件（Standalone Components）**作为项目结构，同时更新了默认启动页面的样式和内容；你所说的“标准默认页面”是Angular 16及更早版本基于NgModule的项目默认页。

解决方法 #

方法1：创建项目时直接生成旧版结构 #

如果还未创建项目，执行以下命令初始化基于NgModule的项目，就能得到你熟悉的标准默认页面：

ng new your-project-name --no-standalone

方法2：修改已创建的独立组件项目 #

如果已经创建了项目，可手动调整回旧版默认页面：

1. 替换src/app/app.component.html的内容为旧版模板：

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2>Tour of Heroes</h2>
  </li>
  <li>
    <h2>CLI Documentation</h2>
  </li>
  <li>
    <h2>Angular blog</h2>
  </li>
</ul>

2. 确保src/app/app.component.ts中的title属性正确设置（默认是你的项目名称）：

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';

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

3. （可选）如果想完全切换回NgModule结构：
   • 创建src/app/app.module.ts文件：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [BrowserModule],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

   • 修改src/main.ts，改为引导NgModule：

   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { AppModule } from './app/app.module';
   
   platformBrowserDynamic().bootstrapModule(AppModule)
     .catch(err => console.error(err));
   

   • 最后在app.component.ts中移除standalone: true和imports数组。

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