Type XYZComponent is a part of two modules, module gets confused what route to take

Question

Here is the scenario. I have a UserConsoleModule and ShoppingCartModule. I have a component called MyProfileComponent. When you go to /user-console, you are shown MyProfileComponent and hence I have put that in the declarations of UserConsoleModule. Now in the /shopping-cart/profile, when the user is checking out, I am showing his profile to make sure every info is ok. So I reuse and put MyProfileComponent over there and declare that component in the ShoppingCartModule. Now it says, component is part of two modules. I don't know why does it bother that it is in two modules. They are independent. Whatever components I reuse, I declare that in that particular module and I thought I am good just like declarations before R.C 5. This module thing is good, but actually creates much confusion.

Another issue is route. I have an AdminConsoleModule, where I reuse both UserConsoleModule and ShoppingCartModule. What I did was I imported ShoppingCartModule in the imports of AdminConsoleModule. My /shopping-cart redirects to /shopping-cart/cart. So as soon as the Admin Console loads it redirects to /admin-console/cart. While it should load UserResults in the router-outlet. The router is confused. Am I doing something wrong here?

As a part of the solution, I made a shared module, which just contains shopping-cart components and the idea was to import shared-shopping-cart.module.ts and shopping-cart.routing.ts in shopping-cart.module.ts, so that it remains decoupled. But shared modules throws an error saying router-outlet not known as my shopping-cart.component.ts has router-outlet.

My 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{}

My AdminConsoleModule:

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

export class AdminConsoleModule{}

I am not importing my-profile and everything as UserConsole has those components.

UserConsoleModule

@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 { }

ShoppingCartModule

@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{}

In the imports of AdminConsoleModuel, if I put UserConsoleModule before ShoppingCartModule, then it goes to admin-console/my-profile as my UserConsoleRouting also has a redirect.

Here is the 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{}

I think, the final solutions appears to make a module for each component and import it every where. :p