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

Question

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

我有一个 Home 组件位于 app/pages/home/home.component.ts 并且 home 组件的模板位于同一个文件夹中 app/home/home.component.html 当我构建应用程序时，一切似乎都工作正常，直到应用程序部署到genyMotion 模拟器。然后我得到以下错误。

它似乎出于某种原因正在寻找 app/home.component.html 下的 home 组件模板？知道为什么会这样吗？我检查过，所有引用 home 组件的模块的导入语句都是正确的。知道我如何着手弄清楚这里发生了什么吗？

我的错误：

An uncaught Exception occurred on "main" thread.
java.lang.RuntimeException: Unable to resume activity {org.nativescript.barcodescanner/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: 
Calling js method onCreateView failed

Error: File /data/data/org.nativescript.barcodescanner/files/app/home.component.html does not exist. Resolved from: home.component.html.
File: "/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/resource-loader.js, line: 22, column: 12

堆栈跟踪：

    Frame: function:'FileSystemResourceLoader.get', file:'/data/data/org.nativescript.barcodescanner/files/app/tns_modules/nativescript-angular/resource-loader.js', line: 22, column: 19
    Frame: function:'DirectiveNormalizer._fetch', file:'/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/compiler/bundles/compiler.umd.js', line: 13661, column: 45
    Frame: function:'DirectiveNormalizer.normalizeTemplateAsync', file:'/data/data/org.nativescript.barcodescanner/files/app/tns_modul

我的home.component.ts:

import { Component,} from '@angular/core';

import { RestService } from '../../services/rest.service';
import { LocalStorageService } from '../../services/local-storage.service';

@Component({
  selector: 'home',
  templateUrl: './home.component.html' 
})
export class HomeComponent {

  constructor(private restService: RestService, private localStorageService: LocalStorageService) {

}
    

}

我的app.routing.ts：（由于我正忙于将 Web 应用程序转换为移动应用程序并且仍在添加所有组件，因此此文件中有很多注释...）

import { AppComponent } from './app.component';
//import { ProductComponent } from './components/product/product.component';
//import { StockTransactionComponent } from './Components/stock-transaction/stock-transaction.component';
//import { CheckBarcodesComponent } from './Components/check-barcodes/check-barcodes.component';
import { HomeComponent } from "./pages/home/home.component";
//import { SettingsComponent } from './Components/settings/settings.component';

export const routes = [
    //{path: "settings", component: SettingsComponent },
//  {path: "checkBarcodes", component: CheckBarcodesComponent },    
    {path: "", component: HomeComponent}
];

export const navigatableComponents = [
HomeComponent
];

我的app.module.ts:

import { NgModule, ValueProvider } from "@angular/core";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptModule } from "nativescript-angular/platform";
import { NativeScriptRouterModule } from 'nativescript-angular/router'
import { NativeScriptHttpModule } from 'nativescript-angular/http';


import { BarcodeScanner } from "nativescript-barcodescanner";

import { RestService } from './services/rest.service';

import { AppComponent } from "./app.component";
import { HomeComponent } from "./pages/home/home.component";
import { routes, navigatableComponents } from './app.routing';
@NgModule({
    imports : [
    NativeScriptModule,     
    NativeScriptFormsModule ,
    NativeScriptHttpModule,
    NativeScriptRouterModule,
    NativeScriptRouterModule.forRoot(routes)
    ],
    declarations : [
    AppComponent,
    HomeComponent,
    ...navigatableComponents
    ],
    providers : [
    RestService,
    BarcodeScanner],
    bootstrap : [AppComponent]      
})
export class AppModule {}

my app.component.ts:


import { Component } from "@angular/core";



@Component({
    selector: "main",
    template : "<page-router-outlet></page-router-outlet>"
})
export class AppComponent {}

Answer 1

您可以将 templateUrl 更改为 template 并使用内联 html 代码。

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

templateUrl 中使用的 url 不是 组件相关的。您应该从食谱中阅读更多关于 componet-relative urls 以及如何使用 webpack 加载它们的信息。

By default, we must specify the full path back to the application root. We call this an absolute path because it is absolute with respect to the application root.

There are two problems with an absolute path:
We have to remember the full path back to the application root.

We have to update the URL when we move the component around in the application files structure.
It would be much easier to write and maintain our application components if we could specify template and style locations relative to their component class file.

组件相对路径 在 Angular 中不是 默认值。你应该阅读为什么。

Appendix: why component-relative is not the default

Webpack users may prefer an alternative approach.

总结：

你可以尝试在templateUrl属性中使用component-relative或absoluteurls，但是 inline 解决方案简单易行。您还可以阅读 Creating Your First Angular 2 Components 教程，了解如何使用您的组件模板。

Answer 2

您是否尝试过将 moduleId 添加到 @Component 定义中？我读过它破坏了 Webpack 的兼容性，但我不知道这对你来说是否重要：

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

然后将 home.component.html 放在与该组件相同的文件夹中。

Answer 3

因此，当使用对我有用的单独模板时，NativeScript 似乎需要绝对路径 (pages/home/home。component.ts):

templateUrl: './pages/home/home.component.html';

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

Strange NativeScript/Angular2 issue, app looks for templates in the wrong location

barcode-scanner

webpack

nativescript

angular

我的错误：

堆栈跟踪：

我的home.component.ts:

我的app.routing.ts：（由于我正忙于将 Web 应用程序转换为移动应用程序并且仍在添加所有组件，因此此文件中有很多注释...）

我的app.module.ts:

总结：