Encountering an error with dynamic routing in Angular 4 when using dynamic components

Upon receiving routing configuration from a server and loading it before the application bootstrap, the config.json file contains the following setup:

[{
  "path": "dashboard",
  "component": "SingleComponent",
  "data": {...}
},
{
  "path": "payment",
  "roles": ["normal-user"],
  "children": [{
    "path": "new",
    "component": "SingleComponent",
    "data": {...}
    }
  }]
}

where the "SingleComponent" is replaced with the class reference before executing 

router.resetConfig(loadedRoutes);
. Everything seems to be working fine, as loading /dashboard displays the page correctly. However, I had to include the component reference in @NgModule.entryComponents since there is no other reference to that component elsewhere.

Upon navigating to /payment/new, an error occurs:

ERROR Error: Uncaught (in promise): Error: No component factory found for SingleComponent. Did you add it to @NgModule.entryComponents?
Error: No component factory found for SingleComponent. Did you add it to @NgModule.entryComponents?
at noComponentFactoryError (core.js:3898)
at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:3962)
at RouterOutlet.activateWith (router.js:6652)
at ActivateRoutes.activateRoutes (router.js:5735)
at eval (router.js:5675)
at Array.forEach (<anonymous>)
at ActivateRoutes.activateChildRoutes (router.js:5674)
at ActivateRoutes.activateRoutes (router.js:5742)
at eval (router.js:5675)
at Array.forEach (<anonymous>)
at noComponentFactoryError (core.js:3898)
at CodegenComponentFactoryResolver.resolveComponentFactory (core.js:3962)
at RouterOutlet.activateWith (router.js:6652)
at ActivateRoutes.activateRoutes (router.js:5735)
at eval (router.js:5675)
at Array.forEach (<anonymous>)
at ActivateRoutes.activateChildRoutes (router.js:5674)
at ActivateRoutes.activateRoutes (router.js:5742)
at eval (router.js:5675)
at Array.forEach (<anonymous>)
at resolvePromise (zone.js:824)
at resolvePromise (zone.js:795)
at eval (zone.js:873)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4744)
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at ZoneTask.invokeTask [as invoke] (zone.js:503)
at invokeTask (zone.js:1540)

However, looking at my module, it includes:

...

  entryComponents: [ // components used by remote loaded routes
    SingleComponent,
  ],
})

What could be causing this issue? Any suggestions or insights would be appreciated as there seems to be no documentation regarding this particular error.

The version of Angular being used is 5.0.0

javascriptangulartypescript

Answer №1

Have you properly defined the component within the @NgModule decorator?

@NgModule({
  declarations: [
    ...
    SingleComponent,
    ...
  ]
});

Answer №2

Upon further investigation, I discovered that the component property of child routes was not being properly set during parsing. Resolving this issue ultimately fixed the problem.

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

Tips for managing transitions when the indicator is clicked by the user

I'm looking for a way to implement logic that determines whether or not a user can change the step by clicking on the indicator (the step number). I need a callback function that triggers every time there is a step change, but also allows me to preven ...

angularangular-materialangular-material-steppermat-stepper

React JS is not allowing me to enter any text into the input fields despite my attempts to remove the value props

Currently, I am working on creating a Contact Form using React Js. I have utilized react bootstrap to build the component, but unfortunately, when attempting to type in the input fields, the text does not change at all. import React, {useState} from ' ...

javascriptreactjsformsinputreact-bootstrap

What is the best way to create a deep clone of an XMLDocument Object using Javascript?

I am currently working on a project that involves parsing an XML file into an XMLDocument object using the browser's implementation of an XML parser, like this: new DOMParser().parseFromString(text,"text/xml"); However, I have encountered a situatio ...

javascriptangularjsxmlweb

Saving JSON format in VueX State Management

I'm relatively new to using Vue/VueX and I am exploring methods for storing JSON data in the VueX state. Initially, it seemed like a simple task: state { jsonthing: { ... } } However, I encountered an issue where getters return an Observer type ins ...

javascripttypescriptvuex

Ways to incorporate a custom JavaScript function that is activated by an external server system?

I'm currently exploring a JavaScript widget that needs to operate within specific constraints: The widget initiates a request to a third-party server using a callback URL The third-party server pings the callback URL after a set period, triggering a ...

javascriptajaxhttpeventsweb-applications

Adding ngChange programmatically in Angular without using attributes is a common challenge faced

I am attempting to replicate the functionality of the ng-change attribute within a directive without making changes to the HTML (thus excluding the use of the ng-change property). After examining the Angular source code for the ngChange directive, I have ...

javascriptangularjsangularjs-directiveangular-ngmodelangularjs-ng-change

React Native: Troubleshooting Issue with Shallow Copying of Nested JSON Objects

I have a JSON structure with nested objects like this: {"name", "children": [JSON objects]}. I am attempting to add a new child to the object based on a variable path, which is an array of names. Strangely, my code works fine in the Ch ...

javascriptjsonreact-nativereferenceshallow-copy

Adjust the CSS property of a div to have a fixed position when scrolling

I attempted to implement a fixed div on scroll in Vue.js using the following code: ... async created() { window.addEventListener('scroll', this.calendarScroll); } methods: { calendarScroll() { console.log('Scroll'); cons ...

javascriptvue.jsvuejs2

Retrieve the source code of a webpage by accessing its URL with JavaScript through the use of JSONP

To extract the source code from a URL web page using JSONP, you can use the following code snippet: <script type="text/javascript"> var your_url = ''; $(document).ready(function(){ jQuery.ajax = (function(_ajax){ var protocol = location. ...

javascriptjqueryajaxdomjsonp

What to do when CSS Overflow doesn't work as expected?

Are there any alternatives for browsers that don't support CSS overflow? I am working on a new layout that heavily relies on the overflow property, however it seems like android browsers do not handle it well and as a result, my layout is broken. I am ...

javascriptjqueryandroidcss

Error message "Encountered an unknown type 'ForOfStatement' when attempting to execute an npm library"

Currently, I am in the process of integrating the PhotoEditor SDK library into my Ruby on Rails project. To achieve this, I have been meticulously following the installation guidelines provided in the official documentation. However, during the setup proce ...

javascriptruby-on-railsnpm

Triggering a loop error may occur when attempting to update the state based on a

What I want to achieve is updating the state with the value received from a child component. However, whenever I try using the setstate method in my function, it results in a looping error. Here's a snippet of my code: class ParentTab extends Compone ...

javascriptreactjscomponentssetstate

Dealing with Koa-router and handling POST requests

I am facing an issue handling POST requests in my koa-router. Despite using koa-bodyparser, I am unable to receive any data sent through my form. My template engine is Jade. router.js: var jade = require('jade'); var router = require('koa- ...

javascriptnode.jskoa

Using AJAX to submit a form and then refreshing the page within the current tab

I am facing an issue with my web page that contains multiple tabs, some of which have forms. Whenever a form is successfully submitted, the page reloads but always goes back to the default first tab. To address this, I am attempting to use a storage variab ...

javascripthtmljqueryajaxforms

I am currently attempting to deploy my React application using Vercel. I followed all the necessary steps in my terminal, but unfortunately encountered an error at the end: "Error: Command 'npm install' exited with 1"

Here are the problem details: npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5022353133247d2333223920242310657e607e61">[email ...

reactjstypescriptnpmvercel

Exploring the syntax of typescript when using createContext

Just starting out with typescript and I have some questions. Could someone break down the syntax used in this code snippet for me? What is the significance of having two groups containing signIn, signOut, and user here? Is the first group responsible fo ...

javascriptreactjstypescript

Is there a way to access a component based on its route in Angular 7?

I am currently utilizing the NavigationEnd event to identify the current route after it has been changed in the following way: this.router.events.pipe( filter(event => event instanceof NavigationEnd) ).subscribe((event) => { const na ...

angularroutes

The "util" module has been extracted to ensure compatibility with browsers. Trying to use "util.promisify" in client code is not possible

Currently, I'm in the process of scraping LinkedIn profiles with the help of this library: https://www.npmjs.com/package/@n-h-n/linkedin-profile-scraper. Listed below is the code snippet that I am using: <script> import { LinkedInProfileScraper ...

javascriptnode.jssveltekit

Dealing with CORS and multiple headers

After setting up CORS for my web api project and deploying it to local IIS, I encountered an issue when trying to call a controller method from Angular. The error message displayed was as follows: SEC7128: Multiple Access-Control-Allow-Origin headers ar ...

angularasp.net-web-apicors

Effortless implementation of list loading with images and text in the Ionic 2 framework

Can someone provide guidance on creating a lazy loading list with both images and text? I understand that each image in the list will require a separate http request to download from the server. Should caching be implemented for these image downloads? Addi ...

angulartypescriptionic-frameworkionic2cordova-plugins