角路由登录模块意外指令导入[错误]

Question

我具体有这个错误;

Unexpected directive 'LoginComponent' imported by the module 'AppModule'. Please add a @NgModule annotation. 

有人知道它的用途吗？我的app-routing.module就是这样;

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginComponent } from './components/login/login.component';
const routes: Routes = [
  {
    path: 'login',
    loadChildren: './components/login/login.component#LoginModule'
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

和app.module为

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    LayoutModule,
    OverlayModule,
    HttpClientModule,
    LoginComponent,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

我的login.component

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
  constructor(private router: Router) { }
  ngOnInit() { }
  onLogin() {
    localStorage.setItem('isLoggedin', 'true');
    this.router.navigate(['/dashboard']);
  }
}

悲伤到底在哪里？谁能给我一个正确的方向提示？AppModule按预期在imports部分中包含我的LoginComponent。那为什么上述错误？你能解释一下吗？我的应用程序预计会在启动时加载登录页面，即。localhost:4200基本上应该像localhost:4200/login一样加载登录。

对我来说不太清楚我在逻辑上做错了什么！

Answer 1

从imports中删除LoginComponent，然后将其添加到declarations

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    LayoutModule,
    OverlayModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      }
    })
  ],
  providers: [],
  bootstrap: [AppComponent]
})

imports用于导入其他模块，并将其功能可用于当前模块。组件未进口到角模块中的模块。组件被声明为模块的一部分。