代码之家 › 专栏 › 技术社区 › JUNNNN

Angular 5使用Angular Universal从API设置路由

angular-universal angular-router angular

JUNNNN · 技术社区 · 7 年前

我正在使用 Angular Universal Starter 对于我的应用程序,我尝试从API构建一个动态路由系统。我想在应用程序启动SRAP之前配置我的路由系统。为此,我使用 APP_INITIALISER .我走了不同的路,尤其是这条: Angular 5 Build routes from API data at startup

我的问题出现在我的应用程序上。单元ts文件:

export function initRoutes(routes: RouterService) {
    return () => routes.browse();
}

@NgModule({
    imports: [
        BrowserModule.withServerTransition({appId: 'universal'}),
        BrowserAnimationsModule,
        RouterModule.forRoot([]),
        TransferHttpCacheModule,
        HttpClientModule,
        InjectorModule,
        HomeModule,
    ],
    declarations: [
        AppComponent,
    ],
    entryComponents: [
        HomeComponent
    ],
    providers: [
        NetworkService,
        RouterService,
        {
            'provide': APP_INITIALIZER,
            'useFactory': initRoutes,
            'deps': [ RouterService ],
            'multi': true,
        },
        Title,
        MenuService
    ],
    bootstrap: [AppComponent]
})

当我导入时 TransferHttpCacheModule (对于在服务器端呈现应用程序时已经发出的请求,一个拦截器可以避免在客户端上重复HttpClient请求),我得到以下错误:

enter image description here

我的问题是:是否可以发送JSON(带有路由列表)来在SSR应用程序上配置我的路由系统?

1 回复 | 直到 7 年前

Julián Esteban Salomón Torres 7 年前

可以使用如下数组:

export const appRoutes: Routes = [
  {
    path: 'aRoute',
    component: NameComponent
  },
  ...
]

在NgModule导入中添加以下内容:

RouterModule.forRoot(appRoutes),

如果你走这条路 aRoute ,将呈现NameComponent。

推荐文章

BBaysinger alex · 未调用角度2+路由解析程序

6 年前

Justin · 如何向ActivatedRoute添加段?

6 年前

CodeMan · Angular 2路由导航在新选项卡中运行(使用Angular Router naviagte)

6 年前

roger_that · Angular2:从URL访问查询参数时出错

6 年前

JUNNNN · Angular 5使用Angular Universal从API设置路由

7 年前

Felipe Micali · 输入父管线角度5时导航到上次访问的子管线

7 年前

HansMusterWhatElse · 角度-跨不同模块提供防护

7 年前

Wai Yan Hein · 子模块的角度5布线不工作

7 年前

OrdinaryProgrammer · 当我要在URL中传递参数时,读取了错误的URL

7 年前

TheProfiler · 如何保持角航线导航固定?角度路由重定向到新页面

7 年前