Я работаю над приложением, которое использует Ionic для школы, но я все еще новичок во всем этом.Все работало нормально, пока я не попытался связать две страницы, которые участвуют в процессе входа в систему, с тех пор я получаю ошибки всякий раз, когда пытаюсь скомпилировать сайт.
Uncaught Ошибка: компонент LoginPage не является частьюлюбой NgModule или модуль не был импортирован в ваш модуль.в JitCompiler.push ../ node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._createCompiledHostTemplate (compiler.js: 26121)
LoginPage действительно вызывается, когда я использую его в login.module, ноЯ, честно говоря, не знаю, какие шаги предпринять с этого момента, само приложение построено из учебного «прототипа», так сказать, я вносил изменения, так что вполне возможно, что я упускаю из виду нечто фундаментальноеучебное приложение должно было работать.
Поскольку ошибка возникла после того, как я попытался настроить некоторые параметры маршрутизации, я опубликую соответствующий код ниже.Вот файл 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, я получаюследующая ошибка: Uncaught Error: Компонент 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 {}