The fix has been merged into the framework. You can apply the same fix temporarily in your project.
https://github.com/abpframework/abp/pull/9666/files
Add the following CSS to styles.scss
ngb-typeahead-window.dropdown-menu {
z-index: 1050;
}
Hello,
This is a bug related to the CSS loading order. We will fix it in version 4.4.0 final. The question is refunded. Thanks for reporting.
I understand your need. Did you follow the instructions given in the answer?
What you need to do is to create a AuthWrapperComponent with template <router-outlet></router-outlet> only. Then your LoginComponent which contains everything will be placed into the router-outlet.
Hello,
We've discussed your code within our team and it seems that your code needs a little bit of refactoring.
Our account module has the following structure.
On the other hand, your login component contains everything above which forces you to duplicate Logo, Language Selection, Tenant Box throughout every account component (Login, Forgot-Password, Reset-Password etc.) I suggest you should revisit your design and remove duplications.
When migrating to v4.x, we've removed the account module from angular packages however we brought it back in v4.3. It seems that our login component interferes with yours at the URL /account/login and the login page shown in the second picture is the one from @volo/abp.ng.account/public. It looks like your component but there are subtle differences. You can tell by looking at the language selection. In your component, it is displayed at the top-right corner of the screen. In our component, it is displayed within the card. That's why whatever you do in your own component is not being displayed on the page.
You could follow the instructions in the following answer which had a similar problem like yours.
Let me know if this works for you.
Hello,
generate-proxy command generates code from a running backend which makes it more reliable. suite, on the other hand, does its best to simulate a running backend, so there are some differences between them. We'll check it out and try to minimize the diff. As to answer your question, generate-proxy is better choice for proxy generation. Let's say you've created bunch of entities with suite which generates components as well as services, and then you run abp generate-proxy which may change some of the files generated by suite. If it doesn't break your code, use the code generated by generate-proxy.
If you could share your entity.json, I'd try to find out why there is a diff.
Hello,
It seems that you have a single login page which contains everything, layout, language selection etc. Did you replace AuthWrapperComponent with your LoginComponent?
Hello,
Could you share the template of your login component to see which style class could have been affected?
Hello,
Here is where those attributes are set: https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/services/list.service.ts#L134
private next() {
this._query$.next(({
filter: this._filter || undefined,
maxResultCount: this._maxResultCount,
skipCount: this._page * this._maxResultCount,
sorting: this._sortOrder ? `${this._sortKey} ${this._sortOrder}` : undefined,
} as any) as QueryParamsType);
}
Hello,
Let's say your maxResultCount is 2, and you click on page number 3.
DirectoryDescriptorService::getContent method will get called with the following param:
{
maxResultCount: 2,
skipCount: 4
}
You can find page number with this formula => skipCount / maxResultCount + 1
Hello again,
Let's create our own AuthModule and AuthComponent.
@Component({
selector: 'app-auth',
template: '<p>auth works!</p>'
})
export class AuthComponent {}
@NgModule({
declarations: [AuthComponent],
imports: [CommonModule],
})
export class AuthModule {}
Since we will be replacing many components within our custom AuthModule, let's do it at module initialization.
Simply add a static forRoot method to AuthModule which will replace account components.
import { NgModule, ModuleWithProviders, APP_INITIALIZER } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { ReplaceableComponentsService } from '@abp/ng.core';
import { eAccountComponents } from '@volo/abp.ng.account/public';
import { AuthComponent } from './auth.component';
/**
* Here I've written a factory function which will replace the components from AccountModule
*/
function componentReplacer(replaceableComponents: ReplaceableComponentsService) {
return () => {
replaceableComponents.add({
key: eAccountComponents.AuthWrapper,
component: AuthComponent,
});
};
}
@NgModule({
declarations: [AuthComponent],
imports: [CommonModule, RouterModule],
})
export class AuthModule {
static forRoot(): ModuleWithProviders<AuthModule> {
return {
ngModule: AuthModule,
providers: [
{
provide: APP_INITIALIZER,
useFactory: componentReplacer,
multi: true,
deps: [ReplaceableComponentsService],
},
],
};
}
}
And change the HTML of AuthComponent to the following:
<router-outlet></router-outlet>
Import AuthModule.forRoot in AppModule
Then you'll get the following page when you navigate to /account/login
Let's replace LoginComponent as well
First, create a component within AuthModule and call it whatever you'd like it to be, and then replace eAccountComponents.Login within the factory we've just written as follows:
function componentReplacer(replaceableComponents: ReplaceableComponentsService) {
return () => {
replaceableComponents.add({
key: eAccountComponents.AuthWrapper,
component: AuthComponent,
});
replaceableComponents.add({
key: eAccountComponents.Login,
component: LoginComponent,
});
};
}
And then you'll get the following page
Here is the project structure,
You can keep replacing every single one of the components available.