title: core.js:15724 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'EventCreatePage'
body: <p>I am getting an error while navigating from one page to another. The error that I am getting is Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'EventCreatePage' </p>
  
  <p>I have posted my .ts files below</p>
  
  <p>I want to go from my homePage to my eventCreatePage</p>
  
  <p>This is the routing.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
  import { AuthGuard } from './services/user/auth.guard';
  
  const routes: Routes = [
    { path: '', redirectTo: 'signup', pathMatch: 'full' },
    { path: 'home', loadChildren: './home/home.module#HomePageModule',canActivate: [AuthGuard], },
    { path: 'event-create/:id', loadChildren: './pages/event-create/event-create.module#EventCreatePageModule' ,canActivate: [AuthGuard],},
    { path: 'event-detail/:id', loadChildren: './pages/event-detail/event-detail.module#EventDetailPageModule',canActivate: [AuthGuard], },
    { path: 'event-list', loadChildren: './pages/event-list/event-list.module#EventListPageModule' },
    { path: 'login', loadChildren: './pages/login/login.module#LoginPageModule' },
    { path: 'profile', loadChildren: './pages/profile/profile.module#ProfilePageModule' },
    { path: 'reset-password', loadChildren: './pages/reset-password/reset-password.module#ResetPasswordPageModule' },
    { path: 'signup', loadChildren: './pages/signup/signup.module#SignupPageModule' },
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
    ],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  
  </code></pre>
  
  <p>This is my Home.page.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Injectable } from '@angular/core';
  import { AngularFireList, AngularFireDatabase } from 'angularfire2/database'; 
  import { Quiz } from '../services/event/quiz.interface';
  import { EventCreatePage } from '../pages/event-create/event-create.page'
  import { Router } from '@angular/router';
  
  @Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
  })
  export class HomePage {
  
    quiz= {} as Quiz;
    eventcreatePage = EventCreatePage;
    quiz$ : AngularFireList&lt;Quiz&gt;;
  
    constructor(private database : AngularFireDatabase,private router: Router){}
  
  
  
  onclick(quiz: Quiz){
  this.router.navigate(['EventCreatePage']);
  }
  }
  
  </code></pre>
  
  <p>and this is my home.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { IonicModule } from '@ionic/angular';
  import { FormsModule } from '@angular/forms';
  import { RouterModule, Routes } from '@angular/router';
  
  import { HomePage } from './home.page';
  import { EventCreatePage } from '../pages/event-create/event-create.page';
  
  
  
  @NgModule({
    imports: [
      CommonModule,
      FormsModule,
      IonicModule,
      RouterModule.forChild([
        {
          path: '',
          component: HomePage
        },
  
      ])
    ],
    declarations: [HomePage]
  })
  export class HomePageModule {}
  </code></pre>