Angular 6 和路由器答案

【问题标题】：Angular 6 and routerAngular 6 和路由器
【发布时间】：2018-11-19 22:23:19
【问题描述】：

早上好，我有一个关于路由器的问题，我定义了我的 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 {}

还有我的 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 {}

当我启动我的应用程序时，我收到此错误：

TypeError: router.initialNavigation 不是函数在 RouterInitializer.push../node_modules/@angular/router/fesm5/router.js.RouterInitializer.bootstrapListener (router.js:5067) 在 core.js:4467 在 Array.forEach () 在 ApplicationRef.push../node_modules/@angular/core/fesm5/core.js.ApplicationRef._loadComponent (core.js:4467) 在 ApplicationRef.push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap (core.js:4405) 在 core.js:4205 在 Array.forEach () 在 PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef._moduleDoBootstrap (core.js:4205) 在 core.js:4172 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)

我搜索了解决方案并将 app.routing.module.ts 配置为 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 {}

但我遇到了一个新问题：

TypeError: router.setUpLocationChangeListener 不是函数在 RouterInitializer.push../node_modules/@angular/router/fesm5/router.js.RouterInitializer.bootstrapListener (router.js:5070) 在 core.js:4467 在 Array.forEach () 在 ApplicationRef.push../node_modules/@angular/core/fesm5/core.js.ApplicationRef._loadComponent (core.js:4467) 在 ApplicationRef.push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap (core.js:4405) 在 core.js:4205 在 Array.forEach () 在 PlatformRef.push../node_modules/@angular/core/fesm5/core.js.PlatformRef._moduleDoBootstrap (core.js:4205) 在 core.js:4172 在 ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)

版本 6 中有一些新配置吗？我该如何解决这个问题？我的应用发生了什么？谢谢。

【问题讨论】：

发布你的 package.json 文件。
我想为了引用另一个模块，您必须在模块路径之后定义模块名称，如下所示：{path: 'livros', loadChildren: './livros/livros.module#LivrosModule'}, 但我不确定这是否是这种情况下的问题。
@btx 无效
您是否为您的应用配置了延迟加载？
是的，我使用延迟加载

标签： typescript frontend angular6

【解决方案1】：

好的

{
  "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"
  }
}

[编辑]

我的项目结构

【讨论】：