Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to inherit a module from another module in Angular2?

So I'm using Angular 2 final (2.0.0) and let's say i create a WidgetsModule with a bunch of directives and components that will help me build my application, and then import it in my AppModule

import { NgModule }      from '@angular/core';
import { UniversalModule } from 'angular2-universal';

import { WidgetsModule } from '../../../widgets';
import { App, appRouting } from './';

@NgModule({
  imports:      [
    UniversalModule,
    WidgetsModule,
    appRouting
  ],
  providers:    [ AppPresenter ],
  declarations: [ App ],
  exports:      [ ],
  bootstrap:    [ App ]
})
export class AppModule { }

Then i want to use widgets in the child modules, like HomeModule, CartModule, etc. How can I make the widgets available without having to import the WidgetsModule in every other Module?

import { NgModule }      from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'

import { WidgetsModule } from '../../../widgets';
import { Cart, cartRouting } from './';

@NgModule({
  imports:      [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    WidgetsModule,  //<-- I want to avoid doing this in every module
    cartRouting
  ],
  providers:    [ ],
  declarations: [ Cart ]

})
export class CartModule { }

Is there a way to do it like it's done with the directives in the exports[]?

like image 490
Pstr Avatar asked Oct 07 '16 20:10

Pstr


People also ask

How do I pass data from one module to another in Angular 11?

There are several ways how Angular components can pass data around: Using @Input and @Output. By injecting parent component through constructor or child components through @ViewChild , @ViewChildren , @ContentChild , @ContentChildren and directly calling component's API.

What should be imported BrowserModule or CommonModule?

Should I import BrowserModule or CommonModule ? link. The root application module, AppModule , of almost every browser application should import BrowserModule from @angular/platform-browser . BrowserModule provides services that are essential to launch and run a browser application.

What is sharing a module?

Sharing moduleslink Creating shared modules allows you to organize and streamline your code. You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your application.


1 Answers

It directly needs access to its own WidgetsModule just like it need direct access to it's own FormsModule (one way or another). One way to clean it up though is to export all the modules that are used in multiple places, from a SharedModule. Then you can just import the SharedModule everywhere

@NgModule({
  exports: [
    FormsModule,
    CommonModule,
    WidgetsModule
  ]
})
class SharedModule {}

You don't need to imports any of them into the SharedModule unless say you are declaring a component in the SharedModule that uses any of those other modules.

Then in all your other modules, just imports the SharedModule. This ends up cleaning it up a lot, and you only need to maintain one shared module.

See Also:

  • Angular2 How to clean up the AppModule
like image 164
Paul Samsotha Avatar answered Oct 17 '22 06:10

Paul Samsotha