Hi,
If you are upgrade the ABP version to v2.9.0, this problems will be resolved.
If you still want to use v2.6.2, update the package.json
as shown below:
"dependencies": {
"@volo/abp.ng.account": "~2.6.2",
"@volo/abp.ng.audit-logging": "~2.6.2",
"@volo/abp.ng.identity": "~2.6.2",
"@volo/abp.ng.identity-server": "~2.6.2",
"@volo/abp.ng.language-management": "~2.6.2",
"@volo/abp.ng.saas": "~2.6.2",
"@volo/abp.ng.theme.lepton": "~2.6.2",
},
"resolutions": {
"@volo/abp.commercial.ng.ui": "2.6.2",
"@volo/abp.ng.account.config": "2.6.2",
"@volo/abp.ng.audit-logging.config": "2.6.2",
"@volo/abp.ng.identity-server.config": "2.6.2",
"@volo/abp.ng.identity.config": "2.6.2",
"@volo/abp.ng.language-management.config": "2.6.2",
"@volo/abp.ng.saas.config": "2.6.2",
}
Then, run the yarn
command.
I reviewed your files. I think the ConfigState
is not available on the application initialization.
The forRoot
static method of CoreModule
must call from app.module.ts
(bootstrap module).
Please add the following code to app.module.ts
imports and try again:
CoreModule.forRoot({
environment,
}),
Hi @wazbek
Did you update the NuGet packages to v2.8.0?
Can you share the application-configuration
response and content of app.module.ts
file with us?
We can't reproduce the table columns problem. Can you describe the reproduce steps in detail?
Hi,
You can protect your home page with the AuthGuard
that redirects the users to the login page when the user is not authenticated. Replace the home page route in app-routing.module.ts
as shown below:
// AuthGuard can be imported from @abp/ng.core
{
path: '',
loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
canActivate: [AuthGuard], // added this line
data: {
routes: {
name: '::Menu:Home',
iconClass: 'fa fa-home',
} as ABP.Route,
},
}
I fixed this problem:
Cannot read property 'navitveElement' of undefined
Thanks for reporting. But we can't reproduce the table columns problem.
Can you explain the reproduce steps in detail and share the followings with us:
yarn list --pattern abp
commandHi @ThomasA
After v2.8 is released, you can update the app.component.ts
file to replace user nav element as shown below:
import {
ABP, // imported
ApplicationConfiguration, // imported
AuthService, // imported
ConfigState, // imported
LazyLoadService,
LOADING_STRATEGY,
SessionState, // imported
} from '@abp/ng.core';
import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core'; // imported TemplateRef and ViewChild
import { Router } from '@angular/router'; // added this line
import { Select, Store } from '@ngxs/store'; // added this line
import { forkJoin, Observable } from 'rxjs'; // imported Observable
import { AddNavigationElement, eNavigationElementNames } from '@volo/abp.ng.theme.lepton'; // added this line
@Component({
selector: 'app-root',
template: `
<abp-loader-bar></abp-loader-bar>
<router-outlet></router-outlet>
<!-- Added below template -->
<ng-template #currentUser>
<li class="nav-item" *ngIf="currentUser$ | async as user">
<ng-template #loginBtn>
<a role="button" routerLink="/account/login" class="btn ">{{
'AbpAccount::Login' | abpLocalization
}}</a>
</ng-template>
<div *ngIf="user.isAuthenticated; else loginBtn" class="dropdown btn-group" ngbDropdown>
<a ngbDropdownToggle class="btn pointer">
<abp-current-user-image
[currentUser]="user"
classes="user-avatar"
></abp-current-user-image>
<span class="d-lg-none ml-1">
<small *ngIf="(selectedTenant$ | async)?.name as tenantName"
><i>{{ tenantName }}</i></small
>
<span>{{ user.userName }}</span>
</span>
</a>
<div ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
<div class="p-2 row">
<div class="pr-0 col col-auto">
<abp-current-user-image
[currentUser]="user"
classes="user-avatar-big"
></abp-current-user-image>
</div>
<div class="pl-2 col">
<span>{{ 'AbpAccount::Welcome' | abpLocalization }}</span
><br />
<small *ngIf="(selectedTenant$ | async)?.name as tenantName"
><i>{{ tenantName }}</i></small
>
<strong>{{ user.userName }}</strong>
</div>
</div>
<div class="dropdown-divider"></div>
<a class="dropdown-item pointer" routerLink="/account/manage-profile">{{
'AbpAccount::ManageYourProfile' | abpLocalization
}}</a>
<a class="dropdown-item pointer"> New menu item</a>
<a class="dropdown-item pointer" id="logout" (click)="logout()">{{
'AbpUi::Logout' | abpLocalization
}}</a>
</div>
</div>
</li>
</ng-template>
`,
})
export class AppComponent implements OnInit {
// added
@Select(ConfigState.getOne('currentUser'))
currentUser$: Observable<ApplicationConfiguration.CurrentUser>;
// added
@Select(SessionState.getTenant)
selectedTenant$: Observable<ABP.BasicItem>;
// added
@ViewChild('currentUser', { static: false })
currentUserTemplate: TemplateRef<any>;
constructor(
private lazyLoadService: LazyLoadService,
private router: Router, // injected
private authService: AuthService, // injected
private store: Store, // injected
) {}
ngOnInit() {
forkJoin([
this.lazyLoadService.load(LOADING_STRATEGY.PrependAnonymousStyleToHead('flag-icon.min.css')),
this.lazyLoadService.load(
LOADING_STRATEGY.PrependAnonymousStyleToHead('fontawesome-v4-shims.min.css'),
),
this.lazyLoadService.load(
LOADING_STRATEGY.PrependAnonymousStyleToHead('fontawesome-all.min.css'),
),
]).subscribe();
}
// added
ngAfterViewInit() {
this.store.dispatch(
new AddNavigationElement({
element: this.currentUserTemplate,
name: eNavigationElementNames.User,
order: 5,
}),
);
}
// added
logout() {
this.authService.logout().subscribe(() => {
this.router.navigate(['/'], { state: { redirectUrl: this.router.url } });
});
}
}
We will work to replace the menu elements easily. Probably this document will be updated and covered the new way for replacement in v2.9.
Hi @ninomartini
The header's avatar in a previous version was a more generic user avatar. The current version has a different user avatar. Was this changed in the template or controlled by a setting? Can you point me to any addtional information? Thank you in advance.
We have created a component called CurrentUserImageComponent and made the component replaceable. You can replace this component with your own component in v2.8. I created a GitHub gist to explain how to replace the CurrentUserImageComponent. See https://gist.github.com/mehmet-erim/f83f1c0f9f95281a42b50d758eff33c8.
Account self registration not displaying correctly when switching tenants. When switching tenants, the login page does not show or hide the register link correctly unless the page is refreshed. Steps to reproduce:
- Tenant-A has sef-registraion enabled
- Tenant-B has self registration disabled
- When switching from Tenant-A to Tenant-B on login form--the register link is showing even though the Tenant has self registration disabled
- Refreshing the page (F5) will hide the register link
Thanks for reporting. We'll fix the problem.