在Angular/JHipster应用程序中使用另一个模块的组件 [英] Using Components from Another Module on a Angular/JHipster Application

问题描述

我正在尝试在 jhipster 生成的 Angular 5 应用程序上使用另一个module中的component.

当导入包含要使用的component的module时，发生导入的module的route被导入的module的route覆盖.

• phone.module.ts导出PhoneComponent.
• contact-info.module.ts导入phone.module.ts.
• 此后，在contact-info.route.ts中声明的每个route开始渲染在phone.module.ts中声明的组件.看来电话模块已被完全覆盖.

phone.module.ts

 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { JhiLanguageService } from 'ng-jhipster';
import { JhiLanguageHelper } from 'app/core';

import { FrontendSharedModule } from 'app/shared';
import {
    PhoneComponent,
    PhoneDetailComponent,
    PhoneUpdateComponent,
    PhoneDeletePopupComponent,
    PhoneDeleteDialogComponent,
    phoneRoute,
    phonePopupRoute
} from './';

const ENTITY_STATES = [...phoneRoute, ...phonePopupRoute];

@NgModule({
    imports: [FrontendSharedModule, RouterModule.forChild(ENTITY_STATES)],
    declarations: [PhoneComponent, PhoneDetailComponent, PhoneUpdateComponent, PhoneDeleteDialogComponent, PhoneDeletePopupComponent],
    entryComponents: [PhoneComponent, PhoneUpdateComponent, PhoneDeleteDialogComponent, PhoneDeletePopupComponent],
    providers: [{ provide: JhiLanguageService, useClass: JhiLanguageService }],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    exports: [PhoneComponent]
})
export class BurocracyPhoneModule {
    constructor(private languageService: JhiLanguageService, private languageHelper: JhiLanguageHelper) {
        this.languageHelper.language.subscribe((languageKey: string) => {
            if (languageKey !== undefined) {
                this.languageService.changeLanguage(languageKey);
            }
        });
    }
}
 

contact-info.module.ts

 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { JhiLanguageService } from 'ng-jhipster';
import { JhiLanguageHelper } from 'app/core';

import { FrontendSharedModule } from 'app/shared';
import {
    ContactInfoComponent,
    ContactInfoDetailComponent,
    ContactInfoUpdateComponent,
    ContactInfoDeletePopupComponent,
    ContactInfoDeleteDialogComponent,
    contactInfoRoute,
    contactInfoPopupRoute
} from './';
import { BurocracyPhoneModule } from 'app/entities/burocracy/phone/phone.module';

const ENTITY_STATES = [...contactInfoRoute, ...contactInfoPopupRoute];

@NgModule({
    imports: [FrontendSharedModule, BurocracyPhoneModule, RouterModule.forChild(ENTITY_STATES)],
    declarations: [
        ContactInfoComponent,
        ContactInfoDetailComponent,
        ContactInfoUpdateComponent,
        ContactInfoDeleteDialogComponent,
        ContactInfoDeletePopupComponent
    ],
    entryComponents: [ContactInfoComponent, ContactInfoUpdateComponent, ContactInfoDeleteDialogComponent, ContactInfoDeletePopupComponent],
    providers: [{ provide: JhiLanguageService, useClass: JhiLanguageService }],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class BurocracyContactInfoModule {
    constructor(private languageService: JhiLanguageService, private languageHelper: JhiLanguageHelper) {
        this.languageHelper.language.subscribe((languageKey: string) => {
            if (languageKey !== undefined) {
                this.languageService.changeLanguage(languageKey);
            }
        });
    }
}
 

http://localhost:8080/#/contact-info 之前导入BurocracyPhoneModule

http://localhost:8080/#/contact-info 导入BurocracyPhoneModule之后

其他可能与问题有关的文件

以下所有由jhipster 生成的文件.

phone.route.ts

 import { Injectable } from '@angular/core';
import { HttpResponse } from '@angular/common/http';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Routes } from '@angular/router';
import { JhiPaginationUtil, JhiResolvePagingParams } from 'ng-jhipster';
import { UserRouteAccessService } from 'app/core';
import { Observable, of } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { Phone } from 'app/shared/model/burocracy/phone.model';
import { PhoneService } from './phone.service';
import { PhoneComponent } from './phone.component';
import { PhoneDetailComponent } from './phone-detail.component';
import { PhoneUpdateComponent } from './phone-update.component';
import { PhoneDeletePopupComponent } from './phone-delete-dialog.component';
import { IPhone } from 'app/shared/model/burocracy/phone.model';

@Injectable({ providedIn: 'root' })
export class PhoneResolve implements Resolve<IPhone> {
    constructor(private service: PhoneService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IPhone> {
        const id = route.params['id'] ? route.params['id'] : null;
        if (id) {
            return this.service.find(id).pipe(
                filter((response: HttpResponse<Phone>) => response.ok),
                map((phone: HttpResponse<Phone>) => phone.body)
            );
        }
        return of(new Phone());
    }
}

export const phoneRoute: Routes = [
    {
        path: '',
        component: PhoneComponent,
        resolve: {
            pagingParams: JhiResolvePagingParams
        },
        data: {
            authorities: ['ROLE_USER'],
            defaultSort: 'id,asc',
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: ':id/view',
        component: PhoneDetailComponent,
        resolve: {
            phone: PhoneResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: 'new',
        component: PhoneUpdateComponent,
        resolve: {
            phone: PhoneResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: ':id/edit',
        component: PhoneUpdateComponent,
        resolve: {
            phone: PhoneResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService]
    }
];

export const phonePopupRoute: Routes = [
    {
        path: ':id/delete',
        component: PhoneDeletePopupComponent,
        resolve: {
            phone: PhoneResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService],
        outlet: 'popup'
    }
];
 

contact-info.route.ts

 import { Injectable } from '@angular/core';
import { HttpResponse } from '@angular/common/http';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Routes } from '@angular/router';
import { JhiPaginationUtil, JhiResolvePagingParams } from 'ng-jhipster';
import { UserRouteAccessService } from 'app/core';
import { Observable, of } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { ContactInfo } from 'app/shared/model/burocracy/contact-info.model';
import { ContactInfoService } from './contact-info.service';
import { ContactInfoComponent } from './contact-info.component';
import { ContactInfoDetailComponent } from './contact-info-detail.component';
import { ContactInfoUpdateComponent } from './contact-info-update.component';
import { ContactInfoDeletePopupComponent } from './contact-info-delete-dialog.component';
import { IContactInfo } from 'app/shared/model/burocracy/contact-info.model';

@Injectable({ providedIn: 'root' })
export class ContactInfoResolve implements Resolve<IContactInfo> {
    constructor(private service: ContactInfoService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IContactInfo> {
        const id = route.params['id'] ? route.params['id'] : null;
        if (id) {
            return this.service.find(id).pipe(
                filter((response: HttpResponse<ContactInfo>) => response.ok),
                map((contactInfo: HttpResponse<ContactInfo>) => contactInfo.body)
            );
        }
        return of(new ContactInfo());
    }
}

export const contactInfoRoute: Routes = [
    {
        path: '',
        component: ContactInfoComponent,
        resolve: {
            pagingParams: JhiResolvePagingParams
        },
        data: {
            authorities: ['ROLE_USER'],
            defaultSort: 'id,asc',
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: ':id/view',
        component: ContactInfoDetailComponent,
        resolve: {
            contactInfo: ContactInfoResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: 'new',
        component: ContactInfoUpdateComponent,
        resolve: {
            contactInfo: ContactInfoResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: ':id/edit',
        component: ContactInfoUpdateComponent,
        resolve: {
            contactInfo: ContactInfoResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService]
    }
];

export const contactInfoPopupRoute: Routes = [
    {
        path: ':id/delete',
        component: ContactInfoDeletePopupComponent,
        resolve: {
            contactInfo: ContactInfoResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService],
        outlet: 'popup'
    }
];
 

entity.module.ts

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

@NgModule({
    imports: [
        RouterModule.forChild([

            {
                path: 'contact-info',
                loadChildren: './burocracy/contact-info/contact-info.module#BurocracyContactInfoModule'
            },
            {
                path: 'phone',
                loadChildren: './burocracy/phone/phone.module#BurocracyPhoneModule'
            }
            /* jhipster-needle-add-entity-route - JHipster will add entity modules routes here */
        ])
    ],
    declarations: [],
    entryComponents: [],
    providers: [],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class FrontendEntityModule {}

 

解决方案

我设法解决了该问题.实际上，它看起来更像是一种变通方法，而不是一种适当的解决方案，但它可以完成工作.

结果证明Angular非常关心如何处理routes，并且(显然)导出route的正确方法是导出为class而不是constant.另外，由于角度错误，必须在之前导入route 模块.

`contact-info.route.ts

 @Injectable({ providedIn: 'root' })
export class ContactInfoResolve implements Resolve<IContactInfo> {
    constructor(private service: ContactInfoService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IContactInfo> {
        const id = route.params['id'] ? route.params['id'] : null;
        if (id) {
            return this.service.find(id).pipe(
                filter((response: HttpResponse<ContactInfo>) => response.ok),
                map((contactInfo: HttpResponse<ContactInfo>) => contactInfo.body)
            );
        }
        return of(new ContactInfo());
    }
}
// constants are not imported anymore
const contactInfoRoute: Routes = [
   // ...
]
const contactInfoPopupRoute: Routes = [
   // ...
]
// This is the juice part
const ROUTE = [...contactInfoRoute, ...contactInfoPopupRoute];
@NgModule({
    imports: [RouterModule.forChild(ROUTE)],
    exports: [RouterModule]
})
export class InfoRoute { }
 

contact-info.module.ts

 import {
    ContactInfoComponent,
    ContactInfoDetailComponent,
    ContactInfoUpdateComponent,
    ContactInfoDeletePopupComponent,
    ContactInfoDeleteDialogComponent, 
    InfoRoute
} from './';

@NgModule({
    imports: [
        // importing routes as a class
        InfoRoute,
        BurocracyPhoneModule,
        FrontendSharedModule
    ],
    declarations: [
        ContactInfoComponent,
        ContactInfoDetailComponent,
        ContactInfoUpdateComponent,
        ContactInfoDeleteDialogComponent,
        ContactInfoDeletePopupComponent
    ],
    entryComponents: [ContactInfoComponent, ContactInfoUpdateComponent, ContactInfoDeleteDialogComponent, ContactInfoDeletePopupComponent],
    providers: [{ provide: JhiLanguageService, useClass: JhiLanguageService }],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class BurocracyContactInfoModule {
    constructor(private languageService: JhiLanguageService, private languageHelper: JhiLanguageHelper) {
        this.languageHelper.language.subscribe((languageKey: string) => {
            if (languageKey !== undefined) {
                this.languageService.changeLanguage(languageKey);
            }
        });
    }
}
 

我对这种解决方案不是很满意，因为我认为它不是很优雅，但是它对我有用.如果有人有其他解决此问题的方法，请与我们分享.

I'm trying to use a component from another module on an Angular 5 application generated by jhipster.

When a module that contains the component that I want to use is imported the route of the module where the importing occurred is overwritten by the route of the imported module.

• phone.module.ts exports PhoneComponent.
• contact-info.module.ts import phone.module.ts.
• After that, every route declared in contact-info.route.ts starts to render the components declared in the phone.module.ts. It appears the phone module is completely overwritten.

phone.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { JhiLanguageService } from 'ng-jhipster';
import { JhiLanguageHelper } from 'app/core';

import { FrontendSharedModule } from 'app/shared';
import {
    PhoneComponent,
    PhoneDetailComponent,
    PhoneUpdateComponent,
    PhoneDeletePopupComponent,
    PhoneDeleteDialogComponent,
    phoneRoute,
    phonePopupRoute
} from './';

const ENTITY_STATES = [...phoneRoute, ...phonePopupRoute];

@NgModule({
    imports: [FrontendSharedModule, RouterModule.forChild(ENTITY_STATES)],
    declarations: [PhoneComponent, PhoneDetailComponent, PhoneUpdateComponent, PhoneDeleteDialogComponent, PhoneDeletePopupComponent],
    entryComponents: [PhoneComponent, PhoneUpdateComponent, PhoneDeleteDialogComponent, PhoneDeletePopupComponent],
    providers: [{ provide: JhiLanguageService, useClass: JhiLanguageService }],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    exports: [PhoneComponent]
})
export class BurocracyPhoneModule {
    constructor(private languageService: JhiLanguageService, private languageHelper: JhiLanguageHelper) {
        this.languageHelper.language.subscribe((languageKey: string) => {
            if (languageKey !== undefined) {
                this.languageService.changeLanguage(languageKey);
            }
        });
    }
}

contact-info.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterModule } from '@angular/router';
import { JhiLanguageService } from 'ng-jhipster';
import { JhiLanguageHelper } from 'app/core';

import { FrontendSharedModule } from 'app/shared';
import {
    ContactInfoComponent,
    ContactInfoDetailComponent,
    ContactInfoUpdateComponent,
    ContactInfoDeletePopupComponent,
    ContactInfoDeleteDialogComponent,
    contactInfoRoute,
    contactInfoPopupRoute
} from './';
import { BurocracyPhoneModule } from 'app/entities/burocracy/phone/phone.module';

const ENTITY_STATES = [...contactInfoRoute, ...contactInfoPopupRoute];

@NgModule({
    imports: [FrontendSharedModule, BurocracyPhoneModule, RouterModule.forChild(ENTITY_STATES)],
    declarations: [
        ContactInfoComponent,
        ContactInfoDetailComponent,
        ContactInfoUpdateComponent,
        ContactInfoDeleteDialogComponent,
        ContactInfoDeletePopupComponent
    ],
    entryComponents: [ContactInfoComponent, ContactInfoUpdateComponent, ContactInfoDeleteDialogComponent, ContactInfoDeletePopupComponent],
    providers: [{ provide: JhiLanguageService, useClass: JhiLanguageService }],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class BurocracyContactInfoModule {
    constructor(private languageService: JhiLanguageService, private languageHelper: JhiLanguageHelper) {
        this.languageHelper.language.subscribe((languageKey: string) => {
            if (languageKey !== undefined) {
                this.languageService.changeLanguage(languageKey);
            }
        });
    }
}

http://localhost:8080/#/contact-info Before the importing of BurocracyPhoneModule

http://localhost:8080/#/contact-info After the importing of BurocracyPhoneModule

Other files that may have some relation with the issue

All of the following files where gerenerated by jhipster.

phone.route.ts

import { Injectable } from '@angular/core';
import { HttpResponse } from '@angular/common/http';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Routes } from '@angular/router';
import { JhiPaginationUtil, JhiResolvePagingParams } from 'ng-jhipster';
import { UserRouteAccessService } from 'app/core';
import { Observable, of } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { Phone } from 'app/shared/model/burocracy/phone.model';
import { PhoneService } from './phone.service';
import { PhoneComponent } from './phone.component';
import { PhoneDetailComponent } from './phone-detail.component';
import { PhoneUpdateComponent } from './phone-update.component';
import { PhoneDeletePopupComponent } from './phone-delete-dialog.component';
import { IPhone } from 'app/shared/model/burocracy/phone.model';

@Injectable({ providedIn: 'root' })
export class PhoneResolve implements Resolve<IPhone> {
    constructor(private service: PhoneService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IPhone> {
        const id = route.params['id'] ? route.params['id'] : null;
        if (id) {
            return this.service.find(id).pipe(
                filter((response: HttpResponse<Phone>) => response.ok),
                map((phone: HttpResponse<Phone>) => phone.body)
            );
        }
        return of(new Phone());
    }
}

export const phoneRoute: Routes = [
    {
        path: '',
        component: PhoneComponent,
        resolve: {
            pagingParams: JhiResolvePagingParams
        },
        data: {
            authorities: ['ROLE_USER'],
            defaultSort: 'id,asc',
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: ':id/view',
        component: PhoneDetailComponent,
        resolve: {
            phone: PhoneResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: 'new',
        component: PhoneUpdateComponent,
        resolve: {
            phone: PhoneResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: ':id/edit',
        component: PhoneUpdateComponent,
        resolve: {
            phone: PhoneResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService]
    }
];

export const phonePopupRoute: Routes = [
    {
        path: ':id/delete',
        component: PhoneDeletePopupComponent,
        resolve: {
            phone: PhoneResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyPhone.home.title'
        },
        canActivate: [UserRouteAccessService],
        outlet: 'popup'
    }
];

contact-info.route.ts

import { Injectable } from '@angular/core';
import { HttpResponse } from '@angular/common/http';
import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot, Routes } from '@angular/router';
import { JhiPaginationUtil, JhiResolvePagingParams } from 'ng-jhipster';
import { UserRouteAccessService } from 'app/core';
import { Observable, of } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { ContactInfo } from 'app/shared/model/burocracy/contact-info.model';
import { ContactInfoService } from './contact-info.service';
import { ContactInfoComponent } from './contact-info.component';
import { ContactInfoDetailComponent } from './contact-info-detail.component';
import { ContactInfoUpdateComponent } from './contact-info-update.component';
import { ContactInfoDeletePopupComponent } from './contact-info-delete-dialog.component';
import { IContactInfo } from 'app/shared/model/burocracy/contact-info.model';

@Injectable({ providedIn: 'root' })
export class ContactInfoResolve implements Resolve<IContactInfo> {
    constructor(private service: ContactInfoService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IContactInfo> {
        const id = route.params['id'] ? route.params['id'] : null;
        if (id) {
            return this.service.find(id).pipe(
                filter((response: HttpResponse<ContactInfo>) => response.ok),
                map((contactInfo: HttpResponse<ContactInfo>) => contactInfo.body)
            );
        }
        return of(new ContactInfo());
    }
}

export const contactInfoRoute: Routes = [
    {
        path: '',
        component: ContactInfoComponent,
        resolve: {
            pagingParams: JhiResolvePagingParams
        },
        data: {
            authorities: ['ROLE_USER'],
            defaultSort: 'id,asc',
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: ':id/view',
        component: ContactInfoDetailComponent,
        resolve: {
            contactInfo: ContactInfoResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: 'new',
        component: ContactInfoUpdateComponent,
        resolve: {
            contactInfo: ContactInfoResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService]
    },
    {
        path: ':id/edit',
        component: ContactInfoUpdateComponent,
        resolve: {
            contactInfo: ContactInfoResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService]
    }
];

export const contactInfoPopupRoute: Routes = [
    {
        path: ':id/delete',
        component: ContactInfoDeletePopupComponent,
        resolve: {
            contactInfo: ContactInfoResolve
        },
        data: {
            authorities: ['ROLE_USER'],
            pageTitle: 'frontendApp.burocracyContactInfo.home.title'
        },
        canActivate: [UserRouteAccessService],
        outlet: 'popup'
    }
];

entity.module.ts

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

@NgModule({
    imports: [
        RouterModule.forChild([

            {
                path: 'contact-info',
                loadChildren: './burocracy/contact-info/contact-info.module#BurocracyContactInfoModule'
            },
            {
                path: 'phone',
                loadChildren: './burocracy/phone/phone.module#BurocracyPhoneModule'
            }
            /* jhipster-needle-add-entity-route - JHipster will add entity modules routes here */
        ])
    ],
    declarations: [],
    entryComponents: [],
    providers: [],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class FrontendEntityModule {}

解决方案

I managed to fix the problem. Actually, it looks more like a workaround then like a proper solution, but it gets the job done.

Turns out Angular is very particular about how to deal with routes and (apparently) the proper way to export a route is exporting as a class and not as a constant. Also, due to an Angular bug the route must be imported before the module.

`contact-info.route.ts

@Injectable({ providedIn: 'root' })
export class ContactInfoResolve implements Resolve<IContactInfo> {
    constructor(private service: ContactInfoService) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IContactInfo> {
        const id = route.params['id'] ? route.params['id'] : null;
        if (id) {
            return this.service.find(id).pipe(
                filter((response: HttpResponse<ContactInfo>) => response.ok),
                map((contactInfo: HttpResponse<ContactInfo>) => contactInfo.body)
            );
        }
        return of(new ContactInfo());
    }
}
// constants are not imported anymore
const contactInfoRoute: Routes = [
   // ...
]
const contactInfoPopupRoute: Routes = [
   // ...
]
// This is the juice part
const ROUTE = [...contactInfoRoute, ...contactInfoPopupRoute];
@NgModule({
    imports: [RouterModule.forChild(ROUTE)],
    exports: [RouterModule]
})
export class InfoRoute { }

contact-info.module.ts

import {
    ContactInfoComponent,
    ContactInfoDetailComponent,
    ContactInfoUpdateComponent,
    ContactInfoDeletePopupComponent,
    ContactInfoDeleteDialogComponent, 
    InfoRoute
} from './';

@NgModule({
    imports: [
        // importing routes as a class
        InfoRoute,
        BurocracyPhoneModule,
        FrontendSharedModule
    ],
    declarations: [
        ContactInfoComponent,
        ContactInfoDetailComponent,
        ContactInfoUpdateComponent,
        ContactInfoDeleteDialogComponent,
        ContactInfoDeletePopupComponent
    ],
    entryComponents: [ContactInfoComponent, ContactInfoUpdateComponent, ContactInfoDeleteDialogComponent, ContactInfoDeletePopupComponent],
    providers: [{ provide: JhiLanguageService, useClass: JhiLanguageService }],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class BurocracyContactInfoModule {
    constructor(private languageService: JhiLanguageService, private languageHelper: JhiLanguageHelper) {
        this.languageHelper.language.subscribe((languageKey: string) => {
            if (languageKey !== undefined) {
                this.languageService.changeLanguage(languageKey);
            }
        });
    }
}

I'm not really happy with this solution since I don't consider it really elegant, but it is working for me. If anyone has another approach to solve this issue, please share with us.

这篇关于在Angular/JHipster应用程序中使用另一个模块的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！