I'm making a website with two main sections, public section and the control panel
so I'm trying to make something like this (from angular.io):
here's my code: (it's working)
app/main.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
import { AppModule } from './app.module'
platformBrowserDynamic().bootstrapModule(AppModule)
app/app.module.ts: (I'm declaring all components of all sections here's..)
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AppComponent } from './app.component'
import { routing,appRoutingProviders } from './app.routing'
// Primary Imports
import { PrimaryComponent } from './primary/components/primary.component'
import { HomeComponent } from './primary/components/home.component'
import { LessonsComponent } from './primary/components/lessons.component'
.
.
.
// Administration Imports
import { AdministrationComponent } from './administration/components/administration.component'
import { DashboardComponent } from './administration/components/dashboard.component'
import { LessonsControlComponent } from './administration/components/lessons-control.component'
.
.
.
import { HttpModule } from '@angular/http'
@NgModule({
imports: [
BrowserModule,
FormsModule,
routing,
HttpModule
],
declarations: [
AppComponent,
// Primary
PrimaryComponent,
HomeComponent,
LessonsComponent,
.
.
.
// Administration
AdministrationComponent,
DashboardComponent,
LessonsControlComponent,
.
.
.
],
providers: [
appRoutingProviders
],
bootstrap: [ AppComponent ]
})
export class AppModule {}
app/app.routing.ts:
import { Routes, RouterModule } from '@angular/router'
import { PrimaryRoutes } from './primary/components/primary.routes'
import { AdministrationRoutes } from './administration/components/administration.routes'
const appRoutes: Routes = [
{ path: '', redirectTo: '/primary', pathMatch: 'full'},
...PrimaryRoutes,
...AdministrationRoutes
]
export const appRoutingProviders: any[] = []
export const routing = RouterModule.forRoot(appRoutes)
app/primary/components/primary.routes.ts: (same thing for administration.routes.ts)
import { provideRouter, RouterConfig } from '@angular/router'
import { PrimaryComponent } from './primary.component'
import { LessonsComponent } from './lessons.component'
export const PrimaryRoutes: RouterConfig = [
{
path: 'primary',
component: PrimaryComponent,
children: [
{ path: '', component: HomeComponent},
{ path: 'home', component: HomeComponent},
{ path: 'lessons', component: LessonsComponent },
]
}
]
(I apologize for boring you with all this code)
then I have three router-outlet
in:
Now this actually works fine, but I think it loads all the website at once this way, so I guess the way I'm implementing it is wrong or missing something
I think i need to have a primary.module.ts and administration.module.ts and declare each section's component's in its module, instead of declaring the universe in app.module.ts, am I right? or maybe two other main.ts files for each section, but I couldn't figure out how to do any of that
also the docs in angular.io are helpful but couldn't find something related to this
I hope someone can tell me for sure if I'm doing it wrong, and give me any resources for the right way. thank you.
I think you are looking at async routing
{
path: 'admin',
loadChildren: 'app/admin/admin.module#AdminModule',
}