角度直接加载一个懒惰的模块与嵌套的路由器插座

我有一个Angular CLI应用程序与几个懒加载模块，其中一些包含自己的路由器插座。从应用程序的根目录导航时，我无法访问所有路线。但是，如果我尝试直接路由到延迟加载模块中的路由，则表明浏览器尝试从不存在的文件夹加载应用程序。角度直接加载一个懒惰的模块与嵌套的路由器插座

对于实施例中，根路由模块具有路由其看起来像这样：然后

{ 
      path: 'A', loadChildren: 
      './A/A.module#AModule', 
      canActivate: [LoadGuardService] 
     }

AModule有这样的路由：

export const AModRoutes: Routes = [ 
    { 
    path: '', component: AHomeComponent, children: [ 
     { path: 'building', pathMatch: 'full', component: BuildingComponent }, 
     { path: 'sitewide', pathMatch: 'full', component: SitewideComponent }, 
     { path: 'spaces', pathMatch: 'full', loadChildren: '../spaces/spaces.module#SpacesModule' } 
    ] 
    } 
];

如果我加载从头应用（上运行端口4200），我可以点击并导航到127.0.0.1:4200/A/building，但是我无法直接导航到这个相同的URL。

控制台提供了这样一堆错误：

GET http://127.0.0.1:4200/es/inline.bundle.js net::ERR_ABORTED building:20 . . . GET http://127.0.0.1:4200/es/main.bundle.js 404 (Not Found) build:20

我不知道这是关系到正确设置基本href什么的。我最近切换到了CLI，必须将 { provide: APP_BASE_HREF, useValue: '/' }添加到根模块提供程序才能使其工作。

更多的东西，我发现在写这个问题：一旦我浏览到，比方说，A/building，我可以向nvigate A/sitewide，但不B/或A/spaces。这不是切换到CLI

EDIT前一个问题：添加根路由器模块（大部分，至少）

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

import { LoadGuardService } from "./services/load-guard.service"; 

export const APPROUTES: Routes = 
    [ 
     { 
      path: 'A', loadChildren: 
      './A/A.module#AModule', 
      canActivate: [LoadGuardService] 
     }, 
     { 
      path: 'B', loadChildren: 
      './B/B.module#BModule', 
      canActivate: [LoadGuardService], 
      data: { byPhone: false } 
     }, 
... 

    ]; 

@NgModule({ 
    imports: [RouterModule.forRoot(APPROUTES)], 
    exports: [RouterModule], 
    providers: [LoadGuardService] 
}) 
export class AppRoutingModule { }

为了清楚起见，该路由阵列中的省略号不实际的代码。只是为了缩短片段

来源

2017-09-20 Charlie Elverson

可能LoadGuardService返回false（它是否依赖于一个子组件激活的服务？），或者你正在加载你的RouterModule乱序或其他路径在其他地方，以及懒惰和冲突？ –

我已经通过删除LoadGuardService并对其进行测试来始终返回true。我认为如果LoadGuardService返回false，导航将不会发生，但它似乎试图从A/building（不是目录）加载应用程序。我尝试将AppRoutingModule放置在导入中，并保持不变。 –

而在你的应用程序路由中，你正在使用'imports：[RouterModule.forRoot（routes）]'并且在你的孩子中使用'imports：[RouterModule.forChild（routes）]''？这是一个我从来没有遇到的奇怪的，对不起，我没有更多的帮助。 –

我不记得在什么时候我不得不添加{ provide: APP_BASE_HREF, useValue: '/' }到app.module，但是当我这样做，我index.html中注释掉<base href="/">（在当时，这似乎工作）。我没有注意到这条线，现在一切正在工作。有人可以解释什么是APP_BASE_HREF吗？

来源

2017-09-20 23:22:46

角度直接加载一个懒惰的模块与嵌套的路由器插座

回答

相关问题