We Keep Coding

Redirect to Angular internal route from external Application

I am building my authentication system as a different front end application than my dashboard application. The front end auth app is hosted in lets say http://auth.example.net and front end of dashboard app is hosted in http://dashboard.example.net.
Router structure of my dashboard :
{
path: "dashboard",
component: LandingPageComponent,
children: [
{
path: '',
pathMatch: 'full',
redirectTo: 'home'
},
{
path: "home",
component: HomeComponent,
canActivate: [RouteGuard],
data: {
externalUrl: authFrontEnd
}
},
{
path: 'Contact',
component: ContactComponent,
canActivate: [RouteGuard],
data: {
externalUrl: authFrontEnd
}
},
{
path: 'about',
component: AboutComponent,
canActivate: [RouteGuard],
data: {
externalUrl: authFrontEnd
}
}
],
},
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: ":user/:token", component: AuthenticationComponent },
In my auth application, When I am authenticated, I should be redirected to the Dashboard application's url with userId and token embedded in the url (I know its not a secure way to do):http://dashboard.example.net/user_2/token_ec23
In my Auth app:
loginAuthentication(user) {
const result = this.apiService.login(user);
result.subscribe(res=> {
if(res.status === 'success') {
window.location.href=`http://dashboard.example.net/${res.result.user_id}/${res.result.token}`
}
})
}
From what I understand is, this isn't working because the angular routes are only understood inside the angular application. Redirection to angular internal routes can't be happening from external source. How to achieve this thing ? The requirement for me is to pass the token and user Id from auth application to dashboard application and this is the only way I know for now.

Nexted optional route in angular 8

Is there any way to do the nexted optional routing in Angular 8.
{
path: 'mfa',//ConstantValues.route_list[0].route,
data: { 'navBar': false },
children: [
{ path: '', redirectTo: 'reset', pathMatch: 'full' },
{ path: 'mfa-code', component: MfaVerificationCodeComponent },
{ path: ':app', component: MfaMobileAppsComponent },
{ path: ':app/:provider', component: AppProviderComponent }
]
}
I am focusing in these two lines
{ path: ':app', component: MfaMobileAppsComponent },
{ path: ':app/:provider', component: AppProviderComponent }
URL I am trying to achieved
https://localhost:44307/mfa/google/apple --> google and apple is optional
https://localhost:44307/mfa/okta/google --> okta and google is optional
I don't want to use the query parameter because I have some other conditions. And how do I get the value of the url in TS file.

To navigate I need to use and this works
protected submit(model: MfaAppViewModel) {
this.router.navigate(['{providerName}'], { relativeTo: this.route });
}
Another Example
{path: 'studentList', component : StudentListComponent},
{path: 'studentDetails/:id/:name/:marks', component : StudentDetailsComponent}
<a routerLink="/studentDetails/{{stud.id}}/{{stud.name}}/{{stud.marks}}"> Id : {{stud.id}}, Name : {{stud.name}} </a>
To read the value in TS file
this.providerName = this.route.snapshot.params['provider'];

Angular lazy loading - don't see it is working

I defined a lazy loading module.
this is SettingsRoutingModule module-
const routes: Routes = [
{
path: '',
component: SettingsStandaloneComponent,
children: [
{
path: '',
redirectTo: 'profile',
pathMatch: 'full'
},
{
path: 'profile',
component: SettingsProfileComponent
},
{
path: 'about',
component: SettingsAboutComponent
},
{
path: 'affiliations',
component: SettingsAffiliationsComponent
},
{
path: 'communication',
component: SettingsCommunicationComponent
},
{
path: 'notifications',
component: SettingsNotificationsComponent
},
{
path: 'proxies',
component: SettingsProxiesComponent
},
{
path: '**',
redirectTo: 'profile',
pathMatch: 'full'
}
]
}
];
#NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class SettingsRoutingModule { }
in the AppRoutingModule module-
{ path: 'settings',
loadChildren: './settings/settings.module#SettingsModule',
canActivate: [AuthGuard],
},
in the prod production when a go to the network I don't see the "chunk.js" that everybody say that should appear". only two files that looks like- 0.34016a93d44e785b623a.js
In my localhost I see only "settings-settings-module.js"
Is it OK or does it mean that my module isn't lazy?

Because of this option "namedChunks": false in your angular.json, you won't see the named chunks anymore, instead it displays hashed-value as the file name. This is due to recent improvements(not sure from when) in angular/cli.

Yes it is OK, We do not see chunk.js anymore. A lazy loaded module appears with its name in network tab as mentioned by you and it appears only once for the first time. To see it again, clear everything out by clicking the circle with a line through it in the upper left of the Network Tab:

Make sure you're not filtering anything in Chrome Debugging tools in Network tab, it was driving me insane for a moment, I had everything set up perfectly.
Proof (I had 'fa' being filtered, that's why I couldn't see )
After

Angular : Lazy load multiple Modules with the same route

I have an app where i want to lazy load two modules in the same moment with the same route path.
My routing module would look like this :
{
path: 'mypath',
loadChildren: () => HomeModule,
canLoad: [HomeGuard]
},
{
path: 'mypath',
loadChildren: () => AdvisorModule,
canLoad: [AdvisorGuard]
},
but this lead to load only the first one
i cant' find anyway to do it like this for example :
{
path: 'mypath',
loadChildren: () => HomeModule, advisor module // ??
canLoad: [// ??]
},
I don't want also to import one of them in the other , as like this , only one module would be lazy loaded and the other automatically
How may it do it ??

You could rework things like this:
const routes: Routes = [
{
path: 'mypath/home',
loadChildren: () => HomeModule,
canLoad: [HomeGuard]
},
{
path: 'mypath/advisor',
loadChildren: () => AdvisorModule,
canLoad: [AdvisorGuard]
},
]
In other words move the route path to your module outside to the parent module, in this case I assume those are 'adviser' and 'home'
And then just start in the module routing with a redirect solution and/or a path like so:
Home module routing:
const routes: Routes = [
{
path: '', // <-- in your current solution probably 'home'
component: HomeParentComponent,
children: [
{ path: '', redirectTo: 'childOne', pathMatch: 'full' },
{ path: 'childOne', component: HomeChildComponentOne },
],
},
];
Advisor module routing:
const routes: Routes = [
{
path: '', // <-- in your current solution probably 'advisor'
component: AdvisorParentComponent,
children: [
{ path: '', redirectTo: 'childOne', pathMatch: 'full' },
{ path: 'childOne', component: AdvisorChildComponentOne },
],
},
];
This works nicely, you should be able to navigate to:
'/mypath/home' and end up inside your HomeParentComponent with router outlet of HomeChildComponent one.
'/mypath/advisor' and end up inside your AdvisorParentComponent with router outlet of AdvisorChildComponent one.
In case you don't want a child component inside your router outlet it is even simpler, you can just remove the child routes and redirect.
Note: If this solution doesn't resolve your issue, then please share more details on your module routing so I can get a better picture of your desired route configuration.

You need to re-arrange your routes by one level and you also need to add auxiliary routes for the extra components you want to load.
This works with Angular 9 (probably with 8 too)
{
path: 'home',
component: HostingComponentWithOutlets,
children: [
{
path: 'featureOne',
loadChildren: () => import('xxxxx').then(m => m.FeatureOneModule),
canLoad: [featureOneGuard]
},
{
path: 'featureTwo',
outlet: 'outletAux1',
loadChildren: () => import('yyyyy').then(m => m.FeatureTwoModule),
canLoad: [featureTwoGuard]
},
// you can even load more components to different outlets from the same module
// and update redirectTo and routerLink accordingly
//{
// path: 'featureThree',
// outlet: 'outletAux2',
// loadChildren: () => import('yyyyy').then(m => m.featureTwoModule),
// canLoad: [featureTwoGuard]
//},
{
path: '',
redirectTo:
'/absolute/path/to/home(featureOne/path-to-featureOne-component//outletAux1:featureTwo/path-to-featureTwo-component)',
pathMatch: 'full'
}
]
},
{ path: '', redirectTo: 'home', pathMatch: 'full' }
Hitting the 'home' route will lazy load all required modules.
In your HostingComponentWithOutlets html template where you need to link to 'featureOne':
<a [routerLink]="featureOne/path-to-featureOne-component"
and if you want to go straight to the full route with the auxiliary routes from a template:
<a [routerLink]="['.', { outlets: { 'primary': ['featureOne', 'path-to-featureOne-component'], 'outletAux1': ['featureTwo', 'path-to-featureTwo-component'] } }]"
FeatureOneModule should define 'path-to-featureOne-component' and FeatureTwoModule should define 'path-to-featureTwo-component' in their equivalent route definitions.

Angular auxiliary route with an empty path on child

I'm trying to use the auxiliary route on an empty path. For example:
{
path: 'users',
children: [
{
path: '',
component: UsersComponent,
},
{
path: 'user-details',
outlet: 'list',
component: UserDetailsComponent
},
]
},
And my UsersComponent template:
<router-outlet></router-outlet>
<router-outlet name="list"></router-outlet>
But when I'm trying to navigate to the following URLs:
1. http://localhost:4200/users(list:user-details)
2. http://localhost:4200/(users//list:user-details)
I'm getting this error:
Cannot match any routes. URL Segment: 'users'

You are getting that error because you have no component loading for 'users' which you set as your first route. the 'users' route should be defined in your main routing module like this
{ path: 'users', loadChildren: './users/user.module#UserModule' }
and your current code needs to look like this
const userRoutes: Routes = [
{
path: '', component: UsersComponent, children: [
{
path: 'user-details',
outlet: 'list',
component: UserDetailsComponent
}
]
}
and that will make the firs route 'users'