Storing loadChildren content in a variable with Angular 2

I've been attempting to configure the Angular 2 router using a JSON file, but no matter what I try, there seems to be an issue.

One failed test is:

let mEx = "../dashboard/dashboard.module#DashboardModule";

let mdEx = mEx.split('#');
let mymod =() => require(mdEx[0])[mdEx[1]];

{ path: 'dashboard', loadChildren:mymod}

When trying to load from a variable, I encounter this problem:

ERROR Error: Uncaught (in promise): Error: Cannot find module "."

EDIT: Another unsuccessful test:

let mymod = "app/dashboard/dashboard.module#DashboardModule"; 
{ path: 'dashboard', loadChildren:mymod}

In this scenario, the router cannot locate the module.

ERROR Error: Uncaught (in promise): Error: Cannot find module 'app/dashboard/dashboard.module'.

However, it works if I use

loadChildren:'app/dashboard/dashboard.module#DashboardModule'

But when using the module path in a variable, things get confusing... ;)

EDIT 2:

It appears that the issue may be related to the webpack ng-router-loader. I am investigating how to resolve this since my project relies on this library...

Do you have any suggestions on how to fix this? Thank you in advance.

Answer №1

When using loadChildren in Angular, make sure to provide the entire URL path.

{ path: 'dashboard', loadChildren: "../dashboard/dashboard.module#DashboardModule"}

There is no need to manually load the dashboard module using require(). The Angular router will take care of it automatically.

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

What is the best method for retrieving the complete path of a FormControl in Angular versions 4 and above

Is there a way to obtain the complete path of a FormControl in Angular 4+? Below is my reactive form structure: { name: '', address: { city: '', country: '' } } I urgently require the full path o ...

Dynamically pass a template to a child component

How can I dynamically load content on my page based on the active navigation point? export class Sub_navigation_item { constructor( public title: string, public templateName: string ) {} } I have a navigation item with an ID from an ...

Angular 7 makes it a breeze to move elements using the drag and

Is there a way to drag and drop elements from an expansion panel while still keeping them displayed within the panel after being dropped? I am looking for Angular 7 code to achieve this functionality. Your assistance is much appreciated. I attempted to dr ...

Create an interface property value that behaves like Array.join(), but only accepts values from the keyof keyword

I am currently working with two interfaces: interface A { foo: string; bar: string; baz: string; } and: interface B { field: keyof A; } With interface B, I can set the field as 'foo' like this: const b: B = { field: 'foo' } ...

Precautionary assessment prior to executing a dynamic import()

Exploring the dynamic import capability in my React/TS project, I'm curious about whether it is essential to include the conditional check if (firebase.auth == undefined) in the expression if (firebase.auth == undefined) await import("firebase/au ...

Ways to effectively demonstrate to TypeScript how the object's property is of a particular type in a dynamic manner

To view a live example of the code, visit: https://codesandbox.io/s/typescript-playground-pzl2s I'm encountering an issue where the object contains two types of properties. At certain points, data is retrieved from the database with only the DRI chil ...

Troubleshooting inaccurate results when looping through JSON in the Parse database

Swift 2.0, xcode 7.1 I’m currently working on fetching data from a Parse database, filtering out duplicates, and storing the unique values in a dictionary. Each entry in the database represents orders placed by customers, and my goal is to display these ...

Using the ng object in Angular 2 in production mode

After enabling production mode with enableProdMode();, is there a method to access the ng object? ...

Issue: The type 'void' cannot be assigned to the type 'ReactNode' in the array.map() function

Having trouble with my function call error within the practice setup in App.tsx. My expectation of array.map() being compatible with TypeScript seems to be incorrect. The generated HTMLElement from this map is not displaying on screen. Any suggestions on ...

What is the best approach to transpiling TypeScript aliased paths to JavaScript?

I am currently facing an issue with my TypeScript project where I need to transpile it into executable JavaScript while using path aliases for my NPM package development. One specific scenario involves importing a method from the lib directory without spe ...

Difficulty encountered when establishing connections in a loop

I've implemented a Loopback API with a container in it and attempted to establish relations to my models using this access control example. However, when trying to add relations to container.js, I encountered an error: /home/mowso/Documents/loopback- ...

Ways to determine if a JSONArray Element is empty

I am struggling to determine whether an element within a JSON array is null. When checking if the jsonObject itself is null, I can simply use: jsonObject.isNullObject(); However, when dealing with an array and trying to check if a specific element inside ...

Transforming JSON data into a hierarchical tree structure in JSON format

I have a JSON treeData that I need to convert into a different format so that I can use a visualization library in JavaScript. treeData={ "leftNode": { "leftNode": { "leftNode": { "leftNode": { ...

Secure the response data through encryption in an Angular 5 project

Currently, I am developing a project using PHP and Angular 5. I want to ensure that the response displayed in the network tab is encrypted for security reasons. Is it possible to encrypt the response so that it cannot be read by users? ...

Firebase Web Push notification fails to trigger when the browser window is active

Trying to set up Firebase Web Push notification in Angular 10 Notifications work when the tab is inactive, but not triggering for new messages when active Firebase version: 8.3.1 @angular/fire version: 6.1.4 Firebasejs version in firebase-me ...

Pulling data from Vimeo using RESTful API to gather information on seconds of video playback

Utilizing the Vimeo Player API within my Angular project, I have installed it via npm i @vimeo/player. This is specifically for privately playing videos (restricted to my website), and when embedding the URL into an iframe, everything works perfectly. I ...

Typescript navigation and Next.js technology

Currently, I am in the process of learning typescript and attempting to create a navigation bar. However, I encountered an error message stating "Unexpected token header. Expected jsx identifier". I am a bit puzzled by this issue. Could someone kindly pro ...

Tips for looping through an HTML document using Python to extract information from Wikipedia

I am working on developing a tool to extract data from the Wikipedia API. Within an XML file named wikiepedia.html, I have several links that I want to parse through line by line in order to retrieve information which can then be formatted into JSON. The ...

I am struggling to figure out the best way to save JSON data retrieved from an API request in a Node.js Express server, and then efficiently send it to a React Native client

My Node.js server is up and running with an app.js file structured like this: var createError = require('http-errors'); var express = require('express'); var path = require('path'); var cookieParser = require('cookie-pars ...

Can you outline the process for troubleshooting the issue of not being able to set breakpoints on a Chrome launch configuration when working with Angular

Using Angular 13 / Chrome 111 / VSCode 1.76.1 / Node 16.19.1 I am encountering a strange issue where I am unable to set breakpoints in VSCode after my code has live-reloaded. Yesterday, the configuration in my launch.json was working fine: "configur ...