Having trouble exporting from an Angular2 module

Question

I'm a beginner with Angular 2, and am trying to understand how to export a class from a feature module, and import it into my main module.

When I try to compile this in typescript, I receive the following two errors:

• app/app.component.ts(11,21): error TS2304: Cannot find name 'AddService'.

• app/app.module.ts(4,9): error TS2305: Module '"C:/angular/app/add/arithmetic.module"' has no exported member 'AddService'.

my tree is simple:

/
  index.html
  package.json
  systemjs.config.js
  tsconfig.json
  typings.json
  app/
     app.component.html
     app.component.ts
     app.module.ts
     main.ts
     add/
        add.service.ts
        arithmetic.module.ts

The interesting parts are below:

app.module.ts:

import {NgModule}      from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent}   from './app.component';

// this next line generates an error from typescript compiler:
// app/app.module.ts(4,9): error TS2305: Module
// '"C:/angular/app/add/arithmetic.module"' has no exported 
// member 'AddService'.

import {AddService} from './add/arithmetic.module';

@NgModule({
    imports:        [BrowserModule],
    declarations:   [AppComponent, AddService],
    bootstrap:      [AppComponent]
})
export class AppModule { }

app.component.ts

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

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {

    calculate() {
        // this next line generates the error:
        // app/app.component.ts(11,21): 
        // error TS2304: Cannot find name 'AddService'.
        var c = new AddService();

        var x = c.addTwoNumbers(3, 5);
        console.log(x);
    }
}

arithmetic.module.ts

import {NgModule}            from '@angular/core';
import {CommonModule}        from '@angular/common';
import {AddService}          from './add.service';

@NgModule({
  imports: [CommonModule],
  exports: [AddService]
})
export default class ArithemeticModule { }

add.service.ts

export class AddService {
    addTwoNumbers(a: number, b: number) : number {
        return a + b;
    } 
}

This really is frustrating because

1) I'm exporting AddService -- it's marked as 'export' and from within ArithmeticModule I'm marking it as exported using the @NgModule metadata.

2) I'm importing the [allegedly] exported AddService class from within my main module, so the AddService should be usable since it's exported from the ArithmeticModule

It works fine if I import the AddService directly from within the component, but that's not what I'm going for: I want to import the class from my main module, and utilize the exports from that module, just like we do for Angular's modules (e.g., BrowserModule and FormsModule). The documentation for @NgModule says that we should be able to do just that - import once from my feature module, into my main module, and then it's usable throughout the main module.

Can someone tell me what I'm doing wrong? Or am I misunderstanding what modules are supposed to be used for?

Answer 1

There are couple of mistakes I can see from here,

1) If you want to use AddService everywhere, better to inject it in AppModule as shown below, (remove AddService from arithmetic.module)

 import {AddService} from './add/arithmetic.module';

 @NgModule({
    imports:        [BrowserModule],
    declarations:   [AppComponent, AddService],
    bootstrap:      [AppComponent],
    providers:      [AddService]          //<<<===here 
})
export class AppModule { }

2) service should be injectable

import {Injectable} from '@angular/core'; //<<<===here

@Injectable()                             //<<<===here
   export class AddService {
    addTwoNumbers(a: number, b: number) : number {
        return a + b;
    } 
   }

3) How to use in app.component.ts

import {AddService} from './add/arithmetic.module';
import { Component } from '@angular/core';    

@Component({
    selector: 'my-app',
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    constructor(private s:AddService){}   //<<<===here
    calculate() {

       // var c = new AddService();

        var x = s.addTwoNumbers(3, 5);     //<<<===here
        console.log(x);
    }
}

Answer 2

For services use providers: [...], they will be added to the root injector (from non-lazy-loaded modules).

exports: [] is for directives, components, and pipes and modules that export directives, components, and pipes.