错误捕获：错误：未捕获(在承诺中)：错误：模块“t”导入的意外指令“t”.请添加 @NgModule 注释.

问题描述

当在Angular应用程序中尝试导入未使用@ NgModule注释导入的指令时，将会遇到此错误。

解决方法

要解决此错误，您必须为该组件添加@ NgModule注释。例如：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyDirective } from './my.directive';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    MyDirective
  ],
  exports: [
    MyDirective
  ]
})
export class MyModule { }

在上面的示例中，我们为组件添加了@NgModule注释。@NgModule注释定义了这个模块，并向其添加了MyDirective指令。

注意：您还需要将@NgModule注释添加到应用程序的根模块中。

常见错误

1. 小写字母导入指令

   如果在导入指令时使用了小写字母，将导致此错误。例如：

   错误：

   import { myDirective } from './my.directive';
   

   解决方法：

   import { MyDirective } from './my.directive';
   

2. 忘记添加@ NgModule注释

   您可能忘记为组件或模块添加@NgModule注释。

   错误：

   import { MyDirective } from './my.directive';
   
   @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
   })
   export class AppComponent {
     constructor(private elRef: ElementRef) {
       elRef.nativeElement.style.backgroundColor = 'red';
     }
   }
   

   解决方法：为组件添加@NgModule注释。

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

结论

在Angular应用程序中导入指令时，请使用@NgModule注释将其添加到模块中。 通过使用正确的大小写和位置，可以避免此错误。