ngmodule, javascript module, method chain

how to use other module's component?



For example, I have M2 module, M2 module have comp23 component and comp2 component, Now I want to use comp23 and comp2 in app.module

// import this module's ALL component, but not other module's component, only this module

import { AppComponent } from './app.component';

import { Comp1Component } from './comp1/comp1.component';

// import all other module,

import { SwModule } from './sw/sw.module';

import { Sw1Module } from './sw1/sw1.module';

import { M2Module } from './m2/m2.module';

import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';

@NgModule({

// declare only this module's all component, not other module component.

declarations: [

AppComponent,

Comp1Component,

],

// imports all other module only.

imports: [

BrowserModule,

SwModule,

Sw1Module,

M2Module,

CustomerDashboardModule // add the feature module here

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

// must import this module's all component file

import { Comp2Component } from './comp2/comp2.component';

import { Comp23Component } from './comp23/comp23.component';

@NgModule({

// import all other module here.

imports: [

CommonModule

],

// declare only this module's child component.

declarations: [Comp2Component, Comp23Component],

// for other module to use these component, must exports

exports: [Comp2Component, Comp23Component]

})

export class M2Module { }

now in app.component.html, you can use

<app-tr111></app-tr111>

<app-wt></app-wt>

++++++++++++++++++++++++++++

<app-tr111></app-tr111>

<app-wt1></app-wt1>

=============================

<app-comp2></app-comp2>

<app-comp23></app-comp23>

======================================================================

// import {xx} from "./XXX" is ES6 module API,

 ./ is current folder, ../ is parent folder

 import some module and some component(only this module's child component),

not other module's component. If you want to use other module's component,

you only import other module here, it will automatically bring all child component

available here. of course, in other module, you need to exports:[child component]

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { HttpModule } from "@angular/http";

import { AppComponent } from "./app.component";
import { AppRoutingModule } from "./app-routing.module";

import { PokemonListComponent } from "./pokemon/pokemon-list.component";

@NgModule({
  imports: [

 // all above ES6 imported module, need to be list here for NgModule
    AppRoutingModule,
    BrowserModule,
    FormsModule,
    HttpModule,
  ],
  declarations: [

// all above ES6 imported component, need to be list here for NgModule
    AppComponent,
    PokemonListComponent
  ],
  bootstrap: [AppComponent]

exports:[comp1, comp2] // if you want to use comp1, comp2 in other module, you

need to exports it. But for AppModule, it is root module, you do not need so

})
export class AppModule { }

=======================================================================

Method chain:
"return this" in each function.

JavaScript Module Pattern: In-Depth

http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html