How to use ng2Modules inside a project

Question

I have a shared module in my app, I bundled all my components from the shared folder in a single module.

What I need now is how do I import classes from that module?

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ModuleWithProviders } from '@angular/core';

import { MaterialModule } from '@angular/material';
import { AgGridModule } from 'ag-grid-ng2/main';

import { TreeModule } from 'angular2-tree-component';

import {
    GenericTabsComponent, DateNavigatorComponent,
    ErrorMessage, FavoriteListComponent, GenericContentComponent, GenericFormComponent,
    GenericListComponent, GenericLookupComponent, GenericPopupComponent, GlobalActionsComponent, LoadingComponent,
    UnitListComponent, UnitSubunitFavoriteItemComponent, UnitSubunitFieldComponent, UnitSubunitItemComponent,
    WeekstartComponent, AutoCompleteComponent, ChipsInputComponent, FilterboxComponent, GridCellActionComponent, GenericTabHeaderComponent,
    ActionGridComponent, ComboBoxComponent, TextareaComponent
} from './index';

@NgModule({
    id: "@app/components",
    imports: [BrowserModule, FormsModule, ReactiveFormsModule, MaterialModule, AgGridModule, TreeModule],
    exports: [FormsModule, ReactiveFormsModule, GenericTabsComponent, DateNavigatorComponent,
        ErrorMessage, FavoriteListComponent, GenericContentComponent, GenericFormComponent,
        GenericListComponent, GenericLookupComponent, GenericPopupComponent, GlobalActionsComponent, LoadingComponent,
        UnitListComponent, UnitSubunitFavoriteItemComponent, UnitSubunitFieldComponent, UnitSubunitItemComponent,
        WeekstartComponent, AutoCompleteComponent, ChipsInputComponent, FilterboxComponent, GridCellActionComponent, GenericTabHeaderComponent,
        ActionGridComponent, ComboBoxComponent, TextareaComponent],
    declarations: [GenericTabsComponent, DateNavigatorComponent,
        ErrorMessage, FavoriteListComponent, GenericContentComponent, GenericFormComponent,
        GenericListComponent, GenericLookupComponent, GenericPopupComponent, GlobalActionsComponent, LoadingComponent,
        UnitListComponent, UnitSubunitFavoriteItemComponent, UnitSubunitFieldComponent, UnitSubunitItemComponent,
        WeekstartComponent, AutoCompleteComponent, ChipsInputComponent, FilterboxComponent, GridCellActionComponent, GenericTabHeaderComponent,
        ActionGridComponent, ComboBoxComponent, TextareaComponent],
})
export class ComponentsModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: ComponentsModule,
            providers: []
        };
    }
}

This is the shared folder and the app structure looks like this.

app->shared->components.module // here are all the components
app->main.page // a module for a page
app->users.page // a module for another page
app->main.app.module //the root module

Now in main.page I need to import a component class, for example GenericListComponent, from the shared module to create a ViewChild and specify the type. From where do I import the class GenericListComponent? From the file location, or the import will look something like this?

import {GenericListComponent} from "@app/components"

Also, if I have 2 page modules with load children and they use components from shared. Where do I put my shared module in the main app component, or do I specify it as import in every module?

score 1 · Answer 1 · answered Oct 17 '16 at 12:09

You will need to import your components from the file location, one thing though is that you can play with ES2015 export feature.

So imagine this, on your GenericListComponent folder create an index.ts with this:

export * from './generic-list.component';

This will basically re-export everything that is exported on your generic-list.component

Now on your shared/ folder we create another index.ts to re-export everything again:

export * from './generic-list';

If you notice we are just referencing the generic-list/ folder because inside of it there's an index.ts.

So with that in place now on your main.page you can this:

import { GenericListComponent } from './shared'

Now you just repeat the process for each folder inside your shared/ folder and add multiple lines to the index.ts inside your shared/.

How to use ng2Modules inside a project

1 Answers1