0
\$\begingroup\$

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:

enter image description here

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 () => {
        return new Promise<boolean>((resolve, reject) => {
            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 { }
\$\endgroup\$
  • 2
    \$\begingroup\$ There's pretty much no code to review. What you have in the AppModule is pretty standard as long as you don't have many (dozens) of components. If that was the case, you'd probably want to consider reorganizing on large module into several smaller ones. \$\endgroup\$ – Igor Soloydenko Sep 29 '17 at 21:24
4
\$\begingroup\$

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)

| improve this answer | |
\$\endgroup\$
1
\$\begingroup\$

As the comments suggested, with the provided examples there's not much to code review here. If you're looking for ways to improve future development try giving this a read Angular style Guide. The style guide has lots of Do's and Don'ts which read easily and help you along your way of better organizing your application.

Some interesting key points in the guide are

The Core Module and Shared Module is useful when you want to keep your app module as clean as possible I use this to load up any "global providers" (however with Angular 6/7 this is probably going to change because of the ProvidedIn option on Injectables.

The Feature Module is something that you'll only gain value as time goes on in the life of your project. As things begin to grow you'll notice you may need to cross share features/parts of your app. Breaking things out into their own module allows for a few things:

  • You can have routing for that module and it can take care of its relative routing.
  • It can be lazy loaded from the "parent" routing so only the code needed to boot up will be downloaded when your user hits the app.
  • It makes it easier to find code later once your app grows.

Finally I'll note that using the Angular CLI can help out with a lot of these tasks of creating feature modules and components inside of them. It does a lot of nice little things for you that help speed up development.

Hope that helps you get some core skills with angular and develop some good clean code habits.

| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.