difference between app.module.shared.ts and app.shared.module.ts

Question

I am working on an Angular App (version 4.2.5), and the App.Module files are split into 3 files: App.Browser.Module.ts, App.Server.Module.ts and App.Shared.Module.ts. This differs from the last Angular App I created (Angular version 4.1.2). It also had 3 app.module files. But those were differently named and the behavior seems a little bit different. Files were called: app.module.client.ts, app.module.server.ts and app.module.shared.ts. The nice thing about that Angular App (4.1.2). I put in As much into app.module.shared.ts (also bootstrap component for example), like this: bootstrap: [AppComponent] And then that piece is called in App.module.client.ts and also app.module.server.ts like this:

bootstrap: [sharedConfig.bootstrap]

In the older version I see NgModule is being exported as a constant (that's why it's working I think):

export const sharedConfig: NgModule = {

declarations: [
    AppComponent,
    HomeComponent,
    HeaderComponent,
    ProductionfileComponent,
    ProductionFileSummary,
    ProductionFileDetailComponent,
    LoginComponent
],
imports: [
    RouterModule.forRoot([
        { path: '', redirectTo: 'login', pathMatch: 'full' },
        { path: 'login', component: LoginComponent },
        { path: 'productionFiles', component: ProductionfileComponent, canActivate: [ AuthGuard ] },
        { path: 'productionfiledetail/:prodHeaderOrdNr', component: ProductionFileDetailComponent, canActivate:  [ AuthGuard ] },
        { path: '**', redirectTo: 'login' }
    ]),
    BrowserModule,
    FormsModule
],
providers: [AuthGuard],
bootstrap: [AppComponent]

};

In the new app.module files (angular version 4.2.5) this doesn't work. Why is this changed? Can someone please explain. I understand I can change the code in App.Shared.Module.ts same as in app.module.server.ts, but I don't understand why the template is changed. So again can someone please explain...

thatcoder thatcoder · Accepted Answer · 2018-03-31T06:38:49

app.module.server.ts: Is used for SSR ( Server side rendering) of application - angular universal (rendering your application in a nodejs universal server)

app.module.client.ts - is for prerendering, ie, it is same as app.module.browser.ts ( rendering your application in browser level )

Read this doc which will give you a clear idea in this. https://universal.angular.io/overview/

difference between app.module.shared.ts and app.shared.module.ts

1 Answers