离子应用程序未在链接包中找到提供程序

Question

我有一个 ionic 应用程序和一个 Angular Web 应用程序，它们都使用相同的 REST API。对于初始开发，我在两个项目中都复制了 api 实现代码，但现在我想将 api 服务提取到一个链接的 npm 包中，两个项目都可以使用并作为模块导入。包编译正常，但我的 Ionic 应用程序无法从包中的服务模块中找到提供程序。

我的服务包模块如下所示：

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 {

}

包的 index.ts 文件如下所示：

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

我的 tsconfig.json 文件

{
  "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"
  }
}

编译包后我链接包

npm link

在我的应用程序代码中，我创建了一个指向我的包的链接

npm link @myapp/services

然后我将服务模块导入到我的主应用程序模块中

@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 {}

在我的登录页面中，我导入 AuthenticationService 并在构造函数中声明它，以便它由依赖注入器设置

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) {}

但在尝试为我的应用提供服务时出现以下错误

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

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

对于从服务模块中对任何提供程序的所有引用，我也会收到相同的错误。我也尝试在服务模块的exports 部分列出服务，但这并没有解决问题。

我的离子版本

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

谢谢

Answer 1

对于 Ionic 应用程序。 @ngModule 中的大部分内容也适用于 Angular：

声明：使组件、指令和管道可用于并非来自其他模块的模块。你不把服务放在这里！

imports：引入您的模块需要的其他 Angular 模块。 BrowserModule、HttpModule、IonicModule 等

entryComponents：页面之类的东西

提供者：您的服务在这里，还有状态栏、SplashScreen、键盘、离子错误处理程序......