0

I found a project ng2-admin from https://github.com/akveo/ng2-admin , and this is online demo http://akveo.com/ng2-admin/

I am confused about PagesModule bootstrap process. Default AppModule bootstrap, how did it contine show /#/pages/dashboard content?

In app.module.ts:

import { NgModule, ApplicationRef } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TranslateService } from '@ngx-translate/core';
/*
 * Platform and Environment providers/directives/pipes
 */
import { routing } from './app.routing';
// App is our top level component
import { App } from './app.component';
import { AppState, InternalStateType } from './app.service';
import { GlobalState } from './global.state';
import { NgaModule } from './theme/nga.module';
import { PagesModule } from './pages/pages.module';

// Application wide providers
const APP_PROVIDERS = [
  AppState,
  GlobalState
];
export type StoreType = {
  state: InternalStateType,
  restoreInputValues: () => void,
  disposeOldHosts: () => void
};
/**
 * `AppModule` is the main entry point into Angular2's bootstraping process
 */
@NgModule({
  bootstrap: [App],
  declarations: [
    App
  ],
  imports: [ // import Angular's modules
    BrowserModule,
    HttpModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule,
    NgaModule.forRoot(),
    NgbModule.forRoot(),
    PagesModule,
    routing
  ],
  providers: [ // expose our Services and Providers into Angular's dependency injection
    APP_PROVIDERS
  ]
})
export class AppModule {
  constructor(public appState: AppState) {
  }
}

I know this file is app entrance.

in app.routing.ts file:

import { Routes, RouterModule } from '@angular/router';
import { ModuleWithProviders } from '@angular/core';
export const routes: Routes = [
  { path: '', redirectTo: 'pages', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages/dashboard' }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });

It only tell browser redirec to "#pages/dashboard", but there is no related component here.

In app.component.ts, the template is:

template: `
    <main [class.menu-collapsed]="isMenuCollapsed" baThemeRun>
      <div class="additional-bg"></div>
      <router-outlet></router-outlet>
    </main>
  `

There is no other custom tags except router-outlet.

I am confused how to make main AppModule work with PagesModule in application.

Thanks very much.

qichunren
  • 4,405
  • 7
  • 37
  • 48
  • `AppModule` imports `PagesModule` that defines all routes https://github.com/akveo/ng2-admin/blob/master/src/app/pages/pages.routing.ts#L22 Read more here https://angular.io/docs/ts/latest/guide/router.html#!#adding-routing-module – yurzui Jun 06 '17 at 04:40
  • @yurzui You mean modules in 'imports' array in @ NgModule will auto initialize? – qichunren Jun 06 '17 at 05:23

0 Answers0