Ion application does not find suppliers in related packaging

Question

I have an app with ionic app and angular that uses the same REST API. For initial development, I had api implementation code copied to both projects, but now I would like to extract the api services into the bundled npm package, which both projects can use and import as a module. The package compiles fine, but my Ionic application cannot find providers from the services module in the package.

My service pack is as follows:

import { NgModule } from '@angular/core';
import { ApiService } from './api.service';
import { AuthenticationService } from "./authentication.service";
import { CognitoUtil, CognitoCallback, LoggedInCallback } from "./cognito.service";
import { DocumentsService } from "./documents.service";
import { TagService } from "./tag.service";
import { UsersService } from "./users.service";
import { AwsUtil } from "./aws.service";

@NgModule({
  declarations: [
    ApiService,
    AuthenticationService,
    CognitoUtil,
    AwsUtil,
    DocumentsService,
    TagService,
    UsersService
  ],
  providers: [
    AwsUtil,
    CognitoUtil,
    ApiService,
    AuthenticationService,
    ApiService,
    DocumentsService,
    TagService
  ]
})
export class MyAppServicesModule {

}

The index.ts file for the package is as follows:

export { MyAppServicesModule } from './myapp-services.module';

My tsconfig.json file

{
  "compilerOptions": {
    "target": "es2016",   
    "module": "commonjs", 
    "declaration": true,  
    "outDir": "out",    
    "rootDir": "src",  
    "experimentalDecorators": true
  },
  "exclude": [
    "node_modules",
    "out"
  ]
}

package.json

{
  "name": "@myapp/services",
  "version": "1.0.0",
  "description": "My App services",
  "main": "index.js",
  "scripts": {
    "test": "test"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^8.0.19",
    "typescript": "^2.4.2"
  },
  "dependencies": {
    "@angular/core": "^4.3.3",
    "@angular/http": "^4.3.3",
    "amazon-cognito-identity-js": "^1.19.0",
    "rxjs": "^5.4.2"
  }
}

After compiling the package, I bind the package

npm link

In my application code, I create a link to my package

npm link @myapp/services

Then I import the services module into my main application module

@NgModule({
declarations: [
    MyApp
],
imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    MyAppServicesModule,
    LoginPageModule,
    DocumentsPageModule,
],
bootstrap: [IonicApp],
entryComponents: [
    MyApp
],
providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

And on my login page, I import AuthenticationServiceand declare it in the constructor so that it is set by the dependency injector

import { AuthenticationService } from '@myapp/services'

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html',
})
export class LoginPage  {

constructor (public navCtrl: NavController,
             public navParams: NavParams,
             public authenticationService: AuthenticationService) {}

But when you try to run my application

I get the following error:

typescript: src/pages/login/login.ts, line: 27
Cannot find name 'AuthenticationService'.

L26:  public navParams: NavParams,
L27:  public authenticationService: AuthenticationService) {}

I also get the same error for all links to any of the providers from the services module. I tried to list the services in the exportsservices module section , but this did not solve the problem.

My ionic version

Ionic Framework: 3.2.1
Ionic App Scripts: 1.3.7
Angular Core: 4.1.0
Angular Compiler CLI: 4.1.0
Node: 7.7.1
OS Platform: macOS Sierra
Navigator Platform: MacIntel
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_5) AppleWebKit/603.2.4 (KHTML, like Gecko) Version/10.1.1 Safari/603.2.4

thank

Answer 1

For an ionic application. Most of the stuff in @ngModule also applies to Angular:

announcements . Make components, directives, and pipes available to a module that do not come from another module. You do not put services here!

import: Angular, . BrowserModule, HttpModule, IonicModule ..

entryComponents: ,

. , , StatusBar, SplashScreen, Keyboard, ...