Menu
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:
AdminfolderCSS,jsandimagesworking properly, butcatelogfolderCSS,jsandimagesnot loading.
Please help me to short out this issue.
647
asked Apr 13 '26 22:04
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 )
108
answered Apr 15 '26 12:04
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With