Why I cannot import Angular 2 service in @NgModule?

Question

I have ExchangeService Angular 2 @Injectable class and I have an application main module:

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        ReactiveFormsModule,
        ExchangeService,
        RouterModule.forRoot(routes)
    ],
   providers: [
    {   provide: LocationStrategy,
        useClass: HashLocationStrategy
    },
    ExchangeService
   ]
...})

which raises Exception

(index):16 Error: (SystemJS) Unexpected value 'ExchangeService' imported by the module 'Application5'
     Error: Unexpected value 'ExchangeService' imported by the module 'Application5'
     Error: (SystemJS) Unexpected value imported by the module Error: Unexpected value imported by the module
     Error: Unexpected value imported by the module at eval (http://127.0.0.1:8080/node_modules/@angular/compiler/bundles/compiler.umd.js:13982:37) at Array.forEach (native) at CompileMetadataResolver.getNgModuleMetadata 
     Error: Unexpected value imported by the module at eval at Array.forEach (native) at CompileMetadataResolver.getNgModuleMetadata

The exception disappears when I remove ExchangeService from the imports clause (and I leave in providers clause). I don't (at present) explicitly need ExchnageService to be in imports clause (I don't know what are benefits of it), I just want ExchangeService to be available for injection in other services in components globally.

The question is - why I am not allowed write ExchangeService in imports clause? Imports clause contains other TypeScript classes as well - like HttpModule and so on and why imports clause is not allowed to contain ExchangeService as well?

score 5 · Accepted Answer · edited May 23 '17 at 11:54

5

You should import inside providers

Remove from

 imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        ReactiveFormsModule,       
        RouterModule.forRoot(routes)
    ]

imports: is used to import supporting modules likes FormsModule, RouterModule, CommonModule, or any other custom-made feature module.

Read this what-is-difference-between-declarations-providers-and-import-in-ngmodule

edited May 23 '17 at 11:54

Community

1
1

answered Apr 13 '17 at 09:44

Sajeetharan

216,225
63
350
396

I figured this out, but my question was - what is the difference between service ExchangeService and module BrowserModule - why I should import one and not import other? – TomR Apr 13 '17 at 09:46
2

services and modules are two different things – Sajeetharan Apr 13 '17 at 09:49
@TomR any reason to remove answer? – Sajeetharan Apr 13 '17 at 10:24
Many thanks for Your answer and clarification but other answer provided a bit more theory so I was pressed to mark it as accepted. – TomR Apr 13 '17 at 14:03
@TomR Thats fine! i have added the link to the description since i dont have to repeat the same – Sajeetharan Apr 13 '17 at 14:04

score 3 · Answer 2 · answered Apr 13 '17 at 10:09

3

Using imports you can make other(FormsModule, HttpModule and etc) modules available in your current module.
Using providersyou can inject the services required by components, other services, pipes, etc.

answered Apr 13 '17 at 10:09

Siva Pasupathi

494
1
3
15

score 1 · Answer 3 · answered Apr 13 '17 at 10:18

imports is used to import other angular modules in the current module.

providers is used to tell angular what types (in fact: instances) are available for dependency injection.

An angular module is an assembly of components, directives, pipes, services etc. It is an abstraction that helps to structure larger projects and to include functionality written elsewhere.

Every app consists of at least one module (the main module in your case). When the app grows you will be tempted to split in several modules though.

Your ExchangeService is presumably not a module, but just a service (a class with some methods). Other components and services of your application may depend on a concrete instance of ExchangeService and if you add ExchangeService to the providers array, Angular will create an instance of it and inject it as dependency when creating, for example, components (assumed you declared ExchangedService as a paramter to the constructor of the component).

I suggest to read https://angular.io/docs/ts/latest/guide/architecture.html. The understanding of these architectural building blocks is - according to my 2 cents - necessary to use Angular successfully.

Why I cannot import Angular 2 service in @NgModule?

3 Answers3