Estaba desarrollando una App en Angular 8 usando Ionic como framework y TypeScript como lenguaje de Script.
Hace solo poco mas de un mes que he empezado a desarrollaar en Angular por motivos laborales, de ahi me dedicaba a desarrollar en Android, asi que estoy un poco verde aun.
Mi error seguramente venga por desacocimiento de como funciona Angular, ya que esta relacionado con el componente de navigacion entre componenetes Router.
Este lo implemento en un componente tabs, que representa al componente padre del cada tab individual.
El error que me vierte la consola del navegador es el siguiente:
core.js:6210 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tabs/tab1'
Error: Cannot match any routes. URL Segment: 'tabs/tab1'
at ApplyRedirects.noMatchError (router.js:2628)
at CatchSubscriber.selector (router.js:2622)
at CatchSubscriber.error (catchError.js:27)
at MapSubscriber._error (Subscriber.js:75)
at MapSubscriber.error (Subscriber.js:55)
at MapSubscriber._error (Subscriber.js:75)
at MapSubscriber.error (Subscriber.js:55)
at ThrowIfEmptySubscriber._error (Subscriber.js:75)
at ThrowIfEmptySubscriber.error (Subscriber.js:55)
at TakeLastSubscriber._error (Subscriber.js:75)
at resolvePromise (zone-evergreen.js:798)
at resolvePromise (zone-evergreen.js:750)
at zone-evergreen.js:860
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Object.onInvokeTask (core.js:28540)
at ZoneDelegate.invokeTask (zone-evergreen.js:398)
at Zone.runTask (zone-evergreen.js:167)
at drainMicroTaskQueue (zone-evergreen.js:569)
app-routing-module.ts
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
tabs-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CaptureModule } from '../capture/capture.module';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'login',
loadChildren: () => import('../login/login.module').then(m => m.LoginModule)
},
{
path: 'home',
loadChildren: () => import('../home/home.module').then(m => m.HomeModule)
},
{
path: 'account',
loadChildren: () => import('../account/account.module').then(m => m.AccountModule)
},
{
path: 'capture',
loadChildren: () => import('../capture/capture.module').then(m => m.CaptureModule)
},
{
path: 'home',
loadChildren: () => import('../home/home.module').then(m => m.HomeModule)
},
{
path: 'journal',
loadChildren: () => import('../journal/journal.module').then(m => m.JournalModule)
},
{
path: 'first-screen',
loadChildren: () => import('../first-screen/first-screen.module').then(m => m.FirstScreenModule)
},
{
path: '',
redirectTo: '/tabs/firt-screen',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/tabs/firts-screen',
pathMatch: 'full'
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
})
export class TabsPageRoutingModule {}
Si teneis idea de por donde van los tiros muchas gracias de ante mano!.
[EDIT]
He cambiado la estructura de carpetas para organizar los componentes hijos de la siguiente manera, y obtengo el siguiente error:
Logcat:
ng] Error: src/app/app.module.ts:10:38 - error TS2307: Cannot find module './first-screen/first-screen.component' or its corresponding type declarations.
[ng] 10 import { FirstScreenComponent } from './first-screen/first-screen.component';
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] Error: src/app/app.module.ts:11:26 - error TS2307: Cannot find module './home/home.page' or its corresponding type declarations.
[ng] 11 import { HomePage } from './home/home.page';
[ng] ~~~~~~~~~~~~~~~~~~
[ng] Error: src/app/app.module.ts:12:29 - error TS2307: Cannot find module './journal/journal.page' or its corresponding type declarations.
[ng] 12 import { JournalPage } from './journal/journal.page';
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~
[ng] Error: src/app/app.module.ts:13:27 - error TS2307: Cannot find module './login/login.page' or its corresponding type declarations.
[ng] 13 import { LoginPage } from './login/login.page';
[ng] ~~~~~~~~~~~~~~~~~~~~
[ng] Error: src/app/app.module.ts:9:43 - error TS2307: Cannot find module './explore-container/explore-container.component' or its corresponding type declarations.
[ng] 9 import { ExploreContainerComponent } from './explore-container/explore-container.component';
[ng] ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[ng] Error: ./src/app/app.module.ts
[ng] Module not found: Error: Can't resolve './explore-container/explore-container.component' in 'D:\Angular_Proyects\Ionic_Birland\src\app'
[ng] Error: ./src/app/app.module.ts
[ng] Module not found: Error: Can't resolve './first-screen/first-screen.component' in 'D:\Angular_Proyects\Ionic_Birland\src\app'
[ng] Error: ./src/app/app.module.ts
[ng] Module not found: Error: Can't resolve './home/home.page' in 'D:\Angular_Proyects\Ionic_Birland\src\app'
[ng] Error: ./src/app/app.module.ts
[ng] Module not found: Error: Can't resolve './journal/journal.page' in 'D:\Angular_Proyects\Ionic_Birland\src\app'
[ng] Error: ./src/app/app.module.ts
[ng] Module not found: Error: Can't resolve './login/login.page' in 'D:\Angular_Proyects\Ionic_Birland\src\app
[EDIT]
Añado la clase LoginRoutingModule, y la App al compilarla en el broswer
Añado el archivo login.module.ts
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { LoginPage } from './login.page';
import { ExploreContainerComponentModule } from '../explore-container/explore-container.module';
import { LoginRoutingModule } from './login.rounting.module';
@NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
ExploreContainerComponentModule,
RouterModule.forChild([{ path: '', component: LoginPage }]),
LoginRoutingModule,
],
declarations: [LoginPage]
})
export class LoginModule{}