模块“AppModule”导入的意外指令“LoginComponent”。请添加@NgModule 注释

Posted 2023-03-08

【中文标题】模块“AppModule”导入的意外指令“LoginComponent”。请添加@NgModule 注释

【英文标题】：Unexpected directive 'LoginComponent' imported by the module 'AppModule'. Please add a @NgModule annotation

【发布时间】：2017-11-27 23:57:56

【问题描述】：

我正在使用 Angular 2 和 Meteor。生成组件会产生以下错误：

模块“AppModule”导入的意外指令“LoginComponent”。请添加 @NgModule 注释。

app.module.ts 文件是

import  NgModule, ErrorHandler  from '@angular/core';
import  BrowserModule  from '@angular/platform-browser';
import  MyApp  from './app.component';
import  LoginComponent  from '../../components/login/login.component';
import  SignupComponent  from '../../components/signup/signup.component';
import  ResourcesComponent  from '../../components/resources/resources.component'; 
import  NavbarComponent  from '../../components/navbar/navbar.component';

@NgModule(
  declarations: [
    MyApp,
    LoginComponent,
    SignupComponent,
    ResourcesComponent
  ],
  entryComponents: [
    MyApp
  ],
  imports:[BrowserModule,
  LoginComponent,
  SignupComponent,
  ResourcesComponent
  ],
  bootstrap: [MyApp]
)
export class AppModule 

login.component.ts 文件是

import 'zone.js';
import 'reflect-metadata';
import  Component  from '@angular/core';
import template from "./login.html";

@Component(
  selector: 'login',
  template
)
export class LoginComponent 

【问题讨论】：

为什么要将组件添加到 AppModule 的导入数组中？

【参考方案1】：

在NgModule.imports 中，您只能列出模块。不是组件。所以问题就在这里：

imports:[BrowserModule, LoginComponent, SignupComponent, ResourcesComponent ]

去掉组件，看看NgModules FAQ

我应该导入什么？

导入您需要在此模块的组件模板中引用的公共（导出）可声明类的模块