What is the right way to define child routes in Spartacus? - angular-routing

I am working in a B2B Spartacus project and we are currently implementing the MyCompany User/Unit management. The Spartacus implementation is a little to complex for our use-case so we are developing a custom solution based on it.
The original implementation features a CMS-Page for users (e.g.: https://spartacus-demo.eastus.cloudapp.azure.com:444/powertools-spa/en/USD/organization/users) and then Angular child routes for the user details (e.g.: /organization/users/7a95e933-364c-4c8d-81cd-4f290df0faf1)
I tried to replicate the child route implementation following the Spartacus documentation.
I created a parent (RightsManagementUser) and child (RightsManagementUserDetails) component.
<p>rights-management-user works!</p>
<a
class="btn btn-primary"
[routerLink]="{
cxRoute: 'orgUserDetails',
params: { customerId: '9e26d9fb-14eb-4ec6-9697-3fa53302245c' }
} | cxUrl"
>Go to User Details</a
>
<router-outlet></router-outlet>
Following the Spartacus Documentation, I provided a Spartacus and an Angular routing config
export const userRoutingConfig: RoutingConfig = {
routing: {
routes: {
orgUser: {
paths: ['organization/users'],
},
orgUserDetails: {
paths: ['organization/users/:userCode'],
paramsMapping: {
userCode: 'customerId',
},
},
},
},
};
RouterModule.forChild([
{
path: null,
component: PageLayoutComponent,
canActivate: [CmsPageGuard],
data: { cxRoute: 'orgUser' },
children: [
{
path: null,
component: RightsManagementUserDetailsComponent,
data: { cxRoute: 'orgUserDetails' }
},
],
},
]),
I also tried following the documentation for Adding Angular Child Routes for a Content Page
and added the child route to the cms config.
RightsManagementUserComponent: {
component: RightsManagementUserComponent,
childRoutes: [
{
path: ':userCode',
component: RightsManagementUserDetailsComponent,
},
],
},
This all wasn't enough, when clicking the button, the CMSPageGuard tries to load the CMS page for /organization/users/7a95e933-364c-4c8d-81cd-4f290df0faf1 instead of activating the child route.
I then tried to go the Angular way and defined the child route without using cxRoute:
children: [
{
path: ':userCode',
component: PflRightsManagementUserDetailsComponent,
},
],
At first I was happy, since the child route actually activated:
But then I realized that when I do a browser refresh Spartacus again tries to access the CMS-Page instead of activating the route.
Can someone please help me out and point me to the right way to use child routes in Spartacus?

If you would like to use split view, you can define your route in this way #customizing-routes, then clone whole cms configuration for organization feature and personalize childs #customizing-cms-components.
It could looks like:
const yourConfig = { ...userCmsConfig.cmsComponents.ManageUsersListComponent };
(yourConfig.childRoutes as CmsComponentChildRoutesConfig).children[1].component = RightsManagementUserDetailsComponent;
and include in your module
imports: [
// ...
B2bStorefrontModule.withConfig({
// ...
cmsComponents: {
ManageUsersListComponent: yourConfig,
},
},
// ...

Related

How to load default Component in default App and next to do redirect to another sub app?

I Have 3 apps : root-config (single-spa), navbar-app ( port 4201 angular 12 ) angular-app (port 4202 angular 12 )
My root-config app (localhost:9000) has root-config.ts
registerApplication({
name: "#org1/myNavbarApp",
app: () => System.import("#org1/myNavbarApp"),
activeWhen: ["/"],
});
registerApplication({
name: "#org1/myAngularApp",
app: () => System.import("#org1/myAngularApp"),
activeWhen: ['/angular']
});
my myNavbarApp has app-routing.module.ts
const routes: Routes = [
{
path: 'login', component: LoginComponent,
}, {
path: 'menu',
component: MenuComponent,
},
{path: '**', component: EmptyRouteComponent}, // <-- will display angular app but will not
leave <mat-toolbar> in view from myNavBarApp ( only if i stay in localhost:4200/menu
and do refresh -> angular app default view displays under <mat-toolbar> of
myNavBarApp ( as expected behavior )
// {path: '**', redirectTo: 'login'}, // <-- renders default "login.component" on first load
of localhost:9000 (exactly what i need) but will cause next issue:
after navigateToUrl('angular') is done - ```login.component``` angular app content
are visible in the same page - ( not expected behavior )
];
const config: ExtraOptions = {
useHash: false,
enableTracing: false,
relativeLinkResolution: 'legacy',
};
#NgModule({
imports: [RouterModule.forRoot(routes, config)],
exports: [RouterModule],
providers: [{provide: APP_BASE_HREF, useValue: '/'}]
})
export class AppRoutingModule {
}
NavBarApp has menu.component.html includes next:
<mat-toolbar color="warn" class="toolbar">
<mat-button-toggle-group class="menu">
<mat-button-toggle (click)="singleSpaNavigateUrl('angular')" value="angular">Angular App</mat-button-toggle>
</mat-button-toggle-group>
</mat-toolbar>
and menu.component.ts includes next :
import {getAppNames, navigateToUrl, getMountedApps} from "single-spa";
public singleSpaNavigateUrl(url: string) {
console.log('appNames', getAppNames()); <-- IS ALWAYS EMPTY ARRAY , Why ?
console.log('mountedAppNames', getMountedApps()); <-- IS ALWAYS EMPTY ARRAY , Why ?
navigateToUrl('/'+ url); // <-- navigates to /angular
}
How to achieve myNavBarApp menu.component will stay visible in all child apps after login / or when is needed ?
How to achieve login.component as default , when myNavBarApp is loaded from root-config app in browser ( without entering "/login" manually after that)
Single spa documentation says: single-spa Layout Engine is optional at this time but is recommended if you foresee utilizing server side rendering .. So i do not have server rendering ...thats why i do not implement layouts , and want to know how it possible to do without it ?
Why getAppNames() and getMountedApps() returns always empty array ?

Troubleshooting ionic 4 angular router navigation

so we're attempting to move our project from Ionic 3 to Ionic 4. To begin we started a basic tabs app: ionic start myApp tabs
I made two pages:
ionic generate page userList
ionic generate page userDetailed
I want two different tabs to have the ability to navigate to "UserListPage".
So I added it to the "tab1" & "tab2" router children:
tabs.router.module.ts
{
path: 'tab1',
children: [
{
path: '',
loadChildren: '../tab1/tab1.module#Tab1PageModule'
},
{
path: 'user-list',
loadChildren: './user-list/user-list.module#UserListPageModule'
}
]
}
Now I want the UserListPage to be able to navigate to the "UserDetailedPage".
I tried adding user-detailed as a path onto the UserListPageModule like so:
user-list.module.ts
const routes: Routes = [
{
path: '',
component: UserListPage,
children: [
{
path: 'user-detailed',
loadChildren: '../user-detailed/user-detailed.module#UserDetailedPageModule'
}
]
}
];
Now when I'm on tab1 & click a button to go to the list page, it works.
However when I click a button to go from list page to the detailed page, it changes the URL but does not display the page.
Any ideas what I'm doing wrong?
Your detailed page will be "user-list/user-detailed", your subroutes like user-detailed will be appended to the current route of user-list.

Vue: redirect to straight to child, while parent has a param

I'm learning Vue (on TS) and it seems awesome till this point. At the moment I learn about Vue routing, and have a question which I struggle to find a beautiful answer to.
Let's say, I have a parent route, named User, which gets userId as a param. I also have subpages for this route, which are called Profile and Settings respectively, and are being set in the User's children array:
routes: [
{
component: User,
name: 'User'
path: '/user/:userId',
children: [
{
component: Profile,
name: 'Profile',
path: 'profile',
},
{
component: Settings,
path: 'settings',
name: 'Settings'
},
],
}
]
It's pretty cool that I can redirect from User component to Profile or Settings as simple as
public redirectToProfile() {
this.$router.push({ name: 'Profile'});
}
But my question is - may I redirect to user's profile from outside of the User component the same way, without concatenating the path string like
public redirectToProfile() {
this.$router.push({ path: 'user/' + userId + '/profile'});
}
?
I think you can simply do it by passing params as well:
public redirectToProfile(id: string) {
this.$router.push({ name: 'Profile', params: {userId:id}});
}

ionic nav push params not shown in url

app.module.ts:
imports: [
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: CategoryPage, name: 'Category', segment: 'category:id'}
]
}
],
providers: [
{
provide: LocationStrategy,
useClass: PathLocationStrategy
}
]
Configuration of the page I am navigating too
#IonicPage({
name: 'Category',
segment: 'category/:id'
})
Code which triggers navigation:
this.nav.push(CategoryPage, {id: 3});
The component does load as expected and I can call this.navParams.get('id') which yields 3 from within the components class.
Expected result: The url changes to /category:3
Observed result: The url changes to /category:id
so if you are trying to implement deep links for Ionic 3 (since Ionic 4 is using Angular's router by default now) you need to ensure you also configure each page accordingly.
The page you are navigating to needs to have configs added via #IonicPage:
#IonicPage({
segment: 'second/:id'
})
See more in ionic docs or this guide

Angular 2 authentication with web api for SPA

What are the best practices of creating an authentication system for angular 2 SPA. Is there any built-in Angular2 modules to handle this?
The core thing you need is a guard to prevent routing to pages that require authentication. Thoughtram has a great article on guards and Jason Watmore has a brilliant post showing a full authentication mechanism using a guard and JSON Web Tokens.
Whether you use JWT (and there are reasons not to) or sessions (and there are reasons not to), it all comes down to the guard.
You write a guard like this:
#Injectable()
export class AuthGuard implements CanActivate {
constructor (private router: Router) { }
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (isTheUserSignedIn()) {
return true;
}
// If not signed in, navigate to the login page and store the return URL
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
return false;
}
}
And then, wherever you configure the routes for your app module, you need to tell the route to use your guard:
const appRoutes: Routes = [
// Protect the Home route using the guard
{ path: '', component: HomeComponent, canActivate: [AuthGuard] },
// Don't protect the login and register pages
{ path: 'login', component: LoginComponent },
{ path: 'register', component: RegisterComponent },
// Don't protect pages that don't need protecting
{ path: 'some-unprotected-page', component: UnprotectedPageComponent },
// Default redirect
{ path: '**', redirectTo: '' }
];