Angular 2 Modules

www.briebug.com

CEO, BrieBug

Developer for 20 years

Focused on JavaScript based solutions

About Me

We will cover

• Fundamentals
• Pitfalls
• Best Practices

www.briebug.com

What is a module?

Introduced around RC 5

Every Angular 2 application has at least one

app.module.ts

www.briebug.com

www.briebug.com

import {NgModule}           from '@angular/core';
import {BrowserModule}      from '@angular/platform-browser';

/* App Root */
import{AppComponent}       from './app.component';

@NgModule({
    imports: [BrowserModule],
    declarations: [AppComponent],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

app.module.ts

@NgModule defines the metadata for the module

Why Modules?

Organize our application

Extend our applications with 3rd party libraries

Encapsulate dependencies

Simplifies our app starting with main.ts

www.briebug.com

What does it do?

Defines what belongs to me

Exposes public classes to other components

imports other modules

provides services

www.briebug.com

When should I create a module?

App module (required)

Feature Module (good idea)

Shared Component (good idea)

Component (maybe, as needed)

www.briebug.com

Module MetaData

imports

declarations

providers

exports

entryComponent

www.briebug.com

Declarations

Do declare:

• classes if they belong to this module

www.briebug.com

Don't declare:

• classes declared in another module
• arrays of directives, e.g. FORMS_DIRECTIVES
• module, service, or non-angular classes

Exports

Do export:

• declarable classes if you want other components in other modules to use them
• imported modules you want exposed

www.briebug.com

Don't export:

• private components, directives, pipes 
• services, functions, configurations, entity models
• pure service modules, e.g. HttpModule

Providers

Do provide:

• application wide services in the app.module
• services in the module they belong to

www.briebug.com

Don't provide:

• services in a component (without a good reason)
• services in shared module that is lazy loaded

Test module?

• Simplifies setting up tests
• import common modules
• declare common components
• provide mocks for services

www.briebug.com

www.briebug.com

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterTestingModule} from '@angular/router/testing';

import {TranslateModule, TranslateService} from 'ng2-translate/ng2-translate';
import {ToastModule, ToastsManager} from 'ng2-toastr/ng2-toastr';

import {PanelComponent} from '../app/components/panel/panel.component';
import {AuthService, RestService, SessionService} from '../app/services/index';

import {AuthServiceMock, RestServiceMock, SessionServiceMock} from './index';

@NgModule({
    imports: [CommonModule, ReactiveFormsModule, FormsModule, RouterTestingModule, 
                TranslateModule.forRoot(), ToastModule],
    declarations: [PanelComponent],
    providers: [
        TranslateService,
        {provide: AuthService, useClass: AuthServiceMock},
        {provide: RestService, useClass: RestServiceMock},
        {provide: SessionService, useClass: SessionServiceMock}
    ],
    exports: [CommonModule, ReactiveFormsModule, FormsModule, RouterTestingModule, 
            TranslateModule, ToastModule, PanelComponent]
})
export class TestModule {
}

test.module.ts

www.briebug.com

import {TestBed, ComponentFixture, async} from '@angular/core/testing';
import {TestModule} from '../test-helpers/index';
import {MyComponent} from './my.component';

describe('Component: My', () => {
    let fixture: ComponentFixture<MyComponent>,
        component: MyComponent;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [
                TestModule
            ],
            declarations: [
                MyComponent
            ]
        }).compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.debugElement.componentInstance;

        fixture.detectChanges();
    });

    it('should create the component', async(() => {
        expect(component).toBeTruthy();
    }));
});

my.component.spec.ts

Questions?

www.briebug.com