使用 Angular 4 添加新路由到 Jhipster

Question

我正在尝试向默认生成的 JHipster 应用添加一个新的菜单项。顺便说一下，我正在使用 Angular 4。

我面临的问题是我总是收到以下错误。

Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'user-profile'

以下是我添加的代码。

首先，我在 src/main/webapp/app 下添加了一个名为 user-profile 的文件夹。

里面，我添加了index.ts、user-profile.component.html、user-profile.component.ts和user-profile.route.ts

index.ts的内容

export * from './user-profile.component';
export * from './user-profile.route';

用户的内容-profile.component.ts

import { Component, OnInit } from '@angular/core';
import { Principal } from '../shared';

@Component({
    selector: 'jhi-user-profile',
    templateUrl: './user-profile.component.html'
})
export class UserProfileComponent implements OnInit {
    account: Account;

    constructor(private principal: Principal) {}

    ngOnInit() {
        this.principal.identity().then((account) => {
            this.account = account;
        });
    }
}

用户的内容-profile.route.ts

import { Route } from '@angular/router';

import { UserRouteAccessService } from '../shared';
import { UserProfileComponent } from './';

export const userProfileRoute: Route = {
    path: 'user-profile',
    component: UserProfileComponent,
    data: {
        authorities: [],
        pageTitle: 'user-profile.title'
    }
};

用户的内容-profile.component.html

<div>Hello World!</div>

我还修改了 navbar.html 以包含一个带有以下路由器链接的新菜单项

routerLink="user-profile"

任何对此问题的帮助将不胜感激。

谢谢。

Answer 1

您可能需要在某处加载您的路由器。

尝试执行以下操作：

将用户-profile.module.ts 添加到与您的用户配置文件组件相同的目录中：



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

    import { UserProfileComponent, userProfileRoute } from './';

    @NgModule({
        imports: [
            RouterModule.forRoot([ userProfileRoute ], { useHash: true })
        ],
        declarations: [
            UserProfileComponent,
        ],
        entryComponents: [
        ],
        providers: [
        ]
    })
    export class UserProfileModule {}

在app.module.ts中添加以下内容：



    import { UserProfileModule } from './user-profile/user-profile.module';

和



    imports: [
        BrowserModule,
        LayoutRoutingModule,
        ...
        **UserProfileModule**
    ],

希望有用。

使用 Angular 4 添加新路由到 Jhipster

Adding new route to Jhipster using Angular 4

jhipster

angular

angular-router