Lazy loading in Angular - struggling to verify its functionality

A module for lazy loading was created by me.

This particular module is called SettingsRoutingModule-

 const routes: Routes = [
        {
            path: '',
            component: SettingsStandaloneComponent,
            children: [
                {
                    path: '',
                    redirectTo: 'profile',
                    pathMatch: 'full'
                },
                {
                    path: 'profile',
                    component: SettingsProfileComponent
                },
                {
                    path: 'about',
                    component: SettingsAboutComponent
                },
                {
                    path: 'affiliations',
                    component: SettingsAffiliationsComponent
                },
                {
                    path: 'communication',
                    component: SettingsCommunicationComponent
                },
                {
                    path: 'notifications',
                    component: SettingsNotificationsComponent
                },
                {
                    path: 'proxies',
                    component: SettingsProxiesComponent
                },
                {
                    path: '**',
                    redirectTo: 'profile',
                    pathMatch: 'full'
                }
            ]
        }
    ];

    @NgModule({
        imports: [RouterModule.forChild(routes)],
        exports: [RouterModule]
    })
    export class SettingsRoutingModule { }

In the AppRoutingModule module-

{ path: 'settings',
    loadChildren: './settings/settings.module#SettingsModule',
    canActivate: [AuthGuard],
},

When viewing the production environment, it seems like I am not seeing the expected "chunk.js" file in the network. Instead, only two files appear that are named similar to- 0.34016a93d44e785b623a.js

On localhost, all I see is a file labeled "settings-settings-module.js"

Is this normal or does it indicate that my module is not being lazily loaded as intended?

Answer №1

With the inclusion of the setting "namedChunks": false in your angular.json file, you will no longer observe named chunks being displayed. Instead, hashed values are now utilized as the file names. This change is a result of recent enhancements implemented in the angular/cli framework.

Answer №2

Indeed, everything is in order now. The chunk.js file no longer appears. Instead, a lazy loaded module is visible with its name on the network tab just as you described. It is only displayed once initially. To view it again, simply clear all data by clicking on the circle with a line through it located in the top left corner of the Network Tab:

https://i.sstatic.net/Ad26p.png

Answer №3

Just a helpful reminder - make sure to check for any filters in Chrome Debugging tools under the Network tab. It can be frustrating if something is filtered out and you're unaware of it, causing confusion even when everything seems perfectly set up.

As a cautionary tale, I once had 'fa' being filtered which rendered it invisible to me. Here's a screenshot for proof.

Always double-check after making changes to avoid similar issues. You can see the difference in this image.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The mat-checkbox is failing to accurately reflect its checked state

This code snippet is from my .html file: <mat-checkbox [checked]="getState()" (change)="toggleState()">Example Checkbox</mat-checkbox> <br><br> <button mat-raised-button color="primary" (click)=" ...

Angular is not properly integrating Bootstrap features

I've been attempting to create bootstrap accordion items, but unfortunately they're not functioning correctly as shown in the Bootstrap documentation or YouTube tutorials. In my angular.json file, I have included both bootstrap and jQuery for te ...

Why is the JavaScript function loaded through Ajax not running as expected?

I manage several websites with identical data protection policies. To streamline the process, I've created a file on a separate server that can be accessed through Ajax integration. One crucial aspect is the ability to set an opt-out option and store ...

Navigating the screen reader with the cursor位

Site Design Challenge I recently discovered that the master/detail design of my website is not very accessible. The main view features a column chart where each column represents a different month. Clicking on one of these columns reveals details in a nes ...

IntelliJ IDEA does not support the recognition of HTML tags and directives

I seem to have lost the ability to switch between my HTML and TS files in Intellij IDEA; the tags, directives, and autocompletion in HTML are no longer working. Additionally, I'm receiving some warnings: https://i.stack.imgur.com/QjmNk.png Is there ...

What is the best way to prevent text from being dragged within a contenteditable div?

Currently, I am working on a contenteditable div. This div has a default behavior that allows you to drag pieces of text around. I have tested this behavior on Chrome/Windows only so far. https://i.sstatic.net/IWLsY.gif I am looking for a way to disable ...

Execute another Ajax request using jQuery after the first Ajax callback has been completed

Looking for a solution to ensure the correct order of appended contents loaded via ajax, I have the following script: $.get('http://mydomain.com/ajax1.php/', function(data){ var data_one = $(data).find('#ajax_editor_suggestion_c ...

How to access the template html in Angular 8 (or 9) before compilation

I'm working on developing a "help center" for my colleagues in the development team, providing guidance on using components and more. My goal is to create a component that displays both the output and the code used to generate it, like this: <app ...

Why is my Angular promise unexpectedly landing in the error callback?

I am facing an issue with my Angular + Typescript client. I have developed a PHP API and need to send a post request to it. Upon receiving the request, the server fills the response body with the correct data (verified through server debugging). However, w ...

Why is it that styling <div> and <img> with a URL doesn't seem to work, even when applying the same styles?

In the example I have, I apply the same styling to an image and a div. Interestingly, the styling on the div makes the image look significantly better, while on the image itself it appears distorted. What could be causing this discrepancy? Both elements a ...

sending parameters to a function provided by a different controller

I am facing an issue with passing parameters to a method declared in controller B, mentioned as conB.js and the code snippet looks like this module.exports.verify = function(req,res,next){ // how do I obtain the parameter here? } Now, I have conA.js. How ...

Create a new visual masterpiece using Canvas by repurposing an

I am currently working on the following code snippet; export default async function draw(elRef : RefObject<HTMLCanvasElement>, tileData : TileProps) { const canvas = elRef.current!; const ctx = canvas.getContext('2d')!; ctx.clearRect( ...

Preventing Users from Accessing a PHP Page: Best Practices

I'm currently focusing on a problem that involves restricting a user from opening a PHP page. The following is my JavaScript code: <script> $('input[id=f1email1]').on('blur', function(){ var k = $('inp ...

JavaScript Popup prompting user on page load with option to redirect to another page upon clicking

Can a JavaScript prompt box be created that redirects to a site when the user selects "yes" or "ok," but does nothing if "no" is selected? Also, can this prompt appear on page load? Thank you! UPDATE: Answer provided below. It turns out it's simpler ...

What is the process of asynchronously importing a module's exported function using dynamic imports and then executing it?

When working with asynchronous callbacks in a promise promise.then(async callbackResultValue => { //here }) I experimented with this code: const browserd = await import('browser-detect'); if (typeof browserd === 'function') { ...

"Chrome is throwing an unanticipated error for bigpipe.js with an uncaught syntax error related to

I have integrated the bigpipe.js method into my website to display a newsfeed. It functions properly on all browsers except for Google Chrome, where it shows an 'uncaught syntaxerror unexpected token =' error. I need assistance in resolving this ...

Updating HTML using Angular JS with a nested dictionary is a breeze

As a newcomer to AngularJS, I am facing an issue with my code. I have created a dictionary in the controller scope and populated it after an HTTP request (key, value pair). The dictionary is being created successfully and there are no errors, but the HTML ...

What is the best approach to bring a button into focus after it has been enabled in a React.js application

I'm a beginner in react js and I'm attempting to set the focus on a button after filling out all input fields. However, despite programmatically enabling the button with autoFocus implemented, I am unable to focus on it. return ( < ...

Exploring the possibilities of integrating a keytar within an electron app built

I am trying to integrate keytar with my Electron app, however, I am encountering issues due to using Angular and Typescript. In my main.ts file, I have imported the module as follows: import * as keytar from 'keytar'; Unfortunately, this import ...

connect a column from a separate array in pdfmake

In my current project, I am looking to link the values of an array that is different from the one present in the initial two columns. Is this achievable? (The number of partialPrice values aligns with the number of code entries). Despite several attempts ...