javascript - 找不到模块:错误:无法解析“/Users/username/Documents/Privat/ionic3-barcodev3/src/app/home”中的“./home.html”
问题描述
我刚刚开始在 android 上使用条形码扫描仪构建我的第一个 ionic 应用程序。对于条形码集成的开发,我使用了这个文档:链接
有一段时间它似乎工作得很好。但现在我收到了这个错误信息:
Module not found: Error: Can't resolve './home.html' in '/Users/username/Documents/Privat/ionic3-barcodev3/src/app/home'
有人知道如何解决这个问题吗?
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 {}
解决方案
检查这个问题:我必须在哪里导入 Ionic 3 上的页面?
您需要在 app.module.ts 中导入主页
import { HomePage } from '../pages/home/home';
并在同一文件 app.modules.ts中的声明和entryComponents中。
declarations: [
... ,
HomePage
],
entryComponents: [
... ,
HomePage
],
声明:在声明部分,我们需要包含我们创建的所有组件和指令。
entryComponents:在 entryComponents 部分中,我们定义了仅按其类型加载的任何组件。这适用于所有 Page 组件。
推荐阅读
- javascript - 如何过滤重复键?
- azure - 如何使用 CLI 2.x 添加 preAuthorizedApplications
- php - 当我的网址在邮件正文中时,PHP MAIL 不发送电子邮件
- css - 使 ::before 选择器内容中的图像拉伸到屏幕
- c# - 在 C# 8 中,为什么对新表达式的类型推断会导致可空引用?
- javascript - 使用 Node.js 从 Json 文件中解析嵌套对象
- python - 如何根据文件名将一个文件夹中的多个文件分成不同的文件夹?
- apache-spark - Spark:无法构建大于 8G 的 HashedRelation
- gitlab - 如何在提交后/合并请求管道中引用由预提交管道生成的工件
- javascript - 将字符串(作为快捷方式)转换为 Javascript 中的字节