ionic4 admob 插件错误

Question

首页ts代码

    import { PostsService } from "./../posts.service";
    import { Component, OnInit } from "@angular/core";
    import { Observable } from "rxjs";
    import { Router } from "@angular/router";
    import { ActivatedRoute, ParamMap } from "@angular/router";
    import { switchMap } from "rxjs/operators";
    import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';

    @Component({
      selector: "app-home",
      templateUrl: "home.page.html",
      styleUrls: ["home.page.scss"]
    })
    export class HomePage implements OnInit {
      constructor(
        private postSrvc: PostsService,
        private router: Router,
        private route: ActivatedRoute,
        private admobFree: AdMobFree
      ) {
        this.showBannerAd();
      }

      posts$: Observable<any>;
      loadPost(post: any) {
        this.router.navigate(["/posts", post.id]);
      }
      ngOnInit() {
        this.posts$ = this.route.paramMap.pipe(
          switchMap(
            (params: ParamMap) =>
              params.get("category")
                ? this.postSrvc.fetchPostsByCategory(params.get("category"))
                : this.postSrvc.fetchPosts()
          )
        );
      }


      async showBannerAd() {
        try {
          const bannerConfig: AdMobFreeBannerConfig = {
            id: 'unit id',
            isTesting: true,
            autoShow: true
          }

          this.adMobFree.banner.config(bannerConfig);

          const result = await this.adMobFree.banner.prepare();
          console.log(result);
        }
        catch (e) {
          console.error(e);
        }
      }

    }

应用模块 ts 代码

    import { HttpClientModule } from "@angular/common/http";
    import { NgModule } from "@angular/core";
    import { BrowserModule } from "@angular/platform-browser";
    import { RouteReuseStrategy } from "@angular/router";
    import { SplashScreen } from "@ionic-native/splash-screen/ngx";
    import { StatusBar } from "@ionic-native/status-bar/ngx";
    import { IonicModule, IonicRouteStrategy } from "@ionic/angular";
    import { AppRoutingModule } from "./app-routing.module";
    import { AppComponent } from "./app.component";

    import { AdMobFree } from '@ionic-native/admob-free';

    @NgModule({
      declarations: [AppComponent],
      entryComponents: [],
      imports: [
        BrowserModule,
        IonicModule.forRoot(),
        AppRoutingModule,
        HttpClientModule
      ],
      providers: [
        StatusBar,
        SplashScreen,
        AdMobFree,
        { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule {}

所有错误

[ng] src/app/app.module.ts(13,11) 中的错误：错误 TS2345：类型参数 '{ 声明：(typeof AppComponent)[];入口组件：未定义[]；导入：（ModuleWithProvid...' 不可分配给“NgModule”类型的参数。

[ng] 属性“提供者”的类型不兼容。

[ng] 类型 '(typeof SplashScreen | AdMobFreeOriginal | { 提供：typeof RouteReuseStrategy; useClass: typeof...' 不可分配给类型 'Provider[]'。

[ng] 键入 'typeof SplashScreen | AdMobFree原创 | {提供：类型的RouteReuseStrategy； useClass: typeof ...' 不能分配给类型 'Provider'。

[ng] 类型“AdMobFreeOriginal”不可分配给类型“Provider”。

[ng] 类型“AdMobFreeOriginal”不可分配给类型“ClassProvider”。

[ng] 类型“AdMobFreeOriginal”中缺少属性“provide”。

[ng] src/app/home/home.page.ts(19,24)：错误 TS2304：找不到名称“AdMobFree”。

[ng] src/app/home/home.page.ts(48,12)：错误 TS2551：“主页”类型上不存在属性“adMobFree”。您的意思是“admobFree”吗？

[ng] src/app/home/home.page.ts(50,33)：错误 TS2551：“主页”类型上不存在属性“adMobFree”。您的意思是“admobFree”吗？

Answer 1

尝试改变这个：

import { AdMobFree} from '@ionic-native/admob-free';

到这里：

import { AdMobFree } from '@ionic-native/admob-free/ngx';