无法读取 Angular 2 中未定义的属性“路径”答案

【问题标题】：Cannot read property 'path' of undefined in Angular 2无法读取 Angular 2 中未定义的属性“路径”
【发布时间】：2018-01-08 16:48:49
【问题描述】：

我遇到了错误：

无法读取未定义的属性“路径”

当我登录时，page.Login 页面是与主页布局分开的模板。然后我为我的登录页面创建了 login.component.ts 为 <router-outlet> 和 auth.component.ts。

但主页工作正常。错误发生只加载单独的登录页面：

这是我的文件夹结构：

login.component.ts:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  constructor() { }
  ngOnInit() { }
}

login.route.ts:

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

import { NoAuthGuard } from '../no-auth-guard.service';
import { AuthComponent } from '../login/auth.component';

export const AUTH_ROUTES: Routes = [
  {
    path: '', component: AuthComponent,// canActivate: [NoAuthGuard]
  },
  {
    path: 'login', component: AuthComponent,// canActivate: [NoAuthGuard]
  },
  {
    path: 'register', component: AuthComponent,// canActivate: [NoAuthGuard]
  }
]

login.route.html:

&lt;router-outlet&gt;&lt;/router-outlet&gt;

auth.component.ts:

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormControl, Validators } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';

import { Errors, UserService } from '../../shared';
import { UserLogin } from '../../shared/models';

@Component({
  selector: 'auth-page',
  styleUrls: ['./auth.component.css'],
  templateUrl: './auth.component.html'
})
export class AuthComponent implements OnInit {
  authLoginForm: FormGroup;
  authRegisterForm: FormGroup;
  
  constructor(private route: ActivatedRoute, private router: Router, private userService: UserService,  private fb: FormBuilder) {
   // use FormBuilder to create a form group   
   -- some code here
   // end use FormBuilder to create a form group
  }

  ngOnInit() {}

  userLogin() { }
  userRegister() {}
}

app-routing.module.ts:

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

import { NoAuthGuard } from './auth/no-auth-guard.service';
import { HomeAuthResolver } from './layout/home-auth-resolver.service';

import { LoginComponent, AUTH_ROUTES } from './auth/index';
import {LayoutComponent,  PUBLIC_ROUTES } from './layout/index';

const routes: Routes = [
    { path: 'login', component: LoginComponent,data: { title: 'Public Views' }, children: AUTH_ROUTES },
    { path: 'register', component: LoginComponent,data: { title: 'Public Views' }, children: AUTH_ROUTES },
    { path: '', component: LayoutComponent, data: { title: 'Secure Views' }, children: PUBLIC_ROUTES },
    { path: '**', redirectTo: 'home' }
];

@NgModule({
    imports: [
        CommonModule,
        RouterModule.forRoot(routes)
    ],
    exports: [RouterModule]
})
export class AppRoutingModule { }

【问题讨论】：

app-routing.module 中的路由似乎与 login.routes.ts 中的路由冲突。不能去掉 login.routes.ts 直接引用 AuthComponent 吗？
是的，我试过了，但同样的错误。 { path: 'login', component: LoginComponent,data: { title: 'Public Views' }, loadChildren: './auth/login/auth.component' },
我建议去掉 login.routes。你不想要一个 url:/login/login 并且由于空路由：path:''，它无法确定它应该采取什么路线。所以直接在app-routes中引用Auth Component，去掉children，把path:''改成'secure'。我不明白的另一件事是你重定向到：没有回家路线的家

标签： javascript angular angular-router

【解决方案1】：

这个问题在于您的路由方案不明确。还值得注意的是Routes 是一个数组，因此是有序的。路由按照在该数组中定义的顺序进行评估。

所以将login.route.ts 中的空路由 (path: '') 移动到AUTH_ROUTES 数组的最后一个位置。

【讨论】：