组件不是NgModule的一部分

问题描述 投票：0回答：1

我正在开发一个使用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 {}
angular ionic-framework module components
1个回答
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]
})
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.