Module not found: Error: Can't resolve 'app\pages\pages.module'

[Shafaq Kazmi]

I am working in angular 4. After installing angular-router-loader , I m getting below errors:

[INFO] ERROR in ./src/app/app.routing.ts
[INFO] Module not found: Error: Can't resolve 'app\pages\pages.module' in 'D:\webui\src\app'
[INFO]  @ ./src/app/app.routing.ts 7:137-172
[INFO]  @ ./src/app/app.module.ts
[INFO]  @ ./src/main.ts

app.routing.ts

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

import { ErrorComponent } from './pages/error/error.component';

export const routes: Routes = [
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: 'pages', loadChildren: 'app/pages/pages.module#PagesModule' },
  { path: '**', component: ErrorComponent }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules
});

any help?

[Brandon Roberts]

If you're using absolute paths like app/ your webpack config needs to be able to resolve app to a folder in your project.

[Shafaq Kazmi]

@brandonroberts: how can I do this?

I was able to resolve this issue after below change but i'm not sure if this is an efficient way. Further, after this I found this issue webpack/webpack#4921

app.routing.ts

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

import { ErrorComponent } from './pages/error/error.component';

let loadAoTModule = (path, module) => {
  let result = () => new Promise(function (resolve) {
    (require as any).ensure([], function (require: any) {
      resolve(require(path)[module]);
    });
  });

  return result;
}


export const routes: Routes = [
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: 'pages', loadChildren: loadAoTModule('./pages/pages.module', 'PagesModule') },
  { path: '**', component: ErrorComponent }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {
    preloadingStrategy: PreloadAllModules
});

[Brandon Roberts]

See https://webpack.js.org/configuration/resolve/

[Renil Babu]

In my case Angular Cli seemed to have imported
import { ActivatedRoute } from '@angular/router/src/router_state';

Changing it to
import { ActivatedRoute } from '@angular/router';
solved my problem. Don't know the reason behind it...but worked