Question

应用程序具有标准路由，将由客户使用，并且一个用于（UI）测试应用程序的范围模块（组件）。开发人员必须能够使用客户有权访问的所有路由，并且还能够访问“dev-routes”。

我已经尝试检查当前环境并将两个数组（相同类型）连接到一个数组中，这会导致编译器抛出错误：

webpack: Failed to compile.
webpack: Compiling...
Date: 2018-04-05T09:20:50.790Z - Hash: 4640ed7a42057bb6f11f - Time: 2046ms
6 unchanged chunks

ERROR in Cannot read property 'loadChildren' of undefined

webpack: Failed to compile.

这是浏览器中的错误：

当没有使用.concat()函数时 - 只使用三元运算符或只使用死简单路径变量 - 路由按预期工作。

应用-routing.module.ts

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

const devRoutes: Routes = [
    {
        path: 'dev',
        loadChildren: 'app/families/dev/dev.module#DevModule'
    },
];

const routes: Routes = [
    {
        path: '',
        redirectTo: '',
        pathMatch: 'full'
    }
];

@NgModule({
    imports: [
        RouterModule.forRoot(environment.production ? routes : devRoutes.concat(routes))
    ],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

dev.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { DevRoutingModule } from './dev-routing.module';
import { DevHomeComponent } from './dev-home/dev-home.component';
import { DevTypographyComponent } from './dev-typography/dev-typography.component';
import { DevInputComponent } from './dev-input/dev-input.component';
import { DevExecuteComponent } from './dev-execute/dev-execute.component';
import { DevColorComponent } from './dev-color/dev-color.component';
import { DevVariablesComponent } from './dev-variables/dev-variables.component';

@NgModule({
    imports: [
        CommonModule,
        DevRoutingModule
    ],
    declarations: [
        DevHomeComponent,
        DevTypographyComponent,
        DevInputComponent,
        DevExecuteComponent,
        DevColorComponent,
        DevVariablesComponent
    ]
})
export class DevModule {
}

DEV-routing.module.ts

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

import { DevHomeComponent } from './dev-home/dev-home.component';
import { DevTypographyComponent } from './dev-typography/dev-typography.component';
import { DevInputComponent } from './dev-input/dev-input.component';
import { DevExecuteComponent } from './dev-execute/dev-execute.component';
import { DevColorComponent } from './dev-color/dev-color.component';
import { DevVariablesComponent } from './dev-variables/dev-variables.component';

const routes: Routes = [
    {
        path: '',
        component: DevHomeComponent
    },
    {
        path: 'typography',
        component: DevTypographyComponent
    },
    {
        path: 'input',
        component: DevInputComponent
    },
    {
        path: 'execute',
        component: DevExecuteComponent
    },
    {
        path: 'colors',
        component: DevColorComponent
    },
    {
        path: 'variables',
        component: DevVariablesComponent
    }
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class DevRoutingModule {
}

Answer 1

可能是因为ES6 const？你在devRoutes的let变量上试过concat吗？

连接Angular <routes>数组会导致编译错误

1 个答案: