找不到模塊：錯誤：無法解析“/Users/username/Documents/Privat/ionic3-barcodev3/src/app/home”中的“./home.html”

Question

我剛剛開始在 android 上使用條形碼掃描儀構建我的第一個 ionic 應用程序。 為了開發條形碼集成，我使用了這個文檔： 鏈接

有一段時間它似乎工作得很好。 但現在我收到此錯誤消息：

 Module not found: Error: Can't resolve './home.html' in '/Users/username/Documents/Privat/ionic3-barcodev3/src/app/home'

任何人都知道如何解決這個問題？

主頁.page.html：

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>
      QR-Scanner
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>

  <ion-button color="success" expand="full" shape="round" (click)="scan()">Start Scan</ion-button>

    <ion-card *ngIf="productFound">
      <ion-card-header>
        <h2 color="success" >Object: {{selectedProduct.name}}</h2>
      </ion-card-header>
      <ion-card-content>
        <ul>
          <li>{{selectedProduct.plu}}</li>
          <li>{{selectedProduct.price}}</li>
          <li>{{selectedProduct.desc}}</li>
        </ul>
      </ion-card-content>
    </ion-card>
</ion-content>

主頁.ts：

import { NavController } from '@ionic/angular';
import { Component } from '@angular/core';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { Toast } from '@ionic-native/toast/ngx';
import { DataServiceService } from '../../app/data-service.service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  products: any[] = [];
  selectedProduct: any;
  productFound:boolean = false;

  constructor(public navCtrl: NavController,
    private barcodeScanner: BarcodeScanner,
    private toast: Toast,
    public dataService: DataServiceService) {

      this.dataService.getProducts()
        .subscribe((response)=> {
            this.products.push(response)
            console.log(this.products);
        });
  }

  scan() {
    this.selectedProduct = {};
    this.barcodeScanner.scan().then((barcodeData) => {
      this.selectedProduct = this.products.find(product => product.plu === barcodeData.text);
      if(this.selectedProduct !== undefined) {
        this.productFound = true;
        console.log(this.selectedProduct);
      } else {
        this.selectedProduct = {};
        this.productFound = false;
        this.toast.show('Product not found', '5000', 'center').subscribe(
          toast => {
            console.log(toast);
          }
        );
      }
    }, (err) => {
      this.toast.show(err, '5000', 'center').subscribe(
        toast => {
          console.log(toast);
        }
      );
    });
  }
}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { Toast } from '@ionic-native/toast/ngx';

import { HttpClientModule } from '@angular/common/http';

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

Answer 1

檢查這個問題： 我必須在哪里導入 Ionic 3 上的頁面？

您需要在 app.module.ts 中導入主頁

import { HomePage } from '../pages/home/home';

並在同一個文件 app.modules.ts 中的聲明和entryComponents中。

declarations: [
    ... ,
    HomePage
],
entryComponents: [
    ... ,
    HomePage
],

聲明：在聲明部分，我們需要包含我們創建的所有組件和指令。

entryComponents ：在 entryComponents 部分，我們定義任何僅按其類型加載的組件。 所有 Page 組件都是這種情況。