Добавление нового маршрута в Jhipster с помощью Angular 4

Question

Я пытаюсь добавить новый пункт меню в сгенерированное по умолчанию приложение JHipster. Кстати, я использую Angular 4.

Проблема, с которой я сталкиваюсь, состоит в том, что я всегда получаю ошибку ниже.

Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: "профиль пользователя"

Ниже приведены коды, которые я добавил.

Во-первых, я добавил папку с именем user-profile в src / main / webapp / app.

В него я добавил 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';

Содержание user-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;
        });
    }
}

Содержание user-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'
    }
}; 

Содержание user-profile.component.html

<div>Hello World!</div>

Я также изменил navbar.html, чтобы включить новый пункт меню со следующей ссылкой на маршрутизатор

routerLink="user-profile"

Любая помощь по этой проблеме будет принята с благодарностью.

Благодарю.

Answer 1

Вам может понадобиться загрузить ваш маршрутизатор где-нибудь.

Попробуйте выполнить следующее:

1. Добавьте user-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 {}

2. В app.module.ts добавьте следующее:

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

а также

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

Надеюсь, что это работает.