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

我有这个错误，特别是

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

部分中包含my

LoginComponent

。那么为什么会出现上述错误呢？你能解释一下吗？我的应用程序预计会在启动时加载登录页面，即

localhost:4200

基本上应该加载登录，就像

localhost:4200/login

也应该加载一样

---

我不太清楚我在这里犯了什么错误

从

imports

中删除

LoginComponent

，并将其添加到

声明中

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

---

导入

用于导入其他模块并使其功能可用于当前模块。组件不会以角度导入到模块中，模块是。组件被声明为模块的一部分。

从

导入中删除
LoginComponent
，并将其添加到
声明中

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

导入
用于导入其他模块并使其功能可用于当前模块。组件不会以角度导入到模块中，模块是。组件被声明为模块的一部分。
hey@ysf让我试试这个编辑。我会回复，您好@ysf，正如您所指出的，它是有效的。就我而言，理解组件包含概念的问题，与路由无关；嘿@ysf，让我试试这个编辑。我会回复，您好@ysf，正如您所指出的，它是有效的。就我而言，理解组件包含概念的问题，与路由无关；