1

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:

introducir la descripción de la imagen aquí

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

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

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{}

1 respuesta 1

1

El error es claro Cannot match any routes. URL Segment: 'tabs/tab1'. Indica que tabs/tab1 no se encontró. Si te fijas en el arreglo de rutas sí existe el path tabs pero ninguno de sus hijos tiene el path tab1 así que de ahí el error.

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'login',
        loadChildren: () => import('../login/login.module').then(m => m.LoginModule)
      },
      // ... resto de rutas
     ] 
  }
];
13
  • Muchas gracias por la respuesta!! Otro duda sería como debería configurar el archivo module.ts de cada componente?? Commented el 25 abr. 2021 a las 13:59
  • Puedes explicarte más?
    – Lobos
    Commented el 25 abr. 2021 a las 14:06
  • A ver por lo que llevo visto la comunicacione el Router lo hace a partir del componente tabs, que es el padre del resto de los componente, por lo que es en este donde le configuras las rutas a los diferentes componentes hijos, mi pregunta es: En los archivos login.module.ts y login.rounting.module.ts que tedría que programar para que la navegación se diera correctamente?? Commented el 25 abr. 2021 a las 14:09
  • 1
    En el login.routing.module solo va una ruta sencilla: { path: '', component: LoginComponent } que hace referencia al componente que se va a cargar y el login.module importa a login.routing.module. Se hace así por cada componente para habilitar el lazy loading para que la aplicación inicie lo más rápido posible.
    – Lobos
    Commented el 25 abr. 2021 a las 14:37
  • 1
    En el login.routing.module agregaste RouterModule.forChild(routes) en el arreglo de imports? y luego agregaste RouterModule al arreglo de exports? gist.github.com/crrlos/6dd4bbb7039264ac98679021822f2ffa
    – Lobos
    Commented el 25 abr. 2021 a las 17:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.