Angular 导入路由登录模块意外指令 [ERROR]

Question

我遇到了这个错误；

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

有谁知道它的用途吗？我的应用程序-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 用于导入其他模块并使它们的功能对当前模块可用。 angular 中的组件未导入到模块中，模块是。组件被声明为模块的一部分。

Angular 导入路由登录模块意外指令 [ERROR]

Angular Routing Login module unexpected directive imported [ERROR]

angular

typescript

angular2-routing

angular-routing