Error: Angular 4.1.3 routing is unable to locate child module within parent module

Thanks in advance for any help!

Greetings, I'm encountering the following error as described in the title. Despite my attempts at troubleshooting and research, I am unable to resolve it. Below are some important files - can anyone with experience in this issue provide assistance? The error occurs during 'ng serve' and 'ng build' commands, where 'ng serve' initially fails but automatically rebuilds and works fine. However, since the initial failure persists, I cannot successfully build it (which is the main issue).

ERROR in Could not resolve "patient.module" from "d:/Downloads/AngularApp/AngularApp/src/app/app.module.ts".

app.routing.ts

const patientRoutes: Routes = [
    {
        path: 'patient',
        loadChildren: 'app/patient/patient.module.ts#PatientModule',
    }
];

const nurseRoutes: Routes = [
    {
        path: 'nurse',
        loadChildren: 'app/nurse/nurse.module.ts#NurseModule',
    }
];


const appRoutes: Routes = [
    {
        path: '',
        redirectTo: 'auth',
        pathMatch: 'full'
    },
    {
        path: 'auth',
        component: AutenticationComponent
    },
    ...patientRoutes,
    ...nurseRoutes
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes, {useHash: true});

patient.module.ts

import { NgModule }                     from '@angular/core';
import { CommonModule }                 from '@angular/common';
import { patientRouting }               from './patient.routing';

import { PatientDashboardComponent }    from './dashboard/patient-dashboard.component';


@NgModule({
              imports:      [
                  CommonModule,
                  patientRouting
              ],
              declarations: [
                  PatientDashboardComponent
              ]
          })
export class PatientModule { }

patient.routing.ts

import { ModuleWithProviders }          from '@angular/core';
import { Routes, RouterModule }         from '@angular/router';

import { PatientComponent }             from './patient.component';
import { PatientDashboardComponent }    from './dashboard/patient-dashboard.component';
import { PatientVideoComponent }             from './video/video-chat.component';

const patientRoutes: Routes = [
    {
        path: 'patient',
        component: PatientComponent,
        children: [
            {
                path: '',
                component: PatientVideoComponent,
                children: [
                    {
                        path: '',
                        component: PatientDashboardComponent,
                    }
                ]
            }
        ]
    }
];

export const patientRouting: ModuleWithProviders = RouterModule.forChild(patientRoutes);

angularcli.json

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": ["assets"],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,

Answer №1

After searching extensively, I've discovered a solution that actually works. It appears that the routing structure has been modified to now require using ./patient instead of the previous app/patient.

Visit this link for further information.

Answer №2

app/folder1/folder2/...

(assuming the routes are configured inside the app directory) to ./folder1/folder2/...

This issue can be resolved:

const routes: Routes = [
  {
    path:'customers',
    loadChildren: './customers/customers.module#CustomersModule'

  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule'
  },
  {
    path:'contacts',
    loadChildren:'./contacts/contacts.module#ContactsModule'
  },
  { 
    path:'',
    redirectTo:'',
    pathMatch:'full'
  }  
];

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

Guide on enabling the Access-Control-Allow-Origin feature for Angular 5 and Node.js:

After exploring various methods to include 'Access-Control-Allow-Origin', I have not been successful in resolving the issue. I am utilizing the @angular/common/http module with an external URL as a data source. However, when attempting to retrie ...

Troubleshooting Appium error management is ineffective

As a newcomer to appium, I might have made some mistakes. I'm encountering a problem with appium while using wdio and jasmine. it('wtf', (done) => { client.init().element('someName').getText() // ^ here ...

Is there a more efficient approach to displaying a list of elements and sharing state in React with TypeScript?

Check out this code sample I'm attempting to display a list with multiple elements and incorporate a counter on the main element that updates every time one of the buttons is clicked. I'm uncertain if this approach is optimal, as I am transition ...

Is there a way for me to generate an Nx command that can dynamically create a library with a specified name?

In the world of Nx and Angular, I have a repository named org housing all my projects. To create a special library within this setup, like one called auth, I typically use a command that looks like this: npx nx g @nx/angular:lib auth-data-access --directo ...

pdfMake introduces a page breaking effect when the canvas is utilized with the type "line"

Can anyone shed some light on why a canvas declaration with the type "line" is causing a page break in the generated PDF? I've tried removing all canvases and the page break disappears, but I can't identify the root cause. Any insights would be ...

JavaScript ECMAScript 6 - WARNING: "Decorators can only be applied to a class when exporting"

In ECMAScript 6, I am attempting to export a function so that I can import it and utilize it in other files for the sake of writing DRY code. However, an error message is appearing: You can only use decorators on an export when exporting a class (16:0) ...

Issue with Angular 17 button click functionality not functioning as expected

Having trouble with a button that should trigger the function fun(). Here's the code snippet I'm using. In my TS file: fun(): void { this.test = 'You are my hero!'; alert('hello') } Here is the respective HTML: &l ...

Develop an object's attribute using form in the Angular 5 framework

I am looking to create an object for a location that includes two parameters. While I can easily create an array of strings using FormGroup, I am unsure of how to create an object with two parameters nested inside it. Below is the code snippet I currently ...

What causes old data to linger in component and how to effectively clear it out

Fetching data from NGXS state involves multiple steps. First, we define the state with a default list and loading indicator: @State<CollectionsStateModel>({ name: 'collections', defaults: { collectionList: [], (...), isListLoading: true, ...

Which packages will be included once ng eject is executed?

After executing the ng eject command, I observed the following messages displayed in the console. The last line indicates that packages have been added as a result of running the command. What specific packages are included when we run ng eject? For refe ...

What exactly is the data type of setInterval in TypeScript?

If I want to define the type of a variable that will be used with setInterval in the following code snippet: this.autoSaveInterval = setInterval(function(){ if(this.car.id){ this.save(); } else{ this.create(); } ...

Is there a way to eliminate properties in typescript without relying on the option feature?

I am struggling with removing properties in TypeScript. type Person<GN> = { getName: GN extends never ? never : GN, } const foo = <GN>(person: Person<GN>) => person const first = foo({}) // This should work const second = fo ...

Error: Call stack size limit reached in Template Literal Type

I encountered an error that says: ERROR in RangeError: Maximum call stack size exceeded at getResolvedBaseConstraint (/project/node_modules/typescript/lib/typescript.js:53262:43) at getBaseConstraintOfType (/project/node_modules/typescript/lib/type ...

The Firebase EmailPasswordAuthProvider is not a valid type on the Auth object

When working in an Angular2/TypeScript environment, I encountered an error when trying to use the code provided in the Firebase documentation. The error message displayed was "EmailPasswordAuthProvider Does Not Exist on Type Auth". var credential = fireba ...

Angular Build Showing Error with Visual Studio Code 'experimentalDecorators' Configuration

Currently experiencing an issue in VSC where all my typescript classes are triggering intellisense and showing a warning that says: "[ts] Experimental support for is a feature that is subject to change in a future build. Set the 'experimentalDeco ...

The new PropTypes package is incompatible with TypeScript's React context functionality

When utilizing React.PropTypes, the code functions correctly but triggers a warning about deprecation (Accessing PropTypes via the main React package is deprecated...): import * as React from 'react'; export class BackButton extends React.Compo ...

When working with Angular/Typescript, the error message "compilation of 'export const' is not possible

Embarking on creating my very own Angular library, I took the first step by adding a service without any issues. The challenge arose when I decided to move a constant to a file named tokens.ts for the service to reference. Following this change, the build ...

To run multiple environments with react-native-dotenv in a React Native project using Typescript, only the local environment is activated

Currently, I am facing an issue while trying to initialize my React Native app with TypeScript in three different environments - development, local, and testing. When I attempt to run APP_ENV=testing expo start or APP_ENV=development expo start, it always ...

Showing an in-depth ngFor post on the screen

I am in the process of building a Blog with Angular 7, MongoDB, and NodeJS. Currently, I have developed a component that iterates through all the posts stored in the database and showcases them on a single page. <div class="container-fluid"> < ...

What is the reason behind the ability to reassign an incompatible function to another in TypeScript?

I discovered this question while using the following guide: https://basarat.gitbooks.io/typescript/content/docs/types/type-compatibility.html#types-of-arguments. Here is an example snippet of code: /** Type Heirarchy */ interface Point2D { x: number; y: ...