App

Used Libraries and Components

Except for angular's common and core libraries, the following are used in most pages:

Angular Bootstrap library @ng-bootstrap
Modal directive from @ngx-bootstrap libary
Ace's ng-ace-admin library which consists of some re-usable directives and services.
You can use it by imporing NgAceAdminModule from ng-ace-admin (or ng-ace-lib which is an alias)

In order to use ng-ace-admin in your app, you should set the correct paths in your tsconfig.json file using the paths option under compilerOptions.
You can set it to the "dist" library files or the source files.
You should also set the path for @ace/* which is located inside projects/ng-ace-lib/src/js.
It's a copy of Ace's JS files in HTML version. (no jQuery dependency)

Make sure you add is-document-loaded class to body element. Whether in your index.html or in ngOnInit or ngAfterViewInit of your AppComponent.

Loading Bar

The loading bar on top of app, is located inside app.component.html and is started/stopped inside app.component.ts when NavigationStart/End event happens.

If the routerLink is a submenu toggle link (which is deactivated using SubmenuDeactivate provider), a skipNavgation parameter helps us detect it and prevent it.

html

<a *ngIf="navItem.hasChildren" click)="toggleSubmenu(navItem, navItemSub)" [routerLink]="['/'+navItem.link]" 
    [state]="{skipNavigation: true}" ...>
    ...
</a>

See layouts/partials/sidebar/submenu.component.html for more info.

Routing

Routing is inside projects/ng-ace-demo/src/app/app-routing.module.ts.

It loads other modules such as elements.module that contain routing for its sub pages, such as /elements/tabs , /elements/modals, etc.

Navigating router links with children such as /elements, /forms and /more is deactivated using SubmenuDeactivate provider. These links should only toggle submenus.