I'm creating a new webapp dashboard that, until a few hours ago, used to render correctly. The dashboard page is the Angular default route.
const routes: Routes = [
{
path: '',
redirectTo: 'dashboard',
pathMatch: 'full',
},
{
path: 'dashboard',
loadChildren: () => import('./dashboard/dashboard.module').then( m => m.DashboardPageModule),
canActivate: RouteGuardService
},
Then I needed to add a new component (soon followed by a module) inside that dashboard, namely ng generate component dashboard/settings-ataglance. I've never understood the logic of imports, exports and declarations behind @NgModule, so I always try to mimic something that happens to work from a previous project and hope for the best...
Long story short, after a bit of trials end errors around what to import where, what to export from where and what to declare why, I got a compilable source tree, but it fails to render the dashboard (empty page, light or dark based on the <meta name="color-scheme" content="..." /> tag).
The address bar shows a correct redirect to the /dashboard URL, but the code execution path never hits a breakpoint in the constructor, nor on the first line of ngOnInit() of dashboard.page.ts.
I'm not sure my trials end errors actually have anything to do with the problem, because even if I remove them, the problem remains. However it started after those trials and errors. And, because I don't really understand what I did, I don't even know if I left something behind that could cause such behavior.
I can add that the browser console does not show any errors upon reload of the page, except one (Keycloak related inside zone.js) that I'm sure is not harmful, because it happens even in the webapp I forked from, and it was happening even before my trials and errors.
The dashboard template file (dashboard.page.html) contains texts and buttons inside a <ion-content [fullscreen]="true"> element. I even tried commenting out everything and adding only a "Hello world", but it does not render anyway.
On the other hand, the webapp correctly renders any HTML content I put in index.html and/or in app.component.html, but it seems that everything after that sinks in a black hole.
I don't know what other piece of code might be useful here, if any: please ask and I'll edit this question.
In the end a git diff came to my rescue: I had accidentally removed this line from my src/app/dashboard/dashboard.module.ts file:
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
DashboardPageRoutingModule // <-- this one
],
declarations: [DashboardPage]
})
and that obviously (now) kept Angular from following the route and loading the dashboard contents.