Angular 2 Module Imports

Question

I have my main module like this, where I import the basic Libraries :

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

import { MapModule } from './map/map.module';

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

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MapModule,
    MaterialModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

My question is when I create a new Module within the app i.e Map Module do I need to reimport all those libraries to that Module. I was under the impression that if I import the libraries on the module it would work under child modules.

But in my Map Module I am getting errors like.

Can't bind to 'ngClass' since it isn't a known property of 'div'.

My Current MapModule looks like

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

import { MapComponent } from './map.component';
import { MapMenuComponent } from './map-menu/map-menu.component';
import { MapControlsComponent } from './map-controls/map-controls.component';
import { MapService } from './map.service';


@NgModule({
    imports: [],
    exports: [],
    declarations: [MapMenuComponent, MapControlsComponent, MapComponent],
    providers: [MapService],
})
export class MapModule { }

Do I need to reimport the MaterialModule, Forms etc into module again for the components in this module to work ?

Max Koretskyi · Accepted Answer · 2017-02-22T12:14:58.217

3

You only need to reimport modules with declarations, i.e. modules that define new components, directives and pipes. Modules that register providers don't need to be imported.

In this list:

  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MapModule,
    MaterialModule.forRoot()
  ],

FormsModule modules need to be imported, by HttpModule need not. BrowserModule re-exports CommonModule, so in the other modules you would probably want to import CommonModule, not BrowserModule to get built-in directives like NgClass. By importing CommonModule you will not have this error:

Can't bind to 'ngClass' since it isn't a known property of 'div'.

edited Feb 22 '17 at 12:14

answered Feb 22 '17 at 12:10

Max Koretskyi

101,079
60
333
488

2

Ah gotcha, and I guess bundlers like webpack are smart enough to only put these modules like Material and Forms only once in the bundle and not multiple times. – StevieB Feb 22 '17 at 12:12
Thanks man for the well explained answer, I found this scenario lacking in their documentation. – StevieB Feb 22 '17 at 12:16
@StevieB, sure, bundlers or other loaders like systemjs will import the module only once. Yeah, that part is unclear in the docs. What's worse, they don't include sources in the npm package so you have to go to github to check what modules have declarations. – Max Koretskyi Feb 22 '17 at 12:18
1

@Maximus you can also have a look at shared modules, which is a nice pattern to avoid having to do the same imports over and over again: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module – Fredrik Lundin Feb 22 '17 at 12:18
@FredrikLundin, shared modules would still have to be imported. Shared module is not different from any other module. – Max Koretskyi Feb 22 '17 at 12:19
Perfect, I like the Shared Module approach as well – StevieB Feb 22 '17 at 12:19
Oups, my comment was actually for @StevieB, not you maximus :). Yes they do need to be imported, but if you have many modules, it's a nice way of putting common imports into one shared module :) – Fredrik Lundin Feb 22 '17 at 12:21
@FredrikLundin, yeah, as a pattern, yes, it certainly makes sense) – Max Koretskyi Feb 22 '17 at 12:22

score 0 · Answer 2 · edited Jun 09 '17 at 05:39

0

You can use SharedModule. All modules those are used in multiple modules

sharedModule example

import { NgModule } from '@angular/core';
import { anyService} from './any.service';

@NgModule({
  providers: [anyService]
})
export class SharedModule {}

Now you can import this shared module in any modules in which want to use this module

edited Jun 09 '17 at 05:39

Pang

9,564
146
81
122

answered Mar 17 '17 at 11:27

Tushar Tibude

41
4

Angular 2 Module Imports

2 Answers2