I building an app that has same header/ menu for all pages, but they just appear when user is logged-in. Because of that i’m using a Template component, to don’t show they in Login page.
I have Home page that just have an title and others pages has PowerBi graphics.
My graphics pages aren’t filling full of size and i don’t know why.
app-routing.module.ts:
const routes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{
path: 'sign-in',
canActivate: [NoAuthGuard],
canActivateChild: [NoAuthGuard],
loadChildren: () => import('./pages/auth/sign-in/sign-in.module').then(m => m.SignInPageModule),
resolve: { tenant: TenantResolver }
},
{
path: '',
canActivate: [AuthGuard],
canActivateChild: [AuthGuard],
component: TemplateComponent,
children: [
{ path: 'home', loadChildren: () => import('./pages/home/home.module').then(m => m.HomePageModule) },
{ path: 'powerbi/:id', loadChildren: () => import('./pages/report/power-bi/power-bi.module').then(m => m.PowerBiModule) },
],
resolve: { tenant: TenantResolver }
}
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
app.component.html:
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>
home.page.html:
<ion-content>
<ion-text class="page-title">
<h2>Home</h2>
</ion-text>
<ng-container *ngIf="!hasPowerBiAccessInCurrentEnvironment">
<ion-text color="warning">
<ion-icon name="warning"></ion-icon>
<span>Sem acesso ao sistema de PowerBi no ambiente selecionado.</span>
</ion-text>
</ng-container>
</ion-content>
power-bi.page.html:
<ion-content>
<div *ngIf="isLoaded">
<powerbi-report *ngIf="componentType === componentTypeEnum.report" [cssClassName]="'reportClass'" [embedConfig]="reportEmbedConfig"></powerbi-report>
<powerbi-dashboard *ngIf="componentType === componentTypeEnum.dashboard" [cssClassName]="'reportClass'" [embedConfig]="dashboardEmbedConfig"></powerbi-dashboard>
</div>
</ion-content>
How is it getting:
How it was supposed to stay:
