0

Estoy realizando unas pruebas para cargar componentes de Angular con y sin Lazy load.

En la versión sin lazy loaded, se me está produciendo un error que indica que no me reconoce ni el router-outlet ni los componetes app-cabecera y app-pie.

Sin embargo, los tengo importados y en su módulo los exporto y no me muestra error.

Este es el mensaje:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Las rutas que estoy utilizando son las siguientes:

- auth
    \login
    \registro  
    
- contacto
    
- public (app)

    \inicio

    \anuncios
        \nuevo
    
    \fiestas 
        \nueva
    
    \noticias
        \nueva

¿Sabéis que puede estar pasando? Por más que lo veo, no encuentro nada raro.

Esta es la versión en github:

https://github.com/anubedam/menu/releases/tag/v1.0-sin-lazy

ANEXO: Código del ejemplo

Incluyo el código del ejemplo para que la pregunta no pierda la consistencia en el caso de que el repositorio de Github desaparezca.

auth.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/* Módulo de rutas */
import { AuthRoutingModule } from './auth-routing.module';

/* Componentes pertenecientes a AuthModule */
import { LoginComponent } from './pages/login/login.component';
import { RegistroComponent } from './pages/registro/registro.component';

@NgModule({
  declarations: [
    /* Componentes que pertenecen a Auth Module */
    LoginComponent, 
    RegistroComponent
  ],
  imports: [
    /* Componentes pertenecientes a AuthModule */
    CommonModule,
    AuthRoutingModule
  ]
})
export class AuthModule { }

auth-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

/* Componentes que se renderizan */
import { LoginComponent } from './pages/login/login.component';
import { RegistroComponent } from './pages/registro/registro.component';

const routes: Routes = [
   { 
     path: 'auth', 
     children: [
       { path: 'login', component: LoginComponent },
       { path: 'registro', component: RegistroComponent },
       { path: '**', redirectTo: 'login' }
     ]
   } 
];

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

login.component.html:

<h1 class="text-center">Página de Login</h1>
<hr>

login.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

registro.component.html:

<h1 class="text-center">Página de registro</h1>
<hr>

registro.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-registro',
  templateUrl: './registro.component.html',
  styleUrls: ['./registro.component.css']
})
export class RegistroComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

contacto.component.html:

<h1 class="text-center">Página de Contacto</h1>
<hr>

contacto.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-contacto',
  templateUrl: './contacto.component.html',
  styleUrls: ['./contacto.component.css']
})
export class ContactoComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

shared.module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/* Componentes pertenecientes al módulo shared */
import { CabeceraComponent } from './cabecera/cabecera.component';
import { PieComponent } from './pie/pie.component';

/* Módulo para poder realizar la navegación */
import { RouterModule } from '@angular/router';

@NgModule({
  declarations: [
    /* Componentes pertenecientes al módulo Shared */
    CabeceraComponent,
    PieComponent
  ],
  imports: [
    /* Módulo que necesitan nuestros componentes */
    CommonModule,
    RouterModule
  ],
  exports: [
    /* Componentes que se utilizarán fuera de este módulo */
    CabeceraComponent,
    PieComponent
  ]
})
export class SharedModule { }

cabecera.component.html:

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container-fluid">
        <!-- Icono de inicio -->
        <a class="navbar-brand" 
           routerLink="/app"
           routerLinkActive="active">
           
           Inicio
        </a>
            <button class="navbar-toggler" 
                    type="button" 
                    data-bs-toggle="collapse" 
                    data-bs-target="#menu-inicio">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- Opciones del menú que se renderizan -->
        <div class="collapse navbar-collapse" 
             id="menu-inicio">

            <ul class="navbar-nav me-auto mb-2 mb-lg-0">

                <!-- Menú anuncios -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" 
                       href="#" id="menu-anuncio" 
                       role="button" 
                       data-bs-toggle="dropdown">

                       Anuncios
                    </a>

                    <!-- Opciones del desplegable -->
                    <ul class="dropdown-menu" 
                        aria-labelledby="menu-anuncio">

                        <li>
                            <a class="dropdown-item" 
                               routerLink="/app/anuncios"
                               routerLinkActive="active">

                                Anuncios
                            </a>
                        </li>

                        <li>
                            <a class="dropdown-item" 
                               routerLink="/app/anuncios/nuevo"
                               routerLinkActive="active">

                                Nuevo anuncio
                            </a>
                        </li>
                    </ul>
                </li>

                <!-- Menú fiestas -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" 
                       href="#" id="menu-fiestas" 
                       role="button" 
                       data-bs-toggle="dropdown">

                       Fiestas
                    </a>

                    <!-- Opciones del desplegable -->
                    <ul class="dropdown-menu" 
                        aria-labelledby="menu-fiestas">

                        <li>
                            <a class="dropdown-item" 
                               routerLink="/app/fiestas"
                               routerLinkActive="active">

                                Fiestas
                            </a>
                        </li>

                        <li>
                            <a class="dropdown-item" 
                               routerLink="/app/fiestas/nueva"
                               routerLinkActive="active">

                               Nueva fiesta
                            </a>
                        </li>
                    </ul>
                </li>

                <!-- Menú Noticias -->
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" 
                       href="#" id="menu-noticias" 
                       role="button" 
                       data-bs-toggle="dropdown">

                       Noticias
                    </a>

                    <!-- Opciones del desplegable -->
                    <ul class="dropdown-menu" 
                        aria-labelledby="menu-noticias">

                        <li>
                            <a class="dropdown-item" 
                               routerLink="/app/noticias"
                               routerLinkActive="active">

                               Noticias
                            </a>
                        </li>

                        <li>
                            <a class="dropdown-item" 
                               routerLink="/app/noticias/nueva"
                               routerLinkActive="active">
                               
                               Nueva noticia
                            </a>
                        </li>
                    </ul>
                </li>

            </ul>
        </div>
    </div>
</nav>

cabecera.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-cabecera',
  templateUrl: './cabecera.component.html',
  styleUrls: ['./cabecera.component.css']
})
export class CabeceraComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
 

pie.component.css:

ul{
    list-style-type: none;
}

li a{
    text-decoration: none;
}

pie.component.html:

<ul class="d-flex flex-row justify-content-center py-3">
    <li>
        <a href="#">Política de privacidad</a>
    </li>
    <li class="ms-4">
        <a href="#">Cookies</a>
    </li>
</ul>

pie.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-pie',
  templateUrl: './pie.component.html',
  styleUrls: ['./pie.component.css']
})
export class PieComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

/* Componentes que se renderizarán */
import { ContactoComponent } from './contacto/pages/contacto.component';

/* Módulos con las rutas hijas */
import { AuthRoutingModule } from './auth/auth-routing.module';
import { PublicRoutingModule } from './public/public-routing.module';

/* Rutas principales de la aplicacion */
const routes: Routes = [
  /* /auth -> Login y registro */
  /* /app  -> Rutas protegidas */
  { path: 'contacto', component: ContactoComponent },
  { path: '**', redirectTo: 'auth'}   
];

@NgModule({
  imports: [
    /* Módulos que necesita mi aplicacion */
    RouterModule.forRoot(routes),
    AuthRoutingModule,
    PublicRoutingModule
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html:

<!-- Navegación inicial hacia las rutas principales -->
<router-outlet></router-outlet>

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'menus';
}

app.module.ts:

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

/* Módulo de rutas principales */
import { AppRoutingModule } from './app-routing.module';

/* Componentes que pertenecen al bundle principal de la aplicación */
import { AppComponent } from './app.component';
import { ContactoComponent } from './contacto/pages/contacto.component';

@NgModule({
  declarations: [
    /* Componentes que pertenecen al bundle principal */
    AppComponent,
    ContactoComponent
  ],
  imports: [
    /* Módulos que necesita nuestro bundle principal */
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Menus</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<body>
  <!-- Aplicación de angular -->
  <app-root></app-root>

  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

styles.css:

html, body{
    height: 100%;
}

public.component.html:

<!-- Cabecera -->
<!-- <app-cabecera class="fixed-top"></app-cabecera> -->
<app-cabecera></app-cabecera>

<!-- contenido principal -->
<!--<router-outlet class="contenido"></router-outlet>-->
<router-outlet></router-outlet>

<!-- Pie de página -->
<app-pie></app-pie>

public.component.css:

app-pie{
    background-color: black;
    color: white;
}

.contenido{
    height: 100%;
    min-height: 100%;
    padding: 80px auto 100px;
}

public.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-public',
  templateUrl: './public.component.html',
  styleUrls: ['./public.component.css']
})
export class PublicComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

public.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/* Módulo de rutas para public  */
import { PublicRoutingModule } from './public-routing.module';

/* Módulo shared - para poder utilizar cabecera y pie */
import { SharedModule } from '../shared/shared.module';

/* Componentes pertenecientes al módulo public */
import { PublicComponent } from './public.component';
import { InicioComponent } from './inicio/inicio.component';

@NgModule({
  declarations: [
    /* Componentes pertenecientes a este módulo */
    PublicComponent,
    InicioComponent
  ],
  imports: [
    /* Módulos qu0e utiliza nuestro módulo public */
    CommonModule,
    PublicRoutingModule,
    SharedModule
  ]
})
export class PublicModule { }

public-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

/* Componentes renderizados */
import { PublicComponent } from './public.component';
import { InicioComponent } from './inicio/inicio.component';

/* Rutas nietas de app */
import { anunciosRoutes } from './anuncios/anuncios.routes';
import { fiestasRoutes } from './fiestas/fiestas.routes';
import { noticiasRoutes } from './noticias/noticias.routes';

const routes: Routes = [
    { 
      path: 'app',
      component: PublicComponent,
      children: [
        { path: '', pathMatch: 'full', component: InicioComponent },
        { path: 'anuncios', children: anunciosRoutes },
        { path: 'fiestas', children: fiestasRoutes },
        { path: 'noticias', children: noticiasRoutes },
        { path: '**', redirectTo: '/'}
      ]
    }
];

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

anuncios.component.html:

<h1 class="text-center">Todos los anuncios</h1>
<hr>

anuncios.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-anuncios',
  templateUrl: './anuncios.component.html',
  styleUrls: ['./anuncios.component.css']
})
export class AnunciosComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

nuevo-anuncio.component.html

<h1 class="text-center">Nuevo anuncio</h1>
<hr>

nuevo-anuncio.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-nuevo-anuncio',
  templateUrl: './nuevo-anuncio.component.html',
  styleUrls: ['./nuevo-anuncio.component.css']
})
export class NuevoAnuncioComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

anuncios.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/* Módulo de rutas de Anuncios */
import { AnunciosRoutingModule } from './anuncios-routing.module';

/* Componentes pertenecientes al módulo anuncios */
import { AnunciosComponent } from './pages/anuncios/anuncios.component';
import { NuevoAnuncioComponent } from './pages/nuevo-anuncio/nuevo-anuncio.component';

@NgModule({
  declarations: [
    /* Componentes pertenecientes a este módulo */
    AnunciosComponent,
    NuevoAnuncioComponent
  ],
  imports: [
    /* Módulos que necesitan nuestros componentes */
    CommonModule,
    AnunciosRoutingModule
  ]
})
export class AnunciosModule { }

anuncios.routes.ts:

import { Routes } from '@angular/router';

/* Componentes que se renderizan */
import { AnunciosComponent } from './pages/anuncios/anuncios.component';
import { NuevoAnuncioComponent } from './pages/nuevo-anuncio/nuevo-anuncio.component';

export const anunciosRoutes: Routes = [
    {
      path: '', /* Path /app/anuncios */
      children: [
        { path: '', pathMatch: 'full', component: AnunciosComponent },
        { path: 'nuevo', component: NuevoAnuncioComponent },
        { path: '**', redirectTo: '/' }             
      ]
    }
];

fiestas.component.html:

<h1 class="text-center">Todas las fiestas</h1>
<hr>

fiestas.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-fiestas',
  templateUrl: './fiestas.component.html',
  styleUrls: ['./fiestas.component.css']
})
export class FiestasComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

nueva-fiesta.component.html:

<h1 class="text-center">Nueva fiesta</h1>
<hr>

nueva-fiesta.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-nueva-fiesta',
  templateUrl: './nueva-fiesta.component.html',
  styleUrls: ['./nueva-fiesta.component.css']
})
export class NuevaFiestaComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

fiestas.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/* Módulo de rutas de fiestas */
import { FiestasRoutingModule } from './fiestas-routing.module';

/* Componentes que pertenecen a este módulo */
import { FiestasComponent } from './pages/fiestas/fiestas.component';
import { NuevaFiestaComponent } from './pages/nueva-fiesta/nueva-fiesta.component';

@NgModule({
  declarations: [
    /* Componente del módulo fiestas */
    FiestasComponent,
    NuevaFiestaComponent
  ],
  imports: [
    /* Módulos que necesitan los componentes de este módulo */
    CommonModule,
    FiestasRoutingModule
  ]
})
export class FiestasModule { }

fiestas.routes.ts:

import { Routes } from '@angular/router';

/* Componentes que se renderizan */
import { FiestasComponent } from './pages/fiestas/fiestas.component';
import { NuevaFiestaComponent } from './pages/nueva-fiesta/nueva-fiesta.component';

export const fiestasRoutes: Routes = [
  {
    path: '', /* Ruta base: /app/fiestas */
    children: [
      { path: '', pathMatch: 'full', component: FiestasComponent },
      { path: 'nueva', component: NuevaFiestaComponent },
      { path: '**', redirectTo: '/' } 
    ]
  }
];

inicio.component.html:

<h1 class="text-center">Inicio</h1>
<hr>

inicio.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-inicio',
  templateUrl: './inicio.component.html',
  styleUrls: ['./inicio.component.css']
})
export class InicioComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

noticias.component.html:

<h1 class="text-center">Todas las noticias</h1>
<hr>

noticias.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-noticias',
  templateUrl: './noticias.component.html',
  styleUrls: ['./noticias.component.css']
})
export class NoticiasComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

nueva-noticia.component.html:

<h1 class="text-center">Nueva noticia</h1>
<hr>

nueva-noticia.component.ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-nueva-noticia',
  templateUrl: './nueva-noticia.component.html',
  styleUrls: ['./nueva-noticia.component.css']
})
export class NuevaNoticiaComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

noticias.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/* Módulo de rutas de noticias */
import { NoticiasRoutingModule } from './noticias-routing.module';

/* Componentes del módulo de noticias */
import { NoticiasComponent } from './pages/noticias/noticias.component';
import { NuevaNoticiaComponent } from './pages/nueva-noticia/nueva-noticia.component';

@NgModule({
  declarations: [
    /* Componentes que pertenecen a este módulo */
    NoticiasComponent, 
    NuevaNoticiaComponent
  ],
  imports: [
    /* Módulos que necesitan nuestros componentes */
    CommonModule,
    NoticiasRoutingModule
  ]
})
export class NoticiasModule { }

noticias.routes.ts:

import { Routes } from '@angular/router';

/* Componentes que se van a renderizar */
import { NoticiasComponent } from './pages/noticias/noticias.component';
import { NuevaNoticiaComponent } from './pages/nueva-noticia/nueva-noticia.component';

export const noticiasRoutes: Routes = [
  {
    path: '', /* Ruta base /app/noticias */
    children: [
      { path: '', pathMatch: 'full', component: NoticiasComponent },
      { path: 'nueva', component: NuevaNoticiaComponent },
      { path: '**', redirectTo: '/' }    
    ]
  }
];

Muchas gracias :D

4
  • 1
    ¿cómo los tienes importados? no has puesto nada de código el 29 jul. 2021 a las 11:52
  • Hola Pablo. Puse el repo de github para no recargar demasiado la pregunta: github.com/anubedam/menu/tree/sin-lazy-load
    – Antonio U.
    el 29 jul. 2021 a las 13:58
  • 1
    Es política de este sitio no depender de terceros: si ese repositorio es eliminado o renombrado, la pregunta quedará inutilizada el 29 jul. 2021 a las 14:22
  • Tienes toda la razón. No lo había pensado.. Voy a ponerlo como un anexo a la pregunta.
    – Antonio U.
    el 29 jul. 2021 a las 16:04

1 respuesta 1

0

Hola debes importar el SharedModule en AuthModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

/* Módulo de rutas */
import { AuthRoutingModule } from './auth-routing.module';

/* Componentes pertenecientes a AuthModule */
import { LoginComponent } from './login/login.component';
import { RegistroComponent } from './registro/registro.component';
import { SharedModule } from '../shared/shared.module';

@NgModule({
  declarations: [LoginComponent, RegistroComponent],
  imports: [
    /* Componentes pertenecientes a AuthModule */
    CommonModule,
    AuthRoutingModule,
    SharedModule // Agregar El Modulo Shared para poderlo usar
  ]
})
export class AuthModule { }
1
  • Hola @Alexander Diaz. La cabecera y el pie de página sólo los utilizo en las páginas privadas (/app), pero aún así lo he puesto y sigue fallando: github.com/anubedam/menu/tree/sin-lazy-load. Es muy raro esto que pasa.
    – Antonio U.
    el 29 jul. 2021 a las 14:00

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.