javascript - angular 9 loadchildren nu încarcă fișiere css, js, imagine

Această întrebare a fost deja pusă, dar nu funcționează pentru mine, sunt nou în Angular 9.

Am folderele admin și catelog în proiectul meu Angular 9. Pentru folderul admin încerc să încarc toate admin-components, iar pentru folderul catelog încerc să încarc catelog-components.

CSS, js și imagini nu se încarcă în catelog, verifică imaginea de mai jos

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

catelog.module.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>

Structura mea de foldere:

Folderul Admin CSS, js și images funcționează corect, dar folderul catelog CSS, js și images nu se încarcă.

Te rog să mă ajuți să rezolv această problemă.

Răspuns #1

Nu ar trebui să pui întregul <html><body>...</body> în interiorul șablonului componentului tău. common.component.html ar trebui să arate așa:

<header>someHeader</header>
<router-outlet></router-outlet>
<footer>some data</footer>

Deci fără <html>, <body>, <srcipts> etc. Dacă trebuie să încarci bootstrap.css - poți face asta în fișierul global styles.scss, iar pentru încărcarea fișierelor js poți folosi angular.json (acolo există un loc pentru a adăuga fișiere js suplimentare)

Răspunsul #2

Ar trebui să urmezi ceea ce a sugerat deja Panda, dar voi modifica puțin răspunsul în funcție de problema CSS cu care te confrunți

Structurați rutele proiectului dvs. conform următoarei Pagini principale

<html>
  <body>
     <header-comp/>
      <app-comp></app-comp>
     <footer-comp/>
   </body>
 </body>

La componenta app html

<router-outlet/>

La modulul componentă app Adaugă componenta app, adaugă rute către două module de încărcare leneșă home și admin plus o intrare suplimentară de rută care redirecționează ruta implicită către modulul home

Acum, deoarece home și admin sunt două module, fiecare va avea propria pagină principală, acea pagină principală este intrarea implicită a modulului de rutare home/admin cu sub-rute către paginile altor module și HTML-ul său arată astfel

<router-outlet></router-outlet>

În definiția componentei paginii principale a modulului adaugă versiunea dorită de CSS Bootstrap

@component({
 selector:'home-app-comp',
 html:'<router-outlet/>',
 styleUrl:[path to css file]
 })

Întreaga idee se bazează pe a avea un fel de rute imbricate în care pagina principală a fiecărui modul încarcă versiunea dorită de bootstrap și acționează ca un container părinte pentru restul paginilor modulului.