奇怪的NativeScript/Angular2问题，应用程序在错误的位置查找模板

我有一个非常基本的Nativescript/Angular2条形码扫描仪应用程序，我刚刚开始在其中实现路由

我有一个主组件位于

app/pages/Home/Home.component.ts

，主组件的模板位于同一个文件夹

app/Home/Home.component.html

中，当我构建应用程序时，在该应用程序部署到genyMotion emulator上之前，每次运行似乎都正常。然后我得到下面的错误

出于某种原因，它似乎在

app/home.component.html

下查找主组件的模板？你知道为什么会这样吗？我检查了所有引用主组件的模块的导入语句是否正确。你知道我该怎么弄清楚这里发生了什么吗

我的错误：

在“主”线程上发生未捕获的异常。
java.lang.RuntimeException:无法恢复活动{org.nativescript.barcodescanner/com.tns.nativescript活动}:com.tns.nativescript异常：
调用js方法onCreateView失败
错误：文件/data/data/org.nativescript.barcodescanner/files/app/home.component.html不存在。解析自：home.component.html。
文件：“/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/resource-loader.js，第22行，第12列

堆栈跟踪：

Frame:function:'FileSystemResourceLoader.get'，file:'/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript angular/resource loader.js'，行：22，列：19
框架：函数：'DirectiveNormalizer._fetch'，文件：'/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js'，行：13661，列：45
框架：函数：'DirectiveNormalizer.normalizeTemplateAsync'，文件：'/data/data/org.nativescript.barcodescanner/files/app/tns_module

my home.component.ts：

从'@angular/core'导入{Component，}；
从“../../services/rest.service”导入{RestService}；
从“../../services/local storage.service”导入{LocalStorageService}；
@组成部分({
选择器：“主页”，
templateUrl:“./home.component.html”
})
导出类HomeComponent{
构造函数（私有restService:restService，私有localStorageService:localStorageService）{
}
}

my app.routing.ts：（由于我正忙于将web应用程序转换为移动应用程序，并且仍在添加所有组件的过程中，很多人对此文件发表了评论…）

从“/app.component”导入{AppComponent}；
//从“./components/product/product.component”导入{ProductComponent}；
//从“./Components/stock transaction/stock transaction.component”导入{StockTransactionComponent}；
//从“./Components/check barcodes/check barcodes.component”导入{CheckBarcodesComponent}；
从“/pages/home/home.component”导入{HomeComponent}；
//从“./Components/settings/settings.component”导入{SettingsComponent}；
导出常量路由=[
//{路径：“设置”，组件：设置组件}，
//{路径：“checkBarcodes”，组件：CheckBarcodesComponent}，
{路径：，组件：HomeComponent}
];
导出常量可导航组件=[
HomeComponent
];

我的app.module.ts：

从“@angular/core”导入{NgModule，ValueProvider}；
从“nativescript/forms”导入{nativescript FormsModule}；
从“nativescript/platform”导入{NativeScriptModule}；
从“nativescript/router”导入{nativescript路由模块}
从“nativescript/http”导入{NativeScriptHttpModule}；
从“nativescript BarcodeScanner”导入{BarcodeScanner}；
从“./services/rest.service”导入{RestService}；
从“/app.component”导入{AppComponent}；
从“/pages/home/home.component”导入{HomeComponent}；
从“/app.routing”导入{routes，navigatableComponents}；
@NGD模块({
进口：[
NativeScript模块，
NativeScriptFormsModule，
NativeScript HttpModule，
NativeScript路由模块，
NativeScriptRouterModule.forRoot（路由）
],
声明：[
应用组件，
HomeComponent，
…可导航组件
],
供应商：[
恢复服务，
条码扫描仪]，
引导：[AppComponent]
})
导出类AppModule{}
我的app.component.ts：
从“@angular/core”导入{Component}”；
@组成部分({
选择器：“主”，
模板：“”
})
导出类AppComponent{}

您可以将

模板URL

更改为

模板

，并使用内联html代码

templateUrl: './home.component.html' => template: `<!-- contents of ./home.component.html -->`

编写和维护我们的应用程序会容易得多 组件，如果我们可以指定相对的模板和样式位置 到它们的组件类文件

组件相对路径不是默认的角度路径。您应该了解原因

网页包用户可能更喜欢使用

---

总结： 您可以尝试在

templateUrl

属性中使用组件相对或绝对URL，但内联解决方案简单易行。

---

您也可以阅读教程，了解如何使用组件模板。

您是否尝试将

模块ID

添加到

@component

定义中？我读过它会破坏网页兼容性，但我不知道这对您是否重要：

@Component({
  moduleId: module.id,
  templateUrl: "home.component.html",
  // ..
})

---

然后将

home.component.html

放在与此组件相同的文件夹中。

因此，似乎NativeScript在使用单独的模板时需要绝对路径，这对我来说很有用（pages/home/home.component.ts）：

---

templateUrl:“./pages/home/home.component.html”；

希望您了解相对Url的情况。为什么我不能使用templateUrl？Url在您部署时不再有效。但这不是一个web应用程序？另外，我正忙着转换为此Nativescript应用程序的web应用程序使用webPack，而且相对Url似乎工作正常…？不是吗除非您将特定加载程序用于webpack@user2094257你尝试过这个解决方案吗？嘿@Eddy Verbrugen so@Component（{module

@Component({
  moduleId: module.id,
  templateUrl: "home.component.html",
  // ..
})