Ajout d'une nouvelle route à Jhipster en utilisant Angular 4

Question

J'essaie d'ajouter un nouvel élément de menu à l'application JHipster générée par défaut. J'utilise Angular 4 en passant.

Le problème auquel je suis confronté est que je reçois toujours l'erreur ci-dessous.

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

Voici les codes que j'ai ajoutés. En premier lieu, j'ai ajouté un dossier nommé profil utilisateur sous src/main/webapp/app.

Dans ce document, j'ai ajouté index.ts, utilisateur-utilisateur, profile.component.html-profile.component.ts et utilisateur-profile.route.ts

Le contenu de index.ts

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

Le contenu de l'utilisateur-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; 
     }); 
    } 
} 

Le contenu de l'utilisateur-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' 
    } 
}; 

Le contenu de l'utilisateur profile.component.html

<div>Hello World!</div> 

I a également modifié navbar.html à inclure un nouvel élément de menu avec la routerlink suivante

routerLink="user-profile" 

Toute aide à ce problème être grandement apprécié.

Merci.

Answer 1

Vous devrez peut-être charger votre routeur quelque part.

Essayez effectuer les opérations suivantes:

1. Ajouter un utilisateur profile.module.ts dans le même répertoire que votre profil utilisateur du composant:

    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. Dans les app.module.ts, ajoutez ce qui suit:

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

et

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

espérons que cela fonctionne.