Search code examples
angularangular-routingangular7angular-module

Angular can't find custom module


I'm trying to convert my Angular 7 app to use modules so that I get lazy loading. When I run with modules the browser says

core.js:18374 ERROR Error: Uncaught (in promise): Error: Cannot find module './orders/orders.module'
Error: Cannot find module './orders/orders.module'

I'm not sure why that's happening as the .../src/app/orders/orders.module.ts file definitely exists. Originally I just had a .../src/app/orders directory and in it multiple components. To implement the modules I did this

% mv src/app/orders orders
% ng g m orders --routing
% mv orders/* src/app/orders

I then removed all the routes from app-routing.module.ts and replaced it with this, so that by default when you go to the app it takes you to the orders list.

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

And then orders-routing.module.ts looks like so:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {OrderEditComponent} from './order-edit/order-edit.component';
import {OrderListComponent} from './order-list/order-list.component';

const routes: Routes = [
    {path: 'edit', component: OrderEditComponent},
    {path: 'byMonth', component: OrderListComponent},
    {path: '', component: OrderListComponent},
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class OrdersRoutingModule {
}

orders.module looks like so:

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';

import {OrdersRoutingModule} from './orders-routing.module';
import {OrderListComponent} from './order-list/order-list.component';
import {OrderEditComponent} from './order-edit/order-edit.component';

@NgModule({
    declarations: [
        OrderListComponent,
        OrderEditComponent
    ],
    imports: [
        CommonModule,
        OrdersRoutingModule
    ]
})
export class OrdersModule {
}

You can see the files exist in the proper spot.

enter image description here


Solution

  • Ok i suggest create a new project using angular CLI, copy app folder, paste in the new project, and re-run it.