【问题标题】:Angular error: Please add a @NgModule annotation角度错误:请添加 @NgModule 注释
【发布时间】:2019-02-24 07:23:30
【问题描述】:

我是 Angular 的新手,我正在尝试编写一个简单的模块化应用程序。但我收到以下错误:

未捕获的错误:意外的指令“SomeComponent”由 模块'SomeModule'。请添加@NgModule 注解。

我基本上不想把app.module.ts里面的所有服务和组件都导入,想把代码模块化,失败了。

这是app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    HttpClientModule,
    ReactiveFormsModule,
    SomeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

这是嵌套模块:

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

这是嵌套组件:

@Component({
  selector: 'app-index',
  templateUrl: './some.component.html',
  styleUrls: ['./some.component.css']
})
export class SomeComponent implements OnInit {

  somes: Array<ISome>;

  constructor(private http: HttpClient, private service: SomeService) {}

  ngOnInit() {
    this.getSomes();
  }

  getSomes() {
    this.service.getSomes().subscribe(res => {
      this.somes = res;
    });
  }
}

【问题讨论】:

    标签: angular


    【解决方案1】:

    您正在尝试“导入”SomeModule 中的组件。

    imports: [
      CommonModule,
      SomeComponent
    ],
    

    import 模块和declare 组件,这正是错误消息告诉您的内容——您尝试导入指令SomeComponent

    模块“SomeModule”导入的意外指令“SomeComponent”。

    SomeComponentimports 移动到declarations

    imports: [
      CommonModule,
    ],
    providers: [SomeService],
    declarations: [
      SomeComponent,
    ],
    

    【讨论】:

      【解决方案2】:

      将您的 Somecomponent 移动到声明部分。

      NgModule({
        imports: [
          CommonModule
      
        ],
        providers: [SomeService],
        declarations: [SomeComponent]
      
      })
      export class SomeModule {
      }
      

      【讨论】:

        【解决方案3】:

        我遇到了同样的问题。

        我创建了一个pipe 并将其放在module 中,以便多个组件可以访问它。

        我做错了什么?

        @NgModule({
          declarations: [
            CustomDatePipe, // declarating pipe class instead of importing pipe module
          ]
        })
        export class AppModule { }
        

        如何解决这个问题?

        AppModule 中导入pipe-module,即

        @NgModule({
          imports: [
            CustomDateModule,
          ]
        })
        export class AppModule { }
        

        【讨论】:

          【解决方案4】:

          您必须在嵌套模块中声明该组件。

          在嵌套模块中试试这个。

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

          【讨论】:

          • 我看不出接受的答案和这个答案有什么区别。此代码也必须有效
          猜你喜欢
          • 2020-06-08
          • 2018-04-30
          • 2018-07-23
          • 2018-08-24
          • 1970-01-01
          • 2020-12-11
          • 2022-01-22
          • 2021-10-07
          • 2020-12-27
          相关资源
          最近更新 更多