Angular 4 Application I have created an application with Angular 4. I set up the Angular application with Angular CLI. Can anybody check this and suggest some improvements?

Following is the folder structure I used:



In AppModule I have the following code:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA, Injector, APP_INITIALIZER } from '@angular/core';
import { HttpModule } from '@angular/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { NgBootstrapFormValidationModule } from 'ng-bootstrap-form-validation';
import { AppRoutingModule } from './app.routing';
import { SharedModule } from './shared/shared.module';
import { AuthenticationService, DashboardService, NotificationService, AlertService, KnowledgeBaseService, AssetService } from './shared/services/index';
import { AuthGuard } from './shared/guards/auth.guard';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { MainComponent } from './main/main.component';

import { AppPreBootstrap } from '../AppPreBootstrap';

export function appInitializerFactory(injector: Injector) {
    return () =&gt; {
        return new Promise&lt;boolean&gt;((resolve, reject) =&gt; {
            resolve(AppPreBootstrap.getApplicationConfig());
        });
    }
}

@NgModule({
    declarations: [     
        AppComponent

    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        HttpModule,
        FormsModule,
        ReactiveFormsModule,
        NgBootstrapFormValidationModule.forRoot(), 
        SharedModule,      
        RouterModule,
        AppRoutingModule      
    ],
    providers: [
        AuthenticationService,
        DashboardService,
        NotificationService,
        AlertService,
        KnowledgeBaseService,
        AssetService,
        AuthGuard,
         {
            provide: APP_INITIALIZER,
            useFactory: appInitializerFactory,
            deps: [Injector],
            multi: true
        }
    ],
    bootstrap: [AppComponent],
    schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }
Only a couple of beautifying changes i would make. I hate giant app.modules so i like to reorginize all core imports into core.module and import that into app.module, like described here.

under "core feature module"

I do now know what the recent angular-cli generates but i like to think ahead about which modules what my application will include. If it will be many components and you can comfortably group some of them, think about creating more modules(lazy-loading)

Also, consider  where you will put all your constructs (datepicker, timepicker, alert) components and export them. Read more about the shared module on the link above, you have a good setup  for that already. BUT shared module should then not be included into the app.module, only in the functionality modules(if you decide to go that way)