I encountered a roadblock with my Npm start process when it got stuck at 70% completion after incorporating the "lazy

I have encountered a problem that has previously been discussed here, but none of the solutions seem to work for me. I recently incorporated this module into an existing project:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { DashboardComponent } from '../BackOffice/components/dashboard.component';

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    pathMatch: 'full'
  }];

@NgModule({
  imports: [
      CommonModule,
      RouterModule.forChild(routes)
  ],
  declarations: [DashboardComponent]
})
export class LazyModule { }

In my app.module:

 { path: 'lazy', loadChildren: 'app/lazy/lazy.module#LazyModule' },

However, when running "npm start," it gets stuck at 70% completion: https://i.sstatic.net/daPgR.png

If I remove the module, everything builds correctly. Just wanted to mention that this is in Angular 4. Thank you.

Answer №1

Are you attempting to access a module that is set up as lazy-loaded in the directory labeled lazy?

I've reviewed your folder structure here. However, there doesn't seem to be a directory named 'lazy' in there.

Where can I find your LazyModule class located?

If it's stored in a different directory, you can add the following code snippet within your AppModule:

 { path: 'lazy', loadChildren: './<your-deirectory-name>/lazy.module#LazyModule' },

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

Singleton constructor running repeatedly in NextJS 13 middleware

I'm encountering an issue with a simple singleton called Paths: export default class Paths { private static _instance: Paths; private constructor() { console.log('paths constructor'); } public static get Instance() { consol ...

Using TypeScript: Retrieve enum type value in type definition

I'm encountering an issue while attempting to define a specific type based on the value of an enum. enum E { A = "apple", B = "banana", C = "cherries" } // Defining the type EnumKey as 'A' | 'B ...

What is the best way to choose the member variables in this specific data structure?

I have been assigned the task of retrieving the cities from various countries, but I am unsure of the best approach to do so. How can I easily extract city names like: For example, for USA it would be NYC and SFO. I attempted using the code snippet cityD ...

What is the best way to prevent double clicks when using an external onClick function and an internal Link simultaneously

Encountering an issue with nextjs 13, let me explain the situation: Within a card component, there is an external div containing an internal link to navigate to a single product page. Using onClick on the external div enables it to gain focus (necessary f ...

Tips for ensuring webpack reflects changes made to your JavaScript code while using lite-server

Is it feasible to have webpack reflect JavaScript changes instantly when lite-server is running through npm? Currently, I find myself having to run npm build every time there are updates in my JavaScript files. Lute-server efficiently updates CSS changes ...

Having trouble integrating NEXT AUTH with Firebase due to an error: "Cannot import statement outside

Let's take a look at our firebase configuration file: import { getFirestore } from "firebase/firestore"; export const firebaseConfig = { apiKey: process.env.FIREBASE_API_KEY, authDomain: process.env.FIREBASE_AUTH_DOMAIN, projectId: pr ...

Difficulty fetching data on the frontend with Typescript, React, Vite, and Express

I'm currently working on an app utilizing Express in the backend and React in the frontend with typescript. This is also my first time using Vite to build the frontend. While my APIs are functioning correctly, I am facing difficulties fetching data on ...

Discover the solution for seamless integration of TypeScript with the novel `exports` and `main` field

I am currently utilizing Node.js version 16.10.0 along with TypeScript 4.5.5. As part of my development process, I am in the midst of publishing a library and have implemented the following configuration: "main": "./dist/index.js", ...

Is it possible to show elements from an ngFor loop just once when dealing with a two-dimensional string array in a display?

I have an array of nested strings, and I am attempting to display the contents of each inner array in a table format. My goal is to have the first table show the values from the first index of each inner array and the second table to display the values fro ...

Angular consistently marks form controls as mandatory, even in the absence of validators

Recently, I have been working on this code snippet where I make use of a deepCopy function to ensure that I avoid any unexpected pass by reference issues. const formGroup = this.allowances() formGroup.removeControl('allowanceEndDate') con ...

Learn how to set up a class using TypeScript decorators

Is there a way to automatically initialize a class when a specific decorator is present above the class? For example: @apiController export class usersControllers extends lib.baseClasses.apiControllerBase().apiController { @lib.decorators.routesRegist ...

Improving characteristics of an Observable Entity (Angular)

I have a question about Observables that I'm hoping someone can help me with. I am trying to work with an object that I want to turn into an Observable. Let's say the object is structured like this: export class Sample { public name: string; ...

Add a particular node_modules package to be tracked in git version control

One common practice is to exclude the /node_modules folder in the .gitignore file. # .gitignore /node_modules However, there may be instances where you want to include a specific node_modules package in your git version control system. For example, when ...

Omit the header and footer from the output when executing a grunt command

I'm using a grunt command, but it's showing a header and footer that I need to eliminate. This is my Gruntfile.js: module.exports = function(grunt) { grunt.initConfig({ exec: { ls: { command: 'ls -la ...

Tips for managing webtables in Angular with Selenium

I am looking to automate the webtable in angular. You can check out the website here: My goal is to extract all the records from every row on the table. Here's what I have attempted: List<WebElement> wbt=drv.findElements(By.cssSelector("div[ro ...

Angular - The argument provided is not compatible with the parameter

I encountered the following TypeScript errors in app.component.ts: Issue: Argument of type '(events: Event[]) => void' is not assignable to parameter of type '(value: Event[]) => void'. Description: Types of parameters 'e ...

The class constructor in the TSdx package must be invoked with the 'new' keyword

I recently developed a npm package using TSdx to create a small Jest reporter. However, when I try to use this package in another project, an error occurs. Uncaught TypeError: Class constructor BaseReporter cannot be invoked without 'new' at ...

What is the best way to style an Angular 2 link with a blue color and underline effect?

In my template, I have the following code: <a (click)="delete(book)">Delete</a> Although the link functions properly, it doesn't seem visually appealing. I don't necessarily want it to be blue and underlined, but I'm unsure of ...

Incorporating Bloodhound into an Angular 2 CLI project

I have been working on integrating Bloodhound.js into an Angular 2 project that utilizes Angular 2 CLI. Currently, I have successfully implemented jQuery by following these steps: Installed jQuery using npm install jquery --save Installed jQuery Type ...

What is the best way to run tests on customized Material-UI components with withStyles using react-testing-library?

Creating a test with a styled Material-UI component using react-testing-library in typescript has proven to be challenging, particularly when trying to access the internal functions of the component for mocking and assertions. Form.tsx export const style ...