Here is the script. I have UserConsoleModule and ShoppingCartModule. I have a component MyProfileComponent. When you go to / user -console, you show MyProfileComponent and therefore I put this in UserConsoleModule declarations. Now in the file / shopping -cart / profile, when the user checks, I show his profile to make sure that all the data is in order. Therefore, I reuse and place MyProfileComponent there and declare this component in ShoppingCartModule. Now he says that the component is part of two modules. I do not know why it bothers that it consists of two modules. They are independent. No matter which components I reuse, I declare that in this particular module I thought I was right, as declarations before RC 5. This module is good, but actually creates a lot of confusion.
Another problem is the route. I have an AdminConsoleModule where I reuse UserConsoleModule and ShoppingCartModule. What I did, I imported ShoppingCartModule into the AdminConsoleModule import. My cart / cart is redirected to / shopping -cart / cart. Therefore, as soon as the Administration Console loads, it redirects to / admin -console / cart. Although it should load UserResults into a socket router. The router is confused. Am I something wrong here?
As part of the solution, I created a general module that only contains the components of the shopping cart, and the idea was to import shared-shopping-cart.module.ts and shopping-cart.routing.ts into the shopping cart .module.ts, so that he remains untied. But shared modules cause an error saying that a socket router, not known as my shopping-cart.component.ts, has a socket router.
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 do not import my profile and that’s all, as UserConsole has these 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 { }
in 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{}
When importing AdminConsoleModuel, if I put the UserConsoleModule in front of the ShoppingCartModule, it goes into admin-console / my-profile, since my UserConsoleRouting also has a redirect.
Here is 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 decisions seem to make a module for each component and import it anywhere .: P