在独立模式下，如何在 Angular 17 中导入模块？

Question

每个人。我注意到 Angular 17 默认为独立模式，这意味着它不会自动生成文件 app.module.ts...下面的代码在独立模式下生成 Angular 应用程序：

ng new project-name

下面的代码在非独立模式下生成一个角度应用程序：

ng new project-name --no-standalone

但是，如果我正在使用这个新的独立版本，有人可以指导我使用哪个文件以及如何导入之前在 app.module.ts 文件中导入的模块吗？

举个例子：如果我想从@angular/platform-b​​rowser导入模块BrowserModule，我是否必须将其导入到将在组件装饰器中使用它的所有组件中？因为之前，我需要仅在 app.module.ts 处导入。或者我在这里遗漏了什么？

Answer 1

在 Angular 17 的独立模式下，传统的 app.module.ts 文件不会自动生成，您可以在没有中央模块文件的情况下组织您的应用程序。相反，您可以将必要的模块直接导入到需要它们的组件中。

在此代码中，您有一个使用各种 Angular 模块的 DemoComponent。将这些模块直接导入到组件中，您已经正确完成了。每个导入语句都会引入组件所需的模块。

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatMenuModule } from '@angular/material/menu';
import { MatTabsModule } from '@angular/material/tabs';
import { MatRadioModule } from '@angular/material/radio';
import { ReactiveFormsModule, FormsModule } from '@angular/forms';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [
    CommonModule,
    MatMenuModule,
    MatTabsModule,
    MatRadioModule,
    ReactiveFormsModule,
    FormsModule
  ],
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.scss']
})

export class DemoComponent implements OnInit {
    constructor () {}
    ngOnInit (): void {}
}

在这种情况下，您不需要中央 app.module.ts 文件。组件本身使用@Component装饰器的imports属性指定其依赖项。