0
284
Viewsangular 9 loadchildren no carga css, js, archivo de imagen
Esta pregunta ya se hizo pero no me funciona, soy nuevo en Angular 9 .
Tengo carpetas de admin y catelog en mi proyecto Angular 9 . Para la carpeta de admin , trato de cargar todos admin-components , y la carpeta de catelog , intento cargar catelog-components .
CSS , js e images no se cargan en catelog verifique debajo de la imagen 
app-routing.module.ts
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { AuthGuard } from './admin/helper/auth.guard'; import { LoginComponent } from './admin/pages/login/login.component'; const adminModule = () => import('./admin/pages/pages.module').then(x => x.PagesModule); const catelogPageModule = () => import('./catelog/pages/catelog.module').then(x => x.CatelogModule); const routes: Routes = [ // catalog url { path: '', loadChildren:catelogPageModule }, //admin url { path: 'login', component: LoginComponent }, { path: 'admin', loadChildren:adminModule, canActivate: [AuthGuard] }, // otherwise redirect to home // { path: '**', redirectTo: 'home' } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }catálogo.módulo.ts
import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { CatelogRoutingModule } from './catelog-routing.module'; import { HomeComponent } from './home/home.component'; import { CommonComponent } from './common/common.component'; import { AboutUsComponent } from './about-us/about-us.component'; @NgModule({ declarations: [ CommonComponent, HomeComponent, AboutUsComponent, ], imports: [ CommonModule, ReactiveFormsModule, CatelogRoutingModule, FormsModule ] }) export class CatelogModule { }catelog-routing.module.ts
import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { AboutUsComponent } from './about-us/about-us.component'; import { CommonComponent } from './common/common.component'; import { HomeComponent } from './home/home.component'; const routes: Routes = [ { path: '', component:CommonComponent, children:[ { path: 'home', component: HomeComponent }, { path: 'about-us', component: AboutUsComponent }, ] } ]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class CatelogRoutingModule { }app\catelog\pages\common\common.component.html
<!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Title</title> <!-- CSS here --> <link href="/assets/catelog/assets/css/bootstrap.min.css"> </head> <body> <!-- header-area --> <header> <!-- menu-area --> </header> <!-- header-area-end --> <!-- Main content --> <router-outlet></router-outlet> <!-- Main content --> <!-- footer-area --> <footer class="dark-bg pt-55 pb-80"> copyrights </footer> <!-- footer-area-end --> <!-- JS here --> <script src="/assets/catelog/assets/js/vendor/jquery-3.5.0.min.js"></script> <script src="/assets/catelog/assets/js/main.js"></script> </body> </html>Mi estructura de carpetas:
La carpeta de
AdminCSS,jseimagesfuncionan correctamente, pero la carpeta decatelogCSS,jseimagesno se cargan.
Por favor, ayúdame a resolver este problema.
2 answers
Answer question0
No debería poner <html><body>...</body> completo dentro de la plantilla de su componente. El common.component.html debería verse así:
<header>someHeader</header> <router-outlet></router-outlet> <footer>some data</footer> Entonces, sin <html>, <body>, <srcipts> etc. Si necesita cargar bootstrap.css, puede hacerlo en el archivo global styles.scss , y para cargar archivos js puede usar angular.json (hay un lugar para colocar js adicionales allí)
0
Debe seguir lo que Panda ya sugirió, pero modificaré un poco la respuesta en función del problema de css que enfrenta
Estructura las rutas de tu proyecto según la siguiente página principal
<html> <body> <header-comp/> <app-comp></app-comp> <footer-comp/> </body> </body>En el componente de la aplicación html
<router-outlet/>En el módulo del componente de la aplicación Agregue el componente de la aplicación, agregue rutas a dos módulos de carga diferida home y admin más una entrada de ruta adicional que redirige la ruta predeterminada al módulo de inicio
Ahora, dado que home y admin son dos módulos, cada uno tendrá su propia página de inicio, esa página de inicio es la entrada predeterminada del módulo de enrutamiento home/admin con rutas secundarias a otras páginas de módulos y su html se ve así
<router-outlet></router-outlet>En la definición del componente de la página de inicio del módulo, agregue la versión css de la correa de barco deseada
@component({ selector:'home-app-comp', html:'<router-outlet/>', styleUrl:[path to css file] })Toda la idea se basa en tener algún tipo de rutas anidadas donde la página principal de cada módulo carga la versión de arranque deseada y actúa como un contenedor principal para el resto de las páginas del módulo.