类型“FacebookOriginal”不可分配给类型“Provider”（Ionic 5 - Facebook 离子原生）答案

【问题标题】：Type 'FacebookOriginal' is not assignable to type 'Provider' (Ionic 5 - Facebook ionic native)类型“FacebookOriginal”不可分配给类型“Provider”（Ionic 5 - Facebook 离子原生）
【发布时间】：2020-10-31 22:08:20
【问题描述】：

重新启动 ionic 应用后，我突然开始收到这些错误：

TS2322：类型“FacebookOriginal”不可分配给类型“Provider”。类型“FacebookOriginal”缺少类型“TypeProvider”中的以下属性：应用、调用、绑定、原型等等。

app.module

// More imports above
import {Facebook} from '@ionic-native/facebook/ngx'; <--- I triple checked that this is the correct import

@NgModule({
    declarations: [
        // List of components here
    ],
    entryComponents: [],
    imports: [
        // List of modules here
    ],
    providers: [
        StatusBar,
        SplashScreen,
        IsLoggedInGuard,
        FCM,
        IsNotLoggedInGuard,
        Facebook, // <----- Error here
        {provide: RouteReuseStrategy, useClass: IonicRouteStrategy}
    ],
    bootstrap: [AppComponent]
})

export class AppModule {

}

我在哪里注入参考：

'Facebook' 指的是一个值，但在这里被用作一个类型。您的意思是“typeof Facebook”吗？

login.component.ts

// More imports above
import {Facebook} from '@ionic-native/facebook/ngx';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss'],
})
export class LoginComponent implements OnInit {

    public datosBasicos: Basicos;
    public colores: Color = new Color();

    constructor(
        public loginService: SessionService,
        private router: Router,
        private fb: Facebook, // <----- Error here
        private platform: Platform,
        private colorService: ColorService,
        public basicosService: BasicosService
    ) {
    }

    async ngOnInit() {
        // this.autologinIfPreview();
        await this.loginService.loginAnonimo();        
        this.colores = this.colorService.color;
        this.datosBasicos = await this.basicosService.findDatosBasicos().pipe(first()).toPromise();
    }

    public async loginFacebook() {
        const fbResponse = await this.fb.login(['public_profile', 'user_friends', 'email']).then(); // Because of previous error, this isn't working at all

        await this.loginService.loginFacebook(fbResponse);

        this.router.navigate(['/main/home']).then();
        // await this.loginService.loginFacebook();

    }

如果我添加“typeof Facebook”，则会在运行时出现此错误：

此构造函数与 Angular 依赖注入不兼容，因为它在参数列表索引 2 处的依赖无效。如果依赖类型是像字符串这样的原始类型，或者此类的祖先缺少 Angular 装饰器，则可能会发生这种情况。

这个错误让我发疯了，我之前能够实际构建 ionic 应用程序并使用 Facebook 登录。我尝试重新安装插件和类型并更改它们的版本，但没有成功。

【问题讨论】：

this.fb.login([...]);删除 user_friends 范围，因为它会在发布构建和部署到应用商店和游戏商店时导致登录失败，只需使用 public_profile 和电子邮件范围。这与错误无关，但它是一个错误。对于 loginFacebook 功能，您可以复制与 ionic 框架文档中有关插件的相同内容，

标签： angular facebook ionic-framework

【解决方案1】：

好的，我知道了！

在我的应用程序的其他地方，我正在使用这个：

session.service.ts

import {FacebookLoginResponse} from '@ionic-native/facebook'; // <--- Here!!! should be: '@ionic-native/facebook/ngx'


public async loginFacebook(facebookResponse: FacebookLoginResponse): Promise<User> {
     if (facebookResponse) {
         const facebookCredential = firebase.auth.FacebookAuthProvider.credential(facebookResponse.authResponse.accessToken);

         const userCredential = await firebase.auth().signInWithCredential(facebookCredential);
         return userCredential.user;
     }
     return null;
}

希望这对某人有所帮助，这个错误是浪费时间

【讨论】：