组件不是 NgModule 的一部分

Question

我正在开发一个在学校使用 Ionic 的应用程序，但对这一切还是很陌生。一切正常，直到我尝试链接登录过程中涉及的两个页面，从那时起，每当我尝试编译站点时，我都会遇到错误。

未捕获的错误：组件 LoginPage 不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中。 在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._createCompiledHostTemplate (compiler.js:26121)

当我在 login.module 中使用 LoginPage 时，它​​确实会被调用，但老实说，我不知道从这里开始要采取什么步骤，应用程序本身是根据教程“原型”构建的，可以这么说进行更改，因此很可能我忽略了教程应用程序应该工作方式的一些基本内容。

由于在我尝试配置有关路由的一些内容后出现错误，我将在下面发布相关代码。这是app-routing-module.ts文件

//import { AuthGuardService } from './guards/auth.guard';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginPage } from './public/login/login.page';

const routes: Routes = [
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', loadChildren: './public/login/login.module#LoginPageModule' },
  //{ path: 'register', loadChildren: './public/register/register.module#RegisterPageModule' },
  { path: 'submit', component: LoginPage },
  // { 
  //   path: 'members', 
  //   //canActivate: [AuthGuard],
  //   loadChildren: './members/member-routing.module#MemberRoutingModule'
  // },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

（如您所见，我已经注释掉了一些我的应用程序不需要的代码，我尝试取消注释，但没有解决错误。）

我现在要完成的是从您看到的第一页移动，其 html 文件应绑定到以下内容：login.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { LoginPage } from './login.page';

import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    component: LoginPageModule
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {
  pageDirect() {
    this.router.navigate([`/submit`])
  }
}

到实际登录的页面，绑定到以下文件：login.page.ts

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss']
})
export class LoginPage implements OnInit {
  id: any;
  key: any;
  user_data: any;

  constructor(
    private httpClient: HttpClient,
    private router: Router,
  ) { }

  token;

  login( username, password ) {
    console.log(username, password)
    const url = `https://svsdb.woodl.nl:5555/api/public/auth/login`;
    const data = {
      email: username,
      password: password,
    }
    console.log(data)
    this.httpClient.post(url, data).subscribe(
      (res:any)=>{
        console.log(res)
        console.log(res.message)
        this.token = res.data.token.value
        this.id = res.data.user._id
        console.log(this.id)
        this.readUser(res.data.user._id)
        this.key = res.message
      },
      (error)=>console.log(error),
      ()=>console.log(),
    )
  }

  readUser(userId) {
    const url = `https://svsdb.woodl.nl:5555/api/user/read/${userId}`;
    const options = {
      headers: {
        authorization: this.token,
      }
    }
    this.httpClient.get(url, options).subscribe(
      (res:any)=>{
        console.log(res)
        this.user_data = res.data
        sessionStorage.setItem(this.id, JSON.stringify(this.user_data))
        console.log(this.key)
        this.getData()
        this.redirect(this.key, this.id)
      },
      (error)=>{

      },
      ()=>{

      }
    )
  }

  getData(){
    console.log(this.user_data)
    return this.user_data
  }

  redirect(message, id) {
    if (message === "Logged in.") {
      console.log("success")
      console.log(this.user_data)
      this.router.navigate([`/profile/${id}`])
    }
    else if (message === "Password incorrect, please try again") {

    }
    else if (message === "No user registered with this e-mail") {

    }
    else {
      console.log("fail")
    }
  }

  ngOnInit() {
  }

}

现在当我尝试访问 localhost 时，我收到以下错误：未捕获错误：组件 LoginPage 不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中。在 JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._createCompiledHostTemplate (compiler.js:26121) （还有几行，但我认为这传达了它的要点）

总而言之，我试图从包含登录按钮的第一个 html 页面到您提交数据并调用您可以在 login.page.ts 中看到的登录函数的实际登录页面。我已经尝试了几件事，但只会不断出现不同的错误，我担心如果我继续“尝试”一些东西，我会弄乱无法修复的文件。任何帮助将不胜感激，谢谢。

编辑： 这里要求的是应用模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { IonicStorageModule } from '@ionic/storage';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule } from '@angular/http'; 

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    IonicStorageModule.forRoot(),
    HttpClientModule,
    HttpModule,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 1

你需要在你的 app.module.ts 中导入 LoginPageModule

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule, 
    IonicModule.forRoot(), 
    AppRoutingModule,
    IonicStorageModule.forRoot(),
    HttpClientModule,
    HttpModule,
    LoginPageModule 
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})