Executing ngOnInit twice to retrieve the dossier ID

I am dealing with an Angular 8 application that has a parent-child route relationship for creating new items. However, I have encountered an issue where the id of the parent component is initially set when the page loads to create a new item, but becomes null on subsequent ngOninit calls.

Here's the route relationship:

{
    path: ':dossierId',   
    component: ViewComponent, children: [
    {  path: 'item/new/:dossierItemType', component: ItemComponent}
    ],
    resolve: {
      dossier: DossierResolver,
      dossierItems: DossierItemsResolver
    }

  },

and here is the item.component.ts file:

export class ItemComponent implements OnInit {
  // Component properties and methods here
}

When examining the ID:

I see the following ID:

06637e72-8915-4735-9400-4ef7705194ea

However, upon debugging in Google Chrome, the ID turns null during ngOninit.

The URL is as follows:

http://localhost:4200/en/dossier/06637e72-8915-4735-9400-4ef7705194ea/item/new/Interview

An error message pops up:

core.js:6406 ERROR TypeError: Cannot set property 'id' of undefined
    at SafeSubscriber._next (item.component.ts:58)
    ...

Subsequently, more errors follow:

...

Upon further examination of the params:

this.dossier.id = params.dossierId;
dossierItemType: "Interview"

This leads to issues with the save method:

 Save Method Code Here

Now, this leads to an undefined value:

Error Message:

core.js:6406 ERROR Error: Required parameter dossierId was null or undefined when calling newDossierItem.
...

This error is related to an item being connected to a dossierId.

Answer №1

Here is the answer you've been looking for:

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    paramsInheritanceStrategy: 'always'
})],
  exports: [RouterModule]
})
export class AppRoutingModule { }

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

JavaScript and jQuery radio button matrix group implementation

I'm feeling completely lost when it comes to solving this problem. My task is to create a matrix of radio buttons with columns labeled 1 to 3 and rows labeled A to C. A B C 1 (o) (o) (o) 2 (o) (o) (o) 3 (o) (o) (o) <tabl ...

NextJS React - WebpackError: Cannot access 'window' before initialization

I'm delving into the world of React and recently completed the "Getting Started" tutorial for NextJs (link), successfully setting up a new project. However, when attempting to import third-party plugins like current-devices or smooth-scrollbar, I enc ...

Managing data in React and JavaScript: Clearing fields upon successful sign up and redirecting to login page after receiving a 200 status code

Here is the code for my SignUp react function. After receiving a response of 200 upon clicking the Sign up button, I want to clear the text in all three fields and redirect the user back to the login page. I'm new to web development so any assistance ...

Tips for incorporating a visible marker beside the dropdown arrow

When developing my React application with React hooks forms, I have a select component where I need to include a clear indicator 'x' icon next to the dropdown icon. The current select component code is: <Form.Control size="sm" as=&q ...

What potential outcomes arise from independently initiating multiple components simultaneously?

Here is a scenario where I am able to achieve the following: @NgModule({ imports: [BrowserModule], declarations: [AppComponent, BComponent], bootstrap: [AppComponent, BComponent] <---------- here two components }) By doing this, it will ge ...

The webpage fails to display Vue Bootstrap radio buttons in a filled state

Hey there! I've been working on a project using vuejs and bootstrap-vue-3. My goal is to allow users to print data about the company, so I created a print scss file for that purpose and added some styles. However, I'm facing an issue where the ra ...

Comparing JSON import methods: HTTP vs require

I discovered two methods for importing local json files into my code. Using angulars http get. This method is well-known for loading json input. It provides the flexibility to easily switch between remote and local json files. Typescript require Anot ...

Honing in on key triggers within the Angular framework

I want to enhance my table by implementing a feature that allows the user to select the next row when they press the down arrow key. I am looking for a way to trigger a function in the component whenever the down arrow key is pressed, regardless of where i ...

Having trouble setting up Raygun in Angular version 6 with TypeScript?

Encountering Setup Issue with Raygun in Angular Version 6 Using TypeScript Problem: ERROR in src/app/app.raygun.setup.ts(6,20): error TS2304: Cannot find name 'RaygunV2'. This specific line seems to be causing trouble: declare let rg4js: ...

Encountering an error in Cytoscape using Angular and Typescript: TS2305 - Module lacks default export

I am working on an Angular app and trying to integrate Cytoscape. I have installed Cystoscape and Types/cytoscape using npm, but I encountered an error when trying to import it into my project. To troubleshoot, I started a new test project before implement ...

Managing the automatic download of a zip file through JQuery - A guide

When working with a REST API and creating a zip file for forced download, the task is to call the API by sending necessary POST data through JQuery to initiate the download. How can this goal be accomplished effectively? ...

Retrieve the parent's current state by accessing it through a callback function in React

My callback function onRestore is only logging the history until the id of the clicked snapshot. Why is it showing incorrect state? I've exhausted all options, so any help would be appreciated. import React, { useState, useEffect, useRef } from "re ...

Tips for eliminating wireframe diagonals from your design

After developing a custom CAD software exporter to transfer geometry data to the ThreeJS editor, I successfully created a loader to load the geometry. However, I encountered an issue when viewing the wireframe in ThreeJS - where triangles from each vertex ...

Creating typed props is important when utilizing the Material UI makeStyles function

Currently, I'm in the process of transitioning some of my React components to the latest makeStyles/useStyles hook API from Material UI. As far as I know, I can still accept classes as a prop from parent components by passing the props to useStyles: ...

Splitting code efficiently using TypeScript and Webpack

Exploring the potential of webpack's code splitting feature to create separate bundles for my TypeScript app has been a priority. After scouring the web for solutions, I stumbled upon a possible lead here: https://github.com/TypeStrong/ts-loader/blob/ ...

Exploring the versatility of Angular 4 by implementing a switch feature with

My goal is to have the menu change based on the click of the "Cadastros" action, but it seems like the issue lies with the "workspaceSelected" property not being visible to all components. I believe the best approach in this situation would be to have the ...

Does the unique identifier of the element remain constant in jQuery?

For example: $("#savenew").live('click', function(e) { var user=<?php echo $user?>; $.ajax({ type: "POST", url: "actions/sub.php", data:{user: user} , ...

Hide all elements in jQuery that do not have a class assigned

I've implemented a straightforward jQuery script that toggles the "active" class on an li element when it is clicked: $('li').click(function() { $(this).toggleClass('active'); }); My goal is to hide all other li elements in t ...

The Angular 6 View does not reflect changes made to a variable inside a subscribe block

Why isn't the view reflecting changes when a variable is updated within a subscribe function? Here's my code snippet: example.component.ts testVariable: string; ngOnInit() { this.testVariable = 'foo'; this.someService.someO ...

Displaying an undefined value using ExpressJs (to present an [object])

While learning expressjs, I encountered an issue where the value I passed did not appear in the output. I created a new Routes file and defined a function with Route methods in it. However, when I set Route paths, the value did not show up in the output. A ...