www.briebug.com
CEO, BrieBug
Developer for 20 years
Focused on JavaScript based solutions
About Me
www.briebug.com
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
Organize our application
Extend our applications with 3rd party libraries
Encapsulate dependencies
Simplifies our app starting with main.ts
www.briebug.com
Defines what belongs to me
Exposes public classes to other components
imports other modules
provides services
www.briebug.com
App module (required)
Feature Module (good idea)
Shared Component (good idea)
Component (maybe, as needed)
www.briebug.com
imports
declarations
providers
exports
entryComponent
www.briebug.com
Do declare:
www.briebug.com
Don't declare:
Do export:
www.briebug.com
Don't export:
Do provide:
www.briebug.com
Don't provide:
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
www.briebug.com