Angular 6 and router

Question

Good Morning, I have a question about routers, I defined my app.routing.module.ts:

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


const APP_ROUTES: Routes = [
  {path: 'livros', loadChildren: './livros/livros.module'},
];

@NgModule({
  imports: [RouterModule.forRoot(APP_ROUTES)],
  exports: [RouterModule]
})


export class AppRoutingModule {}

and my livros.routing.module.ts:

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

import {LivrosComponent} from './livros.component';

const LIVROS_ROUTES: Routes = [
  {path: '', component: LivrosComponent},
];

@NgModule({
  imports: [RouterModule.forChild(LIVROS_ROUTES)],
  exports: [RouterModule]
})

export class LivrosRoutingModule {}

When I start my app I get this error:

TypeError: router.initialNavigation is not a function at RouterInitializer.push../node_modules/@angular/router/fesm5/router.js.RouterInitializer.bootstrapListener (router.js:5067) at core.js:4467 at Array.forEach () at ApplicationRef.push../node_modules/@angular/core/fesm5/core.js.ApplicationRef._loadComponent (core.js:4467) at ApplicationRef.push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap (core.js:4405) at core.js:4205 at Array.forEach () at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef._moduleDoBootstrap (core.js:4205) at core.js:4172 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)

I searched for the solution and configured app.routing.module.ts with initialNavigation: false :

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


const APP_ROUTES: Routes = [
  {path: 'livros', loadChildren: './livros/livros.module'},
];

@NgModule({
  imports: [RouterModule.forRoot(APP_ROUTES, {initialNavigation: false})],
  exports: [RouterModule]
})


export class AppRoutingModule {}

but I get a new problem:

TypeError: router.setUpLocationChangeListener is not a function at RouterInitializer.push../node_modules/@angular/router/fesm5/router.js.RouterInitializer.bootstrapListener (router.js:5070) at core.js:4467 at Array.forEach () at ApplicationRef.push../node_modules/@angular/core/fesm5/core.js.ApplicationRef._loadComponent (core.js:4467) at ApplicationRef.push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap (core.js:4405) at core.js:4205 at Array.forEach () at PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef._moduleDoBootstrap (core.js:4205) at core.js:4172 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)

Have some new configuration in version 6? How can I solved this problem? What's happened in my app? Thank you.

I guess in order to refer to another module, you have to define the module name after the module path like so: {path: 'livros', loadChildren: './livros/livros.module#LivrosModule'}, But i am not sure if this is the problem in this case. — btx

Jose Luiz Junior Jose Luiz Junior · Accepted Answer · 2018-06-10T16:35:03

ok

{
  "name": "nodebook-front",
  "version": "0.0.0",
  "scripts": {
    "ng": "node_modules/.bin/ng",
    "start": "ng serve "
},
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.4",
    "@angular/cdk": "^6.2.1",
    "@angular/common": "^6.0.4",
    "@angular/compiler": "^6.0.4",
    "@angular/core": "^6.0.4",
    "@angular/forms": "^6.0.4",
    "@angular/http": "^6.0.4",
    "@angular/material": "^6.2.1",
    "@angular/platform-browser": "^6.0.4",
    "@angular/platform-browser-dynamic": "^6.0.4",
    "@angular/router": "^6.0.4",
    "@ng-bootstrap/ng-bootstrap": "^2.1.0",
    "bootstrap": "^4.1.1",
    "core-js": "^2.5.7",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "primeng": "6.0.0-beta.1",
    "quill": "^1.3.6",
    "rxjs": "^6.2.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.6.8",
    "@angular/cli": "^6.0.8",
    "@angular/compiler-cli": "^6.0.4",
    "@angular/language-service": "^6.0.4",
    "@types/jasmine": "^2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.2.1",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.2",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~1.4.2",
    "karma-jasmine": "~1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.3.0",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "~2.7.2"
  }
}

[EDITED]

my project structure

Angular 6 and router

1 Answers