Discussion on Egret - Angular 19+ Admin Dashboard Template

Discussion on Egret - Angular 19+ Admin Dashboard Template

By
Cart 2,755 sales
Well Documented

ui-lib supports this item

Supported

This author's response time can be up to 2 business days.

822 comments found.

npm install npm WARN deprecated core-js@2.4.1: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2. npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3 npm ERR! path git npm ERR! code ENOENT npm ERR! errno ENOENT npm ERR! syscall spawn git npm ERR! enoent Error while executing: npm ERR! enoent undefined ls-remote -h -t ssh://git@github.com/angular/web-animations-js.git npm ERR! enoent npm ERR! enoent npm ERR! enoent spawn git ENOENT npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Luis Fernando Rivera\AppData\Roaming\npm-cache\_logs\2019-09-19T15_30_11_773Z-debug.log

This is your system error. You may not have git installed. please check this issue https://stackoverflow.com/questions/56473680/npm-install-shows-error-with-git-not-found

npm install npm WARN deprecated core-js@2.4.1: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2. npm WARN deprecated json3@3.3.2: Please use the native JSON object instead of JSON 3 npm ERR! path git npm ERR! code ENOENT npm ERR! errno ENOENT npm ERR! syscall spawn git npm ERR! enoent Error while executing: npm ERR! enoent undefined ls-remote -h -t ssh://git@github.com/angular/web-animations-js.git npm ERR! enoent npm ERR! enoent npm ERR! enoent spawn git ENOENT npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Luis Fernando Rivera\AppData\Roaming\npm-cache\_logs\2019-09-19T15_30_11_773Z-debug.log

Hi can I get access GitHub username: axmad22. Also is there a way to suppress the warning messages for the CSS build:

WARNING: You probably don't mean to use the color value white in interpolation here. It may end up represented as white, which will likely produce invalid CSS. Always quote color names when using them as strings or map keys (for example, "white"). If you really want to use the color value here, use '"" + $colorName'.

Thank you

Invitation sent! Please check https://github.com/mh-rafi/egret-angular/invitations

Right now I couldn’t find any command for suppressing the warnings. I’m going to update the sass files to fix the warnings.

Thanks!

Hi,

First of all, thank you very much for the good and clean work you did in this template.

I started with the base version of the template “Egret-seed” so I implemented authentication code, and now I can authenticate successfully,

But when I am not authenticated I still can navigate to “others” root, what still needs to be done to prevent that?

I have modified nothing in the template app.routing.ts file.

Probably “canActivate” method of “AuthGuard” returning true, if user is not authenticated “canActivate” method should return false. Please check carefully your implementation.

Hi, i have a problem when i publish the angular project to my server with IIS the problem is that this route https://mysite.com/assets/i18n/en.json must be https://mysite.com/vikarawebapp/assets/i18n/en.json and the project always take the root. this problem only occurs with this asset, with the images there are no problems. Can you help me to set the correct route? this problems happen only when i publish

i already solve it i changed this line of code in app.moduel.ts // export function HttpLoaderFactory(httpClient: HttpClient) { // return new TranslateHttpLoader(httpClient); // }

for this

export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, ”./assets/i18n/”, ”.json”); }

Great :)

Hello,

I just finished installing the theme on a server with Linux Ubuntu 18.04. After building the project in folder Full I cannot get access to the ERP. These are the errors: 1. When trying to access the page: ” Cannot GET / ” 2. On compiling: error @extend .star.direction-rtl;...

Thanks in advance.

Kind regards, Wakeel

You can use this app to share screenshot https://prnt.sc/

Thanks for the reply, one file was corrupted. I downloaded the theme again. It is now working.

Kind regards, Wakeel

Great! :)

The theme is broken. When ever you update a variable which is shown in template, and this update happens in a subscription to an observable (API call response for example), the template won’t be updated. You have to trigger change detection to update it manually. You can easily recreate it. Create an observable in ngOnInit, add 2000ms delay to it and then subscribe to it. Inside the subscription callback, change some value of a variable that’s shown in a template.

Example: default-dashboard.component.ts ngOnInit() { const obs = of(123).pipe( delay(3000) ); obs.subscribe((res) => { this.projects[0].name = 'EDITED NAME FROM OBSERVABLE'; }); }

And then open the page and you will see the edited name won’t appear unless the user moves a mouse or unless change detection is triggered in the code.

EDIT: Found the solution in comment above:

“I just had to delete the line of “changeDetection: ChangeDetectionStrategy.OnPush” in the “admin-layout.component.ts”. “

Please make this an official solution in next release

Another bug is that when resizing the application, sidebar is gone (which is ok), but then when bringing the old size back, the sidebar won’t come back.

I’ve added this to my task list, I’m going to fix this in next update. Thanks for pointing out that issue.

Can I use this template with ionic

You need to build Ionic app in Ionic way. I’m not sure Egret is going to work with Ionic. But you can use cordova without Ionic.

When I run npm serve command it gives an error—> An unhandled exception occurred: Could not find module ”@angular-devkit/build-angular”.

After installing @angular-devkit/build-angular, it gives error to install typescript.

After installing typescript, it requires @angular/compiler-cli.

After installing @angular/compiler-cli, it requires @angular/compiler.

When install @angular/compiler and run npm serve, It gives—> You seem to not be depending on ”@angular/core” and/or “rxjs”. This is an error.

Kindly help me to solve my problem because I am unable to configure and run this template.

You need to run “npm install” to install dependencies before “ng serve”

I am following your document and starting with npm install -g @angular/cli and then after navigating to project directory, I run npm install. Then run ng serve. When fire ng serve command it gives error as explained earlier. I think dependency is not installing properly. Why ?

Can you delete node_modules folder & package-lock.json then run “npm install” ? also please update your node and npm.

Hi, I have a question about chat module: I open chat view and select any contact, then appeared messages in chat-content. I navigate any other route, then open chat view again. In chat content shows latest selected chat messages. How can I unselect latest chat while changing route or have you any solution?

Set “this.chatCollection = null” inside ngOnDestroy() of chat-contents.component.ts

I’m really struggling to install. Could I get some pointers?

At which point you are facing trouble? Have followed the documentation?

Doc http://demos.ui-lib.com/egret-doc/#getting-started

<pagination class=”pager” name=”test” (pageChanged)=”pageChanged($event)” previousText=”‹” nextText=”›” firstText=”«” lastText=”»” ></pagination> I used this ngx-bootstap/pagination but css show cannot adjust. Please help me forced css in here?

Hi, When I bind data in table, I don’t understand why items cannot show after loading in ngOnInit, but when I click more on this table, it start to appear items. Please let me know how to settle this problem?

Sorry, I found this answer

Great!

Is there a way to enable printing the whole site/app? If I chose to print the whole site, print preview comes up and nothing visible on it.

Right now I don’t have a printer. When I open the print window (CMD + p) I see multiple pages.

Can you try printing this page https://www.lipsum.com/ To make sure your system prints multiple pages.

If it’s a template issue, I assume perfectScrollbar is creating this issue, You can disable perfectScrollber,

open app/shared/services/layout.service.ts

set "perfectScrollbar": false inside setAppLayout() method.

Mate I found where the issue is. It is scss, I modified @media print query to following:

// Media print

@media print { }

.app-admin-wrap {
  height: auto;
  overflow: auto;
}
.app-admin-container {
  max-width: auto;
  height: auto;
}
.rightside-content-hold {
  padding: 0.333333rem;
  overflow-x: auto;
  position: auto;
  min-height: 450px;
}
.main-content-wrap {
  position: auto;
  float: right;
  height: auto;
}
&.ps>.ps__rail-y {
  z-index: 9999;
}
.print-area {
  visibility: visible;
  overflow: visible;
}
  • { visibility: visible; overflow: visible; }
.noprint {
  display: none;
}

Then add noprint class to sidebar and top bar(navbar?) and now I can print the whole (site/page)

Great! thanks for sharing!

a12ca7a4-5a4a-4c08-816d-3136b954ae17

Good Morning,

I am having a problem with the binding of data between the .TS and the .HTML. This is very slow.

The service returns the information to me in 0.2 seconds but it takes more than 5 seconds to appear in the HTML.

Thank you very much for the help,

I already found the solution.

I just had to delete the line of “changeDetection: ChangeDetectionStrategy.OnPush” in the “admin-layout.component.ts”.

Sorry and thank you,

Great!

Hi

I am having trouble with scrolling on the mobile devices. The scrolling is either laggy or does not respond to scroll gestures at all.

Is there something I am missing? I have added HammerJs and PerfectScrollbarModule in the App Module but is there something else I have to do to support this?

Thanks

perfectScrollbar sometimes gets laggy, You can disable perfectScrollbar at line 60 in “shared/services/layout.service.ts”

Hey man! Super happy with your stuff. I’ve purchased your landing page and now this admin dashboard.

Any tips to easily incorporate the two?

Replace Egret Admin’s home with Angular landing’s home folder inside app/views.

Uncomment @import “views/landing”; inside assets/styles/scss/_views.scss

That’s it

Thank you, sir!

I’m going to use ‘scrollStrategy’ property on openPopUp method in CrudNgxTableComponent to scroll the pop dialogue, when I added ’ scrollStrategy: this.overlay.scrollStrategies.noop(),’ configuration to dialogRef function it did not work, why? How to do this?

If you put your contents inside <mat-dialog-content></mat-dialog-content>, content will be scrollable.

And I haven’t used that “scrollStrategy” yet, not sure why are you facing this issue.

I’m going to use ‘scrollStrategy’ property on openPopUp method in CrudNgxTableComponent to scroll the pop dialogue, when I added ’ scrollStrategy: this.overlay.scrollStrategies.noop(),’ configuration to dialogRef function it did not work, why? How to do this?

I found some issues in this template. First one, when nested components are in mat sidenav, it does not render data correctly and sometimes, it need to pass mouse over to refresh data. Second one, it duplicate la request at server in nested components. Finally, in some components such us : mat nav list and mat expansion panel you must clicked twice for an action event. Please, try theses suggestion in your template and you will replicate these issues.

Actually that happens because you need to detect changes manually. You can disable manual change detection by removing line 19 from “shared/components/layouts/admin-layout/admin-layout.component.ts”

In line 19, there is this option: changeDetection: ChangeDetectionStrategy.OnPush. Oh, I didn’t know that this option unable automatic change detection. In anyway, I will remove this line and thank you so much for responding so quickly.

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve ThemeForest.

Sure, take me to the survey