angular - タイプ XYZComponent は 2 つのモジュールの一部であり、モジュールはどのルートを取るべきか混乱します

Question

これがシナリオです。UserConsoleModule と ShoppingCartModule があります。MyProfileComponent というコンポーネントがあります。/user-console に移動すると、MyProfileComponent が表示されるので、それを UserConsoleModule の宣言に入れました。/shopping-cart/profile では、ユーザーがチェックアウトするときに、すべての情報に問題がないことを確認するために彼のプロフィールを表示しています。そこで、MyProfileComponent を再利用して配置し、そのコンポーネントを ShoppingCartModule で宣言します。コンポーネントは2つのモジュールの一部です。なぜそれが2つのモジュールにあるのに気になるのかわかりません。それらは独立しています。再利用するコンポーネントが何であれ、その特定のモジュールでそれを宣言し、RC 5 以前の宣言と同じように良いと思いました。このモジュールのことは良いのですが、実際には多くの混乱を引き起こします。

もう一つの問題はルートです。UserConsoleModule と ShoppingCartModule の両方を再利用する AdminConsoleModule があります。私がしたことは、AdminConsoleModule のインポートで ShoppingCartModule をインポートしたことです。/shopping-cart が /shopping-cart/cart にリダイレクトされます。そのため、管理コンソールが読み込まれるとすぐに、/admin-console/cart にリダイレクトされます。ルーターアウトレットに UserResults をロードする必要があります。ルーターが混乱しています。ここで何か間違ったことをしていますか？

ソリューションの一部として、ショッピング カート コンポーネントのみを含む共有モジュールを作成しました。アイデアは、shared-shopping-cart.module.ts と shopping-cart.routing.ts を shopping-cart.module にインポートすることでした。 ts であるため、分離されたままになります。しかし、共有モジュールは、私のショッピングカート.コンポーネント.tsにルーターアウトレットがあるため、ルーターアウトレットが不明であるというエラーをスローします。

私の admin-console.routing.ts

const AdminConsoleRoutes: Routes = [
    {path: '',   component: AdminConsoleComponent,
        children: [
            {path: '',  component:UserResultsComponent},
            {path: 'search',  component:UserResultsComponent},
            {path: 'user-messages',  component: MyMessagesComponent},
            {path: 'user-profile',  component: MyProfileComponent },
            {path: 'user-progress',  component: MyProgressComponent},
            {path: 'user-receipts',  component: MyReceiptsComponent},
            {path: 'user-courses',   component: MyCoursesComponent},
            {path: 'group-membership',   component: GroupMembershipComponent},
        ]
    }
];

@NgModule({
    imports:[RouterModule.forChild(ManageUserRoutes)],
    exports:[RouterModule]
})

export class AdminConsoleRoutingModule{}

私の AdminConsoleModule:

@NgModule({
    imports:[CommonModule, FormsModule, ShoppingCartModule, UserConsoleModule,  AdminConsoleRoutingModule],
    declarations:[AdminConsoleComponent, UserSearchComponent, UserResultsComponent],
    exports:[]
})

export class AdminConsoleModule{}

UserConsoleにはこれらのコンポーネントがあるため、my-profileとすべてをインポートしていません。

ユーザーコンソールモジュール

@NgModule({
    imports: [CommonModule, ReactiveFormsModule, FormsModule, PrimeNGModule, UserProfileModule, MyProfileModule, UserConsoleRoutingModule, AddressModule, TranslateModule],
    declarations: [
        UserConsoleComponent,
        MyMessagesComponent,
        MyProgressComponent,
        MyReceiptsComponent,
        MyCoursesComponent,
        GroupMembershipComponent,
        MyCredentialsComponent,
        TermsAndConditionComponent,
    ],
    exports:[
        MyMessagesComponent,
        MyProgressComponent,
        MyReceiptsComponent,
        MyCoursesComponent,
        GroupMembershipComponent,
        MyCredentialsComponent,
        TermsAndConditionComponent
    ],
    providers:[]
})

export class UserConsoleModule { }

ショッピングカートモジュール

@NgModule({
    imports:[CommonModule, FormsModule, PrimeNGModule, MyProfileModule, ShoppingCartRoutingModule, AddressModule],
    declarations: [
        ShoppingCartComponent,
        CartComponent,
        ProfileComponent,
        AffiliationComponent,
        ShippingComponent,
        PaymentComponent,
        ConfirmComponent,
        OrderCompleteComponent,
    ],
    exports:[],
    providers:[]
})

export class ShoppingCartModule { }

shopping-cart.routing.ts

const ShoppingCartRoutes: Routes = [
    {path: '', component:ShoppingCartComponent,
        children:[
            {path: '', pathMatch:'prefix', redirectTo:'cart'},
            {path:'cart', component:CartComponent},
            {path:'profile', component:ProfileComponent},
            {path:'affiliation', component:AffiliationComponent},
            {path:'shipping', component:ShippingComponent},
            {path:'payment', component:PaymentComponent},
            {path:'confirm', component:ConfirmComponent},
            {path:'order-complete', component:OrderCompleteComponent},
        ]
    }
];

@NgModule({
    imports:[RouterModule.forChild(ShoppingCartRoutes)],
    exports:[RouterModule]

})

export class ShoppingCartRoutingModule{}

AdminConsoleModuel のインポートで、UserConsoleModule を ShoppingCartModule の前に配置すると、UserConsoleRouting にもリダイレクトがあるため、admin-console/my-profile に移動します。

ここに user-console.routing.ts があります

const UserConsoleRoutes: Routes = [
{path:'', component: UserConsoleComponent,
    children:[
        {path: '', pathMatch:'full', redirectTo:'my-profile'},
        {path: 'my-messages',  component: MyMessagesComponent},
        {path: 'my-profile',  component: MyProfileComponent},
        {path: 'my-progress',  component: MyProgressComponent},
        {path: 'my-courses',   component: MyCoursesComponent},
        {path: 'my-receipts', component: MyReceiptsComponent},
        {path: 'my-credentials', component: MyCredentialsComponent},
        {path: 'group-membership',   component: GroupMembershipComponent}
    ]
}
];

@NgModule({
    imports:[RouterModule.forChild(UserConsoleRoutes)],
    exports:[RouterModule]
})

export class UserConsoleRoutingModule{}

最終的な解決策は、各コンポーネントのモジュールを作成し、それをどこにでもインポートするように見えると思います。:p