NG2.0 - TS2.0
// lib imports
import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
// external imports
import {WuTopCitiesModule} from 'shared/wu-top-cities';
import {WuDisplayUnitModule} from 'shared/wu-display-unit';
import {LazyLoadComponent} from 'helpers/lazy-load-component';
// internal imports
import {WuFavorites} from './wu-favorites';
import {WuFavoritesBar} from './wu-favorites-bar';
import {WuFavoritesMore} from './wu-favorites-more';
import {WuFavoritesShowMore} from './wu-favorites-show-more';
// exports
export * from './globals';
@NgModule({
imports: [
CommonModule,
WuTopCitiesModule,
WuDisplayUnitModule
],
providers: [
{provide: LazyLoadComponent, useValue: WuFavorites}
],
declarations: [
WuFavorites,
WuFavoritesBar,
WuFavoritesMore,
WuFavoritesShowMore
],
entryComponents: [
WuFavorites
]
})
export class WuFavoritesModule {}
header comment
lib imports
external imports
internal imports
exports & re-exports
ngModule
/**
* @module WuFavorites
* @preferred
* @author Diego Barahona
* @since 4/12/16
*/ /** */
// lib imports
import {NgModule} from '@angular/core';
// external imports
import {..} from '...';
// internal imports
import {...} from './...';
// exports
export * from './globals';
@NgModule({...})
export class WuFavoritesModule {}
We have to use a custom setup for lazy load components into the page. This is why we don't use bootstrap.
import {LazyLoadComponent} from 'helpers/lazy-load-component';
...
@NgModule({
...
providers: [
{provide: LazyLoadComponent, useValue: WuFavorites}
],
...
})
export class WuFavoritesModule {}
Components no longer declare have the directives or pipes fields, and we use @NgModule for the providers.
// lib imports
import {Component} from '@angular/core';
@Component({
moduleId: module.id,
selector: 'wu-favorites',
templateUrl: './wu-favorites.html'
})
export class WuFavorites {...}
Whit AoT compile and server side rendering we need some rules:
export class WuFavorites implements OnChanges {
// All needed variables for the template
public favorites: any;
public popular: any;
public recents: any;
public cities: any;
public ngOnChanges(changes: SimpleChanges): void {...}
}
We have now aliases to avoid long & ugly imports.
// src/herlpers/globals/index.ts
import {mergeGlobals} from 'helpers/globals';
// src/testing/index.ts
import {TestComponentBuilderFactory} from 'testing';
// src/shared/wu-top-cities/index.ts
import {WuTopCitiesModule} from 'shared/wu-top-cities';
// src/shared/wu-top-cities/globals.ts
import {WuTopCitiesGlobals} from 'shared/wu-top-cities/globals';
It's better to read about this in the documentation.
// WRONG
// error, string is not ensured to be returned
// actual type is string|undefined
function Test(value: boolean): string {
if (value) {
return 'test';
}
}
// error, value is not ensured to exist
// actual type is string|undefined
function Test2(value?: string): string {
return value.replace('-', '');
}
// CORRECT
function Test(value: boolean): string|undefined {
if (value) {
return 'test';
}
}
function Test2(value?: string): string {
if (value) {
// now value is type string
return value.replace('-', '');
} else {
return '';
}
}
(Providers)
We're not using the old export const at the end of the file. Instead we're using a proper file for it.
We call it globals because now we're not only dealing with providers, but with modules as well.
/**
* @module WuCache
*/ /** */
// lib imports
import {JsonpModule} from '@angular/http';
// external imports
import {mergeGlobals} from 'helpers/globals';
import {WuQueryGlobals} from 'shared/wu-query/globals';
import {WuCacheGlobals} from 'shared/wu-cache/globals';
// internal imports
import {WuApiService} from './wu-api.service';
import {WuUrlGenerator} from './wu-url-generator';
export const WuApiGlobals = mergeGlobals({
providers: [
WuApiService,
WuUrlGenerator
],
imports: [
JsonpModule
]
}, [
WuCacheGlobals,
WuQueryGlobals
]);
/**
* @module WuAds
*/ /** */
// external imports
import {mergeGlobals} from 'helpers/globals';
// internal imports
import {WuAdsService} from './wu-ads';
export const WuAdsGlobals = mergeGlobals({
providers: [
WuAdsService
]
});
/**
* @module WuSearchAutocomplete
* @author Diego Barahona
* @since 2/9/16
*/ /** */
// external imports
import {mergeGlobals} from 'helpers/globals';
import {WuApiGlobals} from 'shared/wu-api/globals';
import {WuQueryGlobals} from 'shared/wu-query/globals';
import {WuTopCitiesGlobals} from 'shared/wu-top-cities/globals';
import {WuGeolocationGlobals} from 'shared/wu-geolocation/globals';
import {WuUserProfileGlobals} from 'shared/wu-user-profile/globals';
export const WuSearchGlobals = mergeGlobals({}, [
WuApiGlobals,
WuQueryGlobals,
WuTopCitiesGlobals,
WuGeolocationGlobals,
WuUserProfileGlobals
]);
It actually works with the same TestComponentBuilder but with some modifications.
Options now accept a preCompileHook, which is a function to be called before compile all the modules.
Also a globals and modules array to be provided with what you need.
@Component({
moduleId: module.id,
templateUrl: './template.html'
})
class TestComponent {
@ViewChild(WuBlogFeatured)
public wuBlogFeatured: WuBlogFeatured;
public blog = Jeffblog;
}
@NgModule({
imports: [WuNewsModule],
declarations: [TestComponent]
})
class TestModule {}
const myOptions = new TestComponentOptions();
myOptions.modules = [TestModule];
myOptions.globals = [WuNewsGlobals];
myOptions.preCompileHook = () => {
TestBed.overrideModule(WuNewsModule, {
add: {exports: [WuBlogFeatured]}
});
};