I have an ionic app and angular web app that both consume the same REST API. For initial development I had the api implementation code copied in both projects, but now I'd like to extract the api services into a linked npm package that both projects can use and import as a module. The package compiles fine but my Ionic app can't find the providers from the services module in the package.
My services package module looks like this:
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 looks like this:
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 link the package
npm link
In my application code I create a link to my package
npm link @myapp/services
I then import the services module into my main app 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 in my login page I import the AuthenticationService and declare it in the constructor so it gets 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 I get the following error when trying to serve my app
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 references to any of the providers from the services module. I've tried listing the services in the exports section of the services module as well but that didn't fix the issue.
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
Thanks