Angular Routing: Module not found

Ionic Framework ionic-v3
1

Heyho,

i’m new at routing in Ionic, but i want to have a Angular Routing in my Ionic App.

My Folder Structure (generated):

-src
  -app
     -app.component.ts
     -app.html
     -app.module.ts
     -app-routing.module.ts
     -main.ts
   -pages
     -home
       -home.html
       -home.ts
       -home.module.ts
       -home-routing.ts
   ...

I have my main Routing in the app-routing.module.ts:

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: '../pages/home/home.module#HomePageModule'
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

app.module.ts:

import {AppRoutingModule} from "./app-routing.module";

@NgModule({
  declarations: [
    MyApp
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}

home.module.ts:

import {NgModule} from '@angular/core';
import {IonicModule} from 'ionic-angular';
import {routing} from "./home-routing";

@NgModule({
  declarations: [

  ],
  imports: [
    IonicModule,
    routing
  ],
  entryComponents: []
})
export class HomePageModule {
}

and home-routing.ts:

import { RouterModule, Routes } from '@angular/router';
import {HomePage} from "./home";
import {ModuleWithProviders} from '@angular/core';

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

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

I get the following Error:

Uncaught (in promise): Error: Cannot find module ‘…/pages/home/home.module’.
Error: Cannot find module ‘…/pages/home/home.module’.
at http://localhost:8100/build/main.js:94:9
at t.invoke (http://localhost:8100/build/polyfills.js:3:14976)
at Object.onInvoke (http://localhost:8100/build/vendor.js:5445:33)
at t.invoke (http://localhost:8100/build/polyfills.js:3:14916)
at r.run (http://localhost:8100/build/polyfills.js:3:10143)
at http://localhost:8100/build/polyfills.js:3:20242
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15660)
at Object.onInvokeTask (http://localhost:8100/build/vendor.js:5436:33)
at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15581)
at r.runTask (http://localhost:8100/build/polyfills.js:3:10834)

Can someone help me out with this?

Thanks :slight_smile: