What is the best way for me to access a certain web address?

I am working on setting up a routing mechanism in my Angular project, but I'm encountering a URL routing error. The application is unable to locate the specified URL.

Below is the routing setup:

navigation.ts

{
        id: 'documentation-management',
        title: 'Dokümantasyon Yönetimi',
        type: 'collapse',
        icon: 'feather icon-folder',
        children: [
          {
            id: 'documentation-list',
            title: 'Doküman Listesi',
            type: 'item',
            url: '/tr/documentation-management/documentation/documentation-list'
          },
          {
            id: 'definitions',
            title: 'Tanımlar',
            type: 'collapse',
            children: [
              {
                id: 'documentation-category',
                title: 'Doküman Kategorileri',
                type: 'item',
               url: '/tr/documentation-management/definitions/documentation-category/documentation-category-list'
              }
            ]
          }
        ]
      }

app-routing.module.ts

{
   path: ':lang/documentation-management',
   loadChildren: './documentation-management/documentation-management.module#DocumentationManagementModule'
}

documentation-management-routing.module.ts

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'documentation',
        loadChildren: './documentation/documentation.module#DocumentationModule'
      },
      {
        path: 'definitions',
        loadChildren: './definitions/definitions.module#DefinitionsModule'
      }
    ]
  }
];

definitions-routing.module.ts

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'documentation-category',
        loadChildren: './documentation-category/documentation-category.module#DocumentationCategoryModule'
      }
    ]
  }
];

documentation-category-routing.module.ts

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'documentation-category-list',
        loadChildren: './documentation-category-list/documentation-category-list.module#DocumentationCategoryListModule'
      },
      {
        path: 'documentation-category-edit',
        loadChildren: './documentation-category-edit/documentation-category-edit.module#DocumentationCategoryEditModule'
      },
      {
        path: 'documentation-category-edit/:id',
        loadChildren: './documentation-category-edit/documentation-category-edit.module#DocumentationCategoryEditModule'
      }
    ]
  }
];

documentation-category-list-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: DocumentationCategoryListComponent
  }
];

I have successfully implemented a similar routing mechanism for a different module, so I'm unsure why this one isn't working as expected.

The goal is to access the specified URLs in the navigation.ts file, but I keep getting the following error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tr/documentation-management/definitions/documentation-category/documentation-category-list'
Error: Cannot match any routes. URL Segment: 'tr/documentation-management/definitions/documentation-category/documentation-category-list'

Here is the directory structure of my application:

- app
  - documentation-management
      - definitions
          - documentation-category
             - documentation-category-list

  - human-resources
      - definitions
          - education-group
             - education-group-list

If you could assist me with this issue, I would greatly appreciate it!

Answer №1

When setting up the routes in your app.routing.module.ts

const routes: Routes = [
  { path: 'documentation-management', loadChildren: () => import('./path to the module/documentation-management.module').then(mod => mod.documentationManagement)
}
];

Ensure that in your documentationManagement's routing module, you import other modules in a similar manner.

Answer №2

After some troubleshooting, I was able to find a solution to the issue at hand. It turns out that Angular has restrictions on using the same module name within its routing system, regardless of their folder structure.

By making the following adjustment:

{
   path: 'definitions',
   loadChildren: './definitions/definitions.module#DefinitionsModule'
}

to

{
   path: 'definitions',
   loadChildren: './definitions/definitions.module#DocumentationManagementDefinitionsModule'
}

The problem was resolved and everything started working as expected.

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

Utilizing TypeScript path aliases in a Create React App project with TypeScript and ESLint: A step-by-step guide

I utilized a template project found at https://github.com/kristijorgji/cra-ts-storybook-styled-components and made some enhancements. package.json has been updated as follows: { "name": "test", "version": "0.1.0" ...

Utilizing the power of d3.js within Angular 4

Currently, I have successfully implemented code to draw a polygon using the mouse in a normal JavaScript file. Now, I am looking to replicate the same functionality in my TypeScript file. Below is an excerpt from my d3.js file: //D3.JS VERSION 3 //------ ...

Show Data from API on Angular 6 Webpage

Hello everyone, I am a beginner in the world of frontend development and I'm currently facing a challenge with displaying API data in an Angular 6 application. I have managed to showcase values from the main level of the returned details, but I am str ...

Angular2 - Retrieve data in XLS format from RestService并下载

I am looking to create a web service using Apache POI to generate an Excel file (xls, xlsx). Below is the snippet of code I have put together: @RequestMapping(value = "/export", method = RequestMethod.GET) public void exportXlsx(HttpServletResponse respon ...

Printing feature not functioning properly on Internet Explorer version 11

Currently, I am facing an issue with printing a document using a blob URL and iFrame. Everything works perfectly in Chrome, but unfortunately, it's not functioning properly in IE browser. I need guidance on how to successfully print a blob URL that i ...

Include a parameter in a type alias

Utilizing a function from a library with the following type: type QueryFetcher = (query: string, variables?: Record<string, any>) => Promise<QueryResponse> | QueryResponse; I aim to introduce an additional argument to this type without mod ...

Leveraging ES6 modules within JavaScript for exporting uncomplicated variables

In my JavaScript code, I have defined pageId = 3 in one file and socket = io() in another file. Now, I need to access these variables in other files. I am considering using ES6 modules for this purpose, but I am unsure of how to proceed. Currently, the s ...

Storing browser cookies in Azure Static Web App

I recently set up a solution on Azure with a web API in .NET 6 deployed to App Service, and a front-end application in Angular deployed to Azure Static Web App. I made sure to configure CORS on the back-end App Service to allow the front-end origin. Howeve ...

What is a more efficient method for incorporating optional values into an object?

Currently, I am utilizing the optional addition feature in this way: ...(!!providerId && { providerId }), ...(!!practiceId && { practiceId }), Is there a more elegant shorthand method to replace this logic, such as: yield createRemark ...

Tips for sending a parameter to an onClick handler function in a component generated using array.map()

I've been developing a web application that allows users to store collections. There is a dashboard page where all the user's collections are displayed in a table format, with each row representing a collection and columns showing the collection ...

How to Deactivate FormGroup controls in Angular2 Reactive FormModule

In my Angular2 project, I am utilizing the Reactive FormsModule. At this juncture, I am pondering on how to efficiently disable all of the controls within the FormGroup. While the readOnly property can be applied to individual controls, this approach may ...

What is the specific type of event for a change handler in TypeScript?

As a newcomer to TypeScript, I recently crafted a change handling function that accepts the event as a parameter to assign the value, like event.target.value. Currently, I have designated this as any, but I suspect there is a more appropriate type for this ...

Once I introduce ngModel into mat-checkbox, the functionality of 'checked' stops working

When I add an ngModel to my mat-checkbox, the checked = "checked" functionality stops working as expected. The following code will work: <mat-checkbox name="BlackBeard" ngModel checked = "checked"> Zehahaha? </mat-checkbox> However, the foll ...

What is the reason `addEventListener` does not work with a class method?

Recently, I discovered that the listener passed to addEventListener can actually be an object with a handleEvent function instead of just a callback function (here). However, I encountered an issue when trying to use handleEvent as a class method: class F ...

Overlapping Issue with Angular Bootstrap Dynamic Dropdown Menu

I'm currently working on creating a dynamic menu using Angular and Bootstrap for Angular. My main issue right now is that the submenus are overlapping each other when displayed on the page. To tackle this problem, I started off by referring to the ex ...

Sending the chosen dropdown ID to a different component

In my application, there is a component named list where I am showcasing all the names of my customers in a dropdown, as illustrated below: When a particular item (i.e., customer) is selected from the dropdown, I would like to emit that id to a method/fun ...

Code error TS2345 occurs when assigning the argument of type '{ headers: HttpHeaders; }' to a parameter of type 'RequestOptionsArgs'. This indicates a mismatch in the type of data being passed, causing an

Upon running ionic serve, these are the results that I am encountering. My setup consists of Ionic4 version with Angular 8. While executing the command, this error appears: src/app/home/home.page.ts:60:77 - error TS2345: Argument of type '{ headers ...

I encountered difficulties in uploading my Angular application to GitHub Pages

I'm running into an issue when attempting to deploy my Angular application using GitHub pages. Here's the error message I encountered: about-me (master)*$ ngh An error occurred! Error: Unspecified error (run without silent option for detail) ...

Is there a way for me to operate the identical application in isolation?

I am looking to develop a unique service catering to individual companies. Instead of having the application run in the same container for each company, I would prefer to have a dedicated container for every company. For instance: google.serviceapplicat ...

Having difficulties running the updated project from Angular 4 to 6

I recently updated my Angular 4 project to Angular 6. While trying to run the project, I encountered an error. Despite searching for similar questions, I was unable to find a satisfactory answer. OpaqueToken is not a constructor. Below is a snippet ...