I am having trouble with CSS, JS, and image files not loading when using Angular 9 loadChildren

Question

I am having trouble with CSS, JS, and image files not loading when using Angular 9 loadChildren

I am facing an issue with loading CSS, JS, and images in my Angular 9 project. I have separate 'admin' and 'catalog' folders where I want to load different components. However, the assets are not loading properly in the 'catalog' folder as shown in the image below:

https://i.sstatic.net/vOGe2.jpg

Here is my routing configuration in app-routing.module.ts:

 // Routing configuration code here

In catelog.module.ts:

// Module imports and declarations

In catelog-routing.module.ts:

// Routing configuration for catalog module

Contents of app\catelog\pages\common\common.component.html:

// HTML code for common component

My folder structure:

https://i.sstatic.net/8bB3I.jpg

I am able to load CSS, JS, and images properly in the 'admin' folder, but facing issues with the 'catalog' folder. Can someone please assist me in resolving this problem?

Please provide guidance to fix this loading issue.

javascript jquery angular typescript angular9

Answer 1

Answer №1

A better practice is to avoid putting entire

<html><body>...</body>

within your component template. Instead, the common.component.html should be structured like this:

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

This means excluding elements such as

<html>, <body>, <srcipts>

, etc. If you require bootstrap.css, it's recommended to load it in the global styles.scss file. For loading JS files, utilize angular.json (there is a section dedicated for additional JS scripts).

Answer 2

A better practice is to avoid putting entire

<html><body>...</body>

within your component template. Instead, the common.component.html should be structured like this:

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

This means excluding elements such as

<html>, <body>, <srcipts>

, etc. If you require bootstrap.css, it's recommended to load it in the global styles.scss file. For loading JS files, utilize angular.json (there is a section dedicated for additional JS scripts).

Answer 3

Answer №2

To solve the css issue you are facing, consider implementing the following project route structure:

Begin by structuring your project routes as follows:

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

In the app component html file, include the router outlet:

<router-outlet/>

In the app component module, add routes to two lazy loading modules (home and admin) along with an extra route entry that redirects the default route to the home module.

Each module (home and admin) will have its own homepage, serving as the default entry point of the routing module with sub children routes to other pages. Here is an example of what the html for that page might look like:

<router-outlet></router-outlet>

In the module's homepage component definition, make sure to specify the desired bootstrap css version:

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

This approach emphasizes nested routes, where each module's main page loads a specific bootstrap version and serves as a parent container for the rest of the module's pages.

Answer 4

To solve the css issue you are facing, consider implementing the following project route structure:

Begin by structuring your project routes as follows:

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

In the app component html file, include the router outlet:

<router-outlet/>

In the app component module, add routes to two lazy loading modules (home and admin) along with an extra route entry that redirects the default route to the home module.

Each module (home and admin) will have its own homepage, serving as the default entry point of the routing module with sub children routes to other pages. Here is an example of what the html for that page might look like:

<router-outlet></router-outlet>

In the module's homepage component definition, make sure to specify the desired bootstrap css version:

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

This approach emphasizes nested routes, where each module's main page loads a specific bootstrap version and serves as a parent container for the rest of the module's pages.

I am having trouble with CSS, JS, and image files not loading when using Angular 9 loadChildren

Answer №1

Answer №2

Similar questions

Prevent unnecessary requests for asset images in Angular 5

Configuring React classes for compilation within Play

A Simple Guide to Setting a Background Image in React Native with the Nativebase.io Library

Remove the class from all child elements and apply the class to the parent or ancestor of the element that was clicked on using

What is the best way to create Jest unit tests for an Angular Component without using TestBed?

Error 404: Angular version 18 - Request not found

Determine the aspect ratio of the image and incorporate it into the query string

PrestaShop - Using ajax to update a JSON object with PUT request

Sending documents to a printer directly from a Rails application

Send a Symfony form between different views using ajax

Steps for opening standalone angular2 and TypeScript project in visual studio: A guide to launching your project

What is the best way to insert an HTML attribute into a dynamically generated build script within Angular?

Transform PHP array into a properly structured array or object that can be easily used in JavaScript

Managing Errors in Angular: Utilizing Interceptors and Modal Pop-ups

Challenge in backward compatibility when converting from .on() to .live()

Using Conditions in AngularJS: Choosing Between Callbacks and Promises in a Service

The div that scrolls gracefully within its boundaries

Convert a binary array into a signed 64-bit integer

Service Registry with TypeScript type safety

What is the process for creating a symbolic link from a project's node_modules directory?