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

Injecting Variables Into User-Defined Button

Presenting a custom button with the following code snippet: export default function CustomButton(isValid: any, email: any) { return ( <Button type="submit" disabled={!isValid || !email} style={{ ...

The error message is stating that the module located at C://.. does not have an exported member named "firebaseObservable"

Trying to follow an Angular/Firebase tutorial for a class but encountering issues. The FirebaseListObservable is not being imported in my component even though I have followed the tutorial closely. I've looked at similar questions for solutions but ha ...

A step-by-step guide on incorporating MarkerClusterer into a google-map-react component

I am looking to integrate MarkerClusterer into my Google Map using a library or component. Here is a snippet of my current code. Can anyone provide guidance on how I can achieve this with the google-map-react library? Thank you. const handleApiLoaded = ({ ...

404 error received from Angular 2 API call despite successful testing of service

I've been attempting to make a web service call from my Angular 2 application. private baseUrl: string = 'http://localhost:3000/api'; getPatterns(): Observable<Pattern[]> { const patterns$ = this.http .get(`${this.baseUrl ...

Error Alert: The system is unable to locate property 'next' in Angular/Jasmine

Whenever I utilize the service below in a component, an error message "TypeError: Cannot read property 'next' of undefined" pops up and previously functioning tests start failing as well. The Service: export class DataService { loadData$: ...

How to use jsZIP in angular to bundle several CSV files into a single zip folder for download

I have a code snippet below that demonstrates how to create data for a CSV file and download the CSV file in a zip folder: generateCSVfiles() { this.studentdata.forEach(function (student) { this.service.getStudentDetails(student.studentId).subsc ...

Facing Issues with HTTP Headers in Express or Node?

I have developed an Express/NodeJS REST API that includes setting a custom header on the response: router.route("/api/articles") .get(authCheck, function (req, res) { let pagination = req.get('Pagination').split(","); let cur ...

What steps do I need to take to export my TypeScript declarations to an NPM package?

I have multiple repositories that share similar functionality. I want to export type declarations to an NPM package so I can easily install and use them in my projects. Within the root directory, there is a folder called /declarations, containing several ...

Utilizing the Solana Wallet Key for ArweaveJS Transaction Signing

Is there a method to import a Solana wallet keypair into the JWKInterface according to the node_modules/arweave/node/lib/wallet.d.ts, and then generate an Arweave transaction using await arweave.createTransaction({ data }, jwk);? Metaplex utilizes an API ...

Error Encountered: Kendo Angular 4 Peer Dependency Issue and Module "rxjs/operators/combineLatest" Not Found

I'm currently facing issues while attempting to integrate Kendo UI into an Angular 4 application, encountering various errors along the way. To begin, I initiated the installation by running this command: npm install --save @progress/kendo-angular-d ...

Angular 13: Issue with displaying lazy loaded module containing multiple outlets in a component

Angular version ^13.3.9 Challenge Encountering an issue when utilizing multiple outlets and attempting to render them in a lazy module with the Angular router. The routes are being mapped correctly, but the outlet itself is not being displayed. Sequence ...

Updating the FormControl value using the ControlValueAccessor

I have developed a directive specifically for case manipulation. The code I created successfully updates the visual value using _Renderer2, but I am facing an issue with formGroup.value. Even though the directive visually changes the value as expected, t ...

Creating a sticky header for a MatTable in Angular with horizontal scrolling

Having an issue with merging Sticky Column and horizontal scrolling. Check out this example (it's in Angular 8 but I'm using Angular 10). Link to Example The base example has sticky headers, so when you scroll the entire page, the headers stay ...

The Element is Unfamiliar - Application with Multiple Modules

I seem to be facing an issue with how my modules are structured, as I am unable to use shared components across different modules. Basically, I have a Core module and a Feature module. The Core module contains components that I want to share across multip ...

Can anyone tell me the best way to access the name attribute of an HTML element in TypeScript?

Currently, my code is utilizing the name attribute to verify whether the user has entered information in a specific field and validating the input. However, I am facing an issue where the submit button remains active even if there are empty fields presen ...

Utilizing Node.js and Jasmine: Preventing the invocation of a Promise function to avoid executing the actual code results in DEFAULT_TIMEOUT_INTERVAL

There is a function below that returns a promise. public async getAverageHeadCount(queryParams: Params, childNode: any, careerTrackId: string): Promise<Metric> { const queryId = this.hierarchyServiceApiUrl + "rolling-forecast/ahc/" + q ...

What is the procedure for renaming an item within a basic array in Angular?

I am working on a project in Angular and have constructed an array. I am now looking to change the name of one of the items in this array. While I have figured out how to rename keys in an array, I'm still unsure about how to do so for its values. ...

Challenges in designing components in Angular 2.0 and beyond

Issue at hand - There are two input controls on the same page, each belonging to separate components. When a value is entered into the first input box, it calculates the square value and updates the second input control accordingly. Conversely, if the v ...

Generating swagger documentation for TypeScript-based Express applications

I have successfully set up the swagger URL following a helpful guide on configuring Swagger using Express API with autogenerated OpenAPI documentation through Swagger. Currently, I am utilizing TypeScript which outputs .js files in the dist folder without ...

Angular 2 empoying templateUrl and styleUrl paths located above index.html

In Angular 2 components, all templateUrl and styleUrl paths are typically resolved from the index.html. However, I have a specific scenario where I prefer to separate my development and running folders. This means that my .html files containing .ts module ...