Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I export services in a module?

How can I export a service from a module in angular 2?

The idea is that when I import into another component, I want the import to be agnostic of the actual service location, it should be the repsonsibility of the module to manage that

Core.module.ts:

import {
NgModule,
Optional, SkipSelf } from '@angular/core';
import { CommonModule } from '@angular/common';

import { MyApi } from './Api/myApi.service';

import { AuthenticationModule } from './authentication/authentication.module';

@NgModule({
imports: [
    CommonModule,
    AuthenticationModule
],
providers: [
    MyApi
],
exports: [MyApi, AuthenticationModule]
})
export class CoreModule {
constructor( @Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
    throw new Error(
        'CoreModule is already loaded. Import it in the AppModule only');
    }
}

}

App.component.ts:

import { Router, ActivatedRoute } from '@angular/router';
import { Component, ViewContainerRef, OnInit } from '@angular/core';

import { MyApi } from 'core.module'; //i want this to be the core module import, not './core/api/myApi.service'

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor ( public service: MyApi) {
        service.doStuff()
    }
}

But in the code example above, it tells me that MyApi isn't exported by Core.module.

This is slightly pseudo-code, so excuse the small errors I've made :)

like image 351
Alex Avatar asked Dec 20 '17 12:12

Alex


People also ask

Can you export a module?

Every module can have two different types of export, named export and default export. You can have multiple named exports per module but only one default export. Each type corresponds to one of the above syntax.

What can you export with module exports?

By module. exports, we can export functions, objects, and their references from one file and can use them in other files by importing them by require() method.

Can services be shared using modules?

Working with a shared module is quite common and recommended. This module can be used to share services, components, directives, pipes, etc. between different feature modules. If we import our shared module in multiple modules, we will provide the service multiple times and multiple instances will be created.

Where do I put service in App module?

You can register the service in root injector of the app using following syntax. This is the preferred way to create a singleton service from the beginning of Angular 6.0. Notice that the providedIn attribute in the Injectable() decorator has been used to register the service in the root injector of the app.


1 Answers

There's two things you can do to make your imports more concise:

  1. You can export everything from your entry point file (by convention is often called index.ts) and later import any class you've exported from that file:

    import { NgModule } from '@angular/core';
    import { ApiService } from 'path/to/api.service';
    @NgModule({ ... })
    export class CoreModule {}
    export * from 'path/to/api.service';
    

    This way you can then import both CoreModule and ApiService from the same route like this:

    import { CoreModule, ApiService } from 'path/to/core.module;'
    

    So you have a common entry point for all your module dependencies.

  2. If your module is deeply nested, or you want to import it from a location that might end up in going back and forth a few directories, you can always create an alias for that path in your main tsconfig.json file, under compilerOptions.paths:

    {
      "compilerOptions": {
        // ...
        "paths": {
          "@app-core": ["app/path/to/deeply/nested/core.module"]
        }
      }
    }
    

    And then use that alias instead:

    import { CoreModule, ApiService } from '@app-core'
    
like image 176
Osman Cea Avatar answered Sep 24 '22 21:09

Osman Cea