使用独立组件 Angular 14 并收到错误“出现在...的 NgModule.imports 中”

Question

我想开始在我的项目中使用独立组件。 我正在关注本指南，但在 VSCode 上出现此错误。

class StandaloneComponent
Appears in the NgModule.imports of SomeModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?(-996002)

这是我的代码：

我的独立组件：

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

@Component({
  standalone: true,
  selector: 'app-standalone',
  templateUrl: './standalone.component.html',
  styleUrls: ['./standalone.component.scss']
})
export class StandaloneComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

在 SomeModule 中导入独立组件：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SomeComponent } from './some.component';
import { StandaloneComponent } from 'src/app/components/standalone/standalone.component';

@NgModule({
  declarations: [
    SomeComponent
  ],
  imports: [
    CommonModule,
    StandaloneComponent
  ],
  exports: [
    SomeComponent
  ]
})
export class SomeModule { }

我是否遗漏了某些东西或必须执行任何类型的配置才能使其正常工作？ 提前致谢。

Answer 1

您不需要将 standAloneComponent 导入任何模块 - 只需将其导入您将在内部使用选择器的组件，如下所示：

@Component({
      standalone: true,
      selector: 'tase-my-performance',
      templateUrl: 'my-performance.component.html',
      styleUrls: ['my-performance.component.scss'],
      imports: [
        CommonModule,
        SomeStandAloneComponent
      ],
     })

Answer 2

我已经修复了这个出现在我的 VSCode 上的错误。 我Ctrl+Shift+P打开命令面板。 您也可以在视图菜单下打开命令面板。

然后运行Angular: Restart Angular Language server ，如图。

这就是我的全部。