Question

我有一个离子应用程序和角度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

然后我将服务模块导入我的主app模块

@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：

声明：使组件，指令和管道可供模块使用，而不是来自其他模块。你不把服务放在这里！

导入：带入您的模块需要的其他Angular模块。 BrowserModule，HttpModule，IonicModule等。

entryComponents ：像页面

这样的东西

提供商：您的服务也在这里，还有StatusBar，SplashScreen，键盘，离子错误处理程序......

离子应用程序无法在链接包中找到提供者

1 个答案: