如何在已有Angular 18项目中创建app.module.ts并切换至模块结构？

Angular CLI没有直接在现有独立组件项目中生成app.module.ts的命令，你需要手动创建并配置，具体步骤如下：

1. 创建app.module.ts文件 #

在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
    // 加入依赖模块，例如RouterModule.forRoot(routes)、FormsModule等
  ],
  providers: [
    // 注册项目所需的服务
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. 修改main.ts的引导逻辑 #

原来的main.ts是引导独立组件的，需要改成引导模块：
替换原有代码为：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

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

如果之前有路由、全局服务等配置，要把这些逻辑移到AppModule的imports和providers中（比如路由要通过RouterModule.forRoot(routes)导入）。

3. 调整现有组件 #

项目中原有独立组件（带有standalone: true标识）需要做调整：

• 要么去掉组件的standalone: true属性，以及组件内部的imports数组，然后将组件添加到AppModule的declarations数组中；
• 要么保留standalone: true，但将组件添加到AppModule的imports数组中（适合少量独立组件的场景）。

举个例子，修改app.component.ts：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  // 移除standalone: true和imports数组
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = '你的项目名称';
}

4. 验证配置 #

执行ng serve启动项目，若能正常运行，说明已成功切换到基于模块的结构。

关于你遇到的命令报错 #

ng new --no-standalone是用来创建新项目时指定非独立组件结构的命令，你在已有的工作区内执行它，自然会报错，这个命令只能在工作区外部使用。

内容的提问来源于stack exchange，提问作者Moh.Alkasem