importProvidersFrom(Angular 17 独立组件中的[CommonModule]

Question

export const appConfig: ApplicationConfig = {
  providers: [
    importProvidersFrom(
      [
        CommonModule
      ]
    )
  ]

为什么在独立组件中不能像这样在app.config.ts中输入CommonModule？？？是否应该将其导入到组件本身中？

Angular 17个独立组件，导入问题CommonModule

Answer 1

standalone 是自包含的并声明自己的依赖项，它们使用组件装饰器中的 import 属性直接导入它们依赖的其他独立组件、指令和管道。

如果您希望使用 ngIf 等通用指令，您应该直接在组件的导入数组中导入 CommonModule。

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

@Component({
  selector: 'my-component',
  standalone: true,
  imports: [CommonModule], 
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent {
  
}

Answer 2

总体来说：

• BrowserModule

  用于根

  NgModule

  ，

  CommonModule

  用于功能

  NgModule

• 您可以使用其独立部分，例如

  CommonModule

  、

  NgIf

  等，而不是

  NgFor

  等

很多答案都可以在网上获得：

1. https://angular.io/guide/frequent-ngmodules
2. https://angular.io/guide/feature-modules
3. 如何在独立组件appoach中为root导入CommonModule？
4. 角度中的 CommonModule 与 BrowserModule
5. https://github.com/angular/angular.io/issues/2166

Answer 3

模块不是提供者；相反，它们充当组织和配置应用程序功能的容器。