Question

0

282

Views

angular 9 loadchildren doesn't load css, js, image file

This question already asked but it doesn't work for me, am new in Angular 9.

I have admin and catelog folders in my Angular 9 project. For admin folder I try to load all admin-components, and catelog folder I try to load catelog-components.

CSS, js and images not loading in catelog check below image

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>

My folder structure:

Admin folder CSS, js and images working properly, but catelog folder CSS, js and images not loading.

Please help me to short out this issue.

over 4 years ago · Santiago Trujillo

2 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-03-25T14:52:33.772Z

You shouldn't be putting whole <html><body>...</body> inside your component template. The common.component.html should look like:

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

So without <html>, <body>, <srcipts> etc. If you need to load bootstrap.css - you can do it in global styles.scss file, and for loading js files you can use angular.json ( there is a place to place additional js over there )

Answer 2 · 2022-03-25T14:52:34.047Z

You should follow what Panda already suggested but I will modify little bit the answer based on the css issue you are facing

Structure your project routes as per following Main page

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

At app component html

<router-outlet/>

At app component module Add app component, add routes to two lazy loading modules home and admin plus extra route entry that redirects default route to home module

Now since home and admin are two modules each will have its own home page , that home page is is the default entry of the home/admin routing module with sub children routes to other module pages and its html looks like that

<router-outlet></router-outlet>

In the module home page component definition add the desired boatstrap css version

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

The whole idea is based on having some sort of nested routes where each module main page loads desired bootstrap version and acts as a parent container for the rest of the module pages

0

282

angular 9 loadchildren doesn't load css, js, image file

2 answers

0

0

Find remote jobs

Andres GPT