This DOES NOT fix the problem. You can verify for yourself if the problem is fixed by doing the following in the PhoneBookDemo app:
<div [ngClass]="helloFromAppComponent()"></div>
count = 1;
helloFromAppComponent() { this.count = this.count + 1; console.log('hello from AppComponent ' + this.count); }
Thank you for creating a Github issue and committing to resolving this problem.
Please be cognizant that while you are seeing only 2% to 3% CPU usage it is because ASP.NET Zero's Dashboard is displaying a single component/view, and not a hierarchy of views of dynamically loaded components. It is the presentation of dozens of views on the same SPA which is causing high CPU usage in the existing polled environment. A correctly created Angular app should use 0% CPU in its quiescent state.
@ismcagdas My SPA has 15 defined components, hierarchically rendered to 23 views, 3 levels deep. Add more levels for the PrimeNG components, and it could easily reach 5 or 6 levels deep. Below is a screenshot of a small section of my SPA. I have 14 of those colored blocks so far, each of which is a dynamically loaded component. The grid within each block is dynamically loaded. The buttons in the grids are dynamically loaded. The progress bar is dynamically loaded. I have more nested levels of dynamically loaded components planned to be implemented. !_(http://i64.tinypic.com/avlu7m.png) Here is a link on how dynamic components work in Angular: [https://angular.io/guide/dynamic-component-loader])
PrimeNG uses client side data
I modified PrimeNG 'tablefilterdemo' page using the same technique I described in my June 19 post. The console message appears 8 times per page refresh. If there is no user-initiated activity, there are no further console messages. Hence, 0% CPU reported by Task Manager.
we don't see this behaviour on our environments
our server's use most of the time less than %10 CPU
This is not surprising. Your Dashboard page is VERY SIMPLISTIC. It has no hierarchically arranged views. Read this: [https://angular.io/guide/architecture-components#templates-and-views]) to unlock the full power of Angular.
Had you created an SPA with multiple levels of multiple components you might come to the conclusion that your current implementation is problematic. Why would [i:2gnivnva]any_ CPU be consumed when there is no user-initiated processing and the cursor is not moving?
One of the great features of Angular is that it is asynchronous. Net Zero seems to have added a polling loop, which is killing performance for anything more sophisticated than the most simplistic SPA.
With Fiddler I monitored communication with the server. The only time communication occurs is during page load, to load a few images. Then nothing. My app has no timers. Even though the cursor is not moving, my implementation of hierarchically arranged views are (needlessly) updated dozens of times per second on your polling loop. My conclusion is that sluggish performance has nothing to do with server communication.
If you add the code to the NetZero app per my June 19 post to reproduce the log message, i.e.
helloFromAppComponent() { console.log('hello from AppComponent'); }
...you will observe that the log message is displayed at a high rate continuously. You can add a console.log message to any of your components and get similar results. I believe that it is this continuously running thread that is causing needless CPU consumption. Why is this thread being run continuously, and not just a few times when the page loads? What do I need to change to stop this thread from running continuously? I would like a definitive answer to these two questions, please. And when you reply, would you please confirm that you have observed the log message in your own testing? Thank you.
I use PrimeNG Table/filter extensively in my app. I downloaded the PrimeNG demo from GitHub and ran it on my system.
The resources in the image following are for PrimeNG Table Filter page (<a class="postlink" href="http://localhost:4211/#/table/filter">http://localhost:4211/#/table/filter</a>).
What is PrimeNG doing (or not doing) that their demo app uses 0% CPU and is highly responsive?
Below are resouces for ASP Net Zero's PhoneBookDemo, Dashboard page:
The Administration pages have an even higher CPU usage than the Dashboard page! How is this possible?
What is the ASP Net Zero framework doing that is causing high CPU usage?
I think it is incumbent upon the ASP Net Zero development team to explain why their system consumes so much CPU resource (more than "is related to Angular's change detection"), why PrimeNG consumes 0% CPU resources, and, if you cannot release a global fix, what users need to do to mitigate CPU resource consumption. Thank you.
Task Manager report with Swagger the only tab:
Swagger tab and my SPA (The Test Machine), no 'console.log()' messages, F12 console window open:
Swagger tab, my SPA (The Test Machine), no 'console.log()' message, No F12 debug window:
I've managed to reduce the load somewhat by reducing the number of parameters passed to functions, but this is still a heavy burden. Data table filters implemented per PrimeNG example code are noticeably sluggish - 0.5 second for dropdown to appear, 1+ seconds to display filtered results. The previously reported 21% is with console logging.
You can reproduce console logging to observe the problem as follows: Add 'helloFromAppComponent' code to app.component.html:
<div class="m-grid__item m-grid__item--fluid m-wrapper" [ngClass]="helloFromAppComponent()">
<router-outlet></router-outlet>
</div>
Add this function to app.component.ts:
helloFromAppComponent() { console.log('hello from AppComponent'); }
Open the browser debug window (F12). Observe 'hello from AppComponent' being logged at a high rate in the Console window. If there were a setting to slow the rate of update/refresh, and function invoke update on demand, that might resolve the issue. Thank you.
The only "App_Data" folder found in the solution was in \aspnet-core\src\ngTTM.Web.Host\bin\Debug\net461\App_Data. The folder is empty. BREAKING UPDATE! Discovered SQL Server was not running, even though Startup Type was set to Automatic. Started service. All is well. Rebooted to ensure SQL Server would start per Startup Type. Success. All is working as before the Windows update. (and the App_Data folder specified above now has a Logs folder containing a 'Logs.txt' file) This issue can be closed.
Yes, I have been able to solve the problem. Thanks for following up! :D
Your solution worked. Thank you!
main-routing.module.ts
... // (additional imports)
import { NgModule } from '@angular/core';
import { CollapseModule } from 'ngx-bootstrap';
@NgModule({
imports: [
CollapseModule.forRoot(),
...
dashboard.component.html
...
<button type="button" class="btn btn-primary"
(click)="collapse.show()">Show content
</button>
<button type="button" class="btn btn-primary"
(click)="collapse.hide()">Hide content
</button>
<hr>
<div #collapse="bs-collapse" [collapse]="isOpen"
class="card card-block card-header">
<div class="well well-lg">Some content</div>
</div>
...
dashboard.component.ts
import { Component, AfterViewInit, Injector, ViewEncapsulation, ElementRef, ViewChild } from '@angular/core';
import { CollapseModule } from 'ngx-bootstrap';
...
export class TtmDashboardComponent extends AppComponentBase implements AfterViewInit {
...
isOpen = false;
ASP.NET Zero version 5.3.0
Browser:
> console.log($().collapse);
function _jQueryInterface(config) {
return this.each(function () {
var $this = $$$1(this);
var data = $this.data(DATA_KEY);
var _config = _extends({}, Default, $this.data(), typeof config === 'object' && config);
if (!data && _config.toggle && /show|hide/.test(config)) {
_config.toggle = false;
}
if (!data) {
data = new Collapse(this, _config);
$this.data(DATA_KEY, data);
}
if (typeof config === 'string') {
if (typeof data[config] === 'undefined') {
throw new TypeError("No method named \"" + config + "\"");
}
data[config]();
}
});
}
eval code (33435) (1,1)
< undefined
>
... and following the eval code link:
Failed to open eval code (33435)