For some reason, these routes are only working if I manually refresh the page.
#Route only works when refreshing the page?
mighty badge
<router-outlet></router-outlet> is down below on line 313 so I'm pretty sure the routes should be working, no?
Clicking on PG&E Corp does rewrite the URL in the address bar, but doesn't "navigate" to the page
And manually refreshing the page once the URL has been rewritten in the address bar does show the correct results.
wide moth
How did you configure your routes? Where is your RouterModule.forRoot()? How many Routes arrays do you have?
mighty badge
Here's the relevant one
And up above it is this
I know it's a bit of a mess 😊
wide moth
g!badeyes @mighty badge I cannot copy and paste text from an image easily.
hushed frostBOT
@mighty badge Please do not post pictures of code (especially photos of a physical screen) as they are difficult to read and difficult to correct (as you cannot copy code from a screenshot to modify it).
wide moth
95% of the time { path: '' needs a pathMatch: 'full', IME
mighty badge
const routes: Routes = [
{ path: 'Research/:id', component: ResearchComponent },
{
path: '',
component: DashboardComponent
},
{ path: 'settings', component: SettingsComponent },
{
path: 'entity',
component: EntityComponent
},
{
path: 'search',
component: SearchComponent
},
{ path: 'search/?searchText', component: SearchComponent },
{ path: 'Research', component: ResearchComponent },
{
path: 'profile',
component: ProfileComponent,
canActivate: [MsalGuard]
},
{
path: 'commentary',
children: [
{
path: '',
component: CommentaryComponent
},
{
path: 'new',
component: NewCommentaryComponent
},
{
path: 'edit/:id',
component: EditCommentaryComponent
},
{
path: 'view/:id',
component: ViewCommentaryComponent
}
]
},
{
path: 'research-entity',
children: [
{
path: '',
component: ResearchEntityComponent
},
{
path: 'company',
children: [
{
path: 'new',
component: NewCompanyComponent
},
{
path: 'view',
component: ViewCompanyComponent
},
{
path: 'view/:id',
component: ViewCompanyComponent
}
]
},
{
path: 'country',
children: [
{
path: 'new',
component: NewCountryComponent
},
{
path: 'view',
component: ViewCountryComponent
},
{
path: 'view/:id',
redirectTo: 'view'
}
]
},
{
path: 'industry',
children: [
{
path: 'new',
component: NewIndustryComponent
},
{
path: 'view',
component: ViewIndustryComponent
},
{
path: 'view/:id',
redirectTo: 'view'
}
]
}
]
},
{
path: 'usersetting',
component: UsersettingComponent
},
{
path: '**',
redirectTo: ''
}
];
const isIframe = window !== window.parent && !window.opener;
@NgModule({
imports: [RouterModule.forRoot(routes, {
initialNavigation: !isIframe ? 'enabledBlocking' : 'disabled' // Don't perform initial navigation in iframes
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
Interesting. I'll give that a try 😛
wide moth
And this { path: '**', redirectTo: '' } can only cause problems
mighty badge
😮
wide moth
And these are lists. So the order matters. Putting { path: '' first is probably not where you should put it.
mighty badge
Ah, ok, I assume that should be at the bottom so it's the last to be evaluated
wide moth
{ path: 'view/:id', redirectTo: 'view' } is probably not what you want.
Which i think is probably the source of your original problem
mighty badge
I'll adjust 😛
For the child paths
Is the empty string path appropriate to place at the top or should that be moved to last?
{
path: 'research-entity',
children: [
{
path: '',
component: ResearchEntityComponent
},
{
path: 'company',
children: [
{
path: 'new',
component: NewCompanyComponent
},
{
path: 'view/:id',
component: ViewCompanyComponent
}
]
},
I would put path: '' last with pathMatch: 'full'
mighty badge
Excellent, thanks!
const routes: Routes = [
{ path: 'Research/:id', component: ResearchComponent },
{ path: 'settings', component: SettingsComponent },
{
path: 'entity',
component: EntityComponent
},
{
path: 'search',
component: SearchComponent
},
{ path: 'search/?searchText', component: SearchComponent },
{ path: 'Research', component: ResearchComponent },
{
path: 'profile',
component: ProfileComponent,
canActivate: [MsalGuard]
},
{
path: 'commentary',
children: [
{
path: 'new',
component: NewCommentaryComponent
},
{
path: 'edit/:id',
component: EditCommentaryComponent
},
{
path: 'view/:id',
component: ViewCommentaryComponent
},
{
path: '',
component: CommentaryComponent,
pathMatch: 'full'
}
]
},
{
path: 'research-entity',
children: [
{
path: 'company',
children: [
{
path: 'new',
component: NewCompanyComponent
},
{
path: 'view/:id',
component: ViewCompanyComponent
}
]
},
{
path: 'country',
children: [
{
path: 'new',
component: NewCountryComponent
},
{
path: 'view/:id',
component: ViewCountryComponent
}
]
},
{
path: 'industry',
children: [
{
path: 'new',
component: NewIndustryComponent
},
{
path: 'view/:id',
component: ViewIndustryComponent
}
]
},
{
path: '',
component: ResearchEntityComponent,
pathMatch: 'full'
}
]
},
{
path: 'usersetting',
component: UsersettingComponent
},
{
path: '',
component: DashboardComponent,
pathMatch: 'full'
}
];
const isIframe = window !== window.parent && !window.opener;
@NgModule({
imports: [RouterModule.forRoot(routes, {
initialNavigation: !isIframe ? 'enabledBlocking' : 'disabled' // Don't perform initial navigation in iframes
})],
exports: [RouterModule]
})
export class AppRoutingModule { }
No luck D:
wide moth
{ path: 'search/?searchText', component: SearchComponent }, isn't a valid Angular path config AFAIK
wide moth
why do you have a capital Research path? Why aren't they next to each other?. You probably should sort your paths alphabetically
mighty badge
This is a compilation from about a dozen different developers working on this so that's one of the results 😛
Trying to do some cleanup
wide moth
You don't have to define a special route for queryParams. All routes can have them
mighty badge
Oh interesting, I thought it was required 😛
So you can just consume query params directly in the view without new routes
That's really nice to know tysm
wide moth
you need a route, but yes any route can have fragments/hash and search/queryParams
Well what did you add right before it broke
mighty badge
This is new functionality so nothing 😛
or everything
depending on how you look at it haha
wide moth
How are you loading the data from 'view/:id'?
mighty badge
Let me check
constructor(private service: ViewCompanyService,
private route: ActivatedRoute,
private userprofileService: UserProfileService,
private notificationService: NotificationService,
private changeBehaviorService: ChangeBehaviorService, private dialogService: DialogService, applicationRef: ApplicationRef,
private commonService: CommonService) {
this.bodyRef = applicationRef.components && applicationRef.components[0];
this.companyResearchEntity = companyResearchEntities.find(m => m.id == this.route.snapshot.params?.['id'])!;
via the constructor with a filter against the snapshot params
wide moth
you should use the Observable
mighty badge
Hmm.. I'll have to look up how that would apply here 😛
wide moth
interface ViewModel {
data: string;
forYour: boolean;
view: number;
}
@Component({
template: `
<pre *ngIf="vm$ | async as vm; else loading">For Debugging: {{ vm | json }}</pre>
</ng-template #loading>Loading...</ng-template>
`,
})
export class TheComponent {
public readonly vm$: Observable<ViewModel>;
constructor(
private readonly service: ViewCompanyService,
private readonly route: ActivatedRoute,
) {
this.vm$ = this.route.paramMap.pipe(
map((params: ParamMap): string => {
const maybeId: string | null = params.get('id');
if (!maybeId) {
throw new Error('Invalid Id Parameter');
}
return maybeId;
}),
switchMap((companyId: string): Observable<Company> => this.service.getCompanyById(companyId)),
map((company: Company): ViewModel => {
// Prepare your data for the view by assembling a Model.
return {
data: 'Whatever',
forYour: false,
view: 1234,
}
}),
);
}
}
If you use ActiavateRouteSnapshot then it cannot observe on the changes to the params in the URL.