Angular 2: component reusability and setup of testing module

Question

I am currently initiating myself to the latest RC of Angular 2, coupled with typescript. So far, I really love it, but I however already stumbled upon a few existential concerns.

The @Component annotation, along with the class approach of typescript, are intented to encourage code and component reusability. But, there's something that really bothers me: if your component's template uses *ngModel, you need the FormModule to be imported at module level (app module for example). It highly annoys me that I can't just bundle everything I need into this @Component declaration.

Any other application will have to look into my templates to know whether importing this module.

Another direct side effect is that all my tests need to duplicate the imports done in the main app @NgModule declaration into the TestBed.configureTestingModule({...}) declaration, which really feels like an anti-pattern.

So, at this point I'm 90% sure I'm just doing it wrong. How would you approach/solve the problem?

• jonrsharpe: They don't need to duplicate all imports, only the ones that component is using. As suggested below, the shared module pattern lets you bundle up the common imports throughout your app. Also feature modules let you bundle a set of components and their services/pipes/routes/imports/whatever for better modularity. Read angular.io/docs/ts/latest/guide/ngmodule.html

Answer 1

A solution might be to bundle your component into a seperate (shared, like a class library if you will) module which other modules will be able to import into their own.

• Sebas: It works. All my application is stored inside the main app ngmodule already - I just didn't think it would be a good idea to import it (because of the bootstrap mainly) but it seems it works! Now I have a main app spec file that calls configureTestingModule and impoorts it. This main spec file is loaded first and foremost by karma so I don't have to run this code in each other describe suite.