Angular 如何设置templateUrl和StyleURL

我制作了一个小应用程序，但它都在app.component.ts中。现在，我正在尝试将其分解为单独的组件和服务。作为第一步，我尝试将代码拆分为单独的组件。 但是我无法设置templateUrl和StyleURL。我得到的代码和错误如下所示。 这是我的app.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { AppComponent } from "./app.component";
import { routes, navigatableComponents } from './app.routing';
import { SearchComponent } from './search-component/search.component';

@NgModule({
  imports: [
    NativeScriptModule,
    NativeScriptFormsModule,
    NativeScriptHttpModule,
    NativeScriptRouterModule,
    NativeScriptRouterModule.forRoot(routes)
  ],
  declarations: [AppComponent, SearchComponent],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule { }

app.routing.ts文件

app.component.ts

---

GitHub存储库

再添加一个moduleId属性：

如果我们选择CommonJS格式并使用标准模块加载器， 然后我们可以使用module.id变量，该变量包含绝对URL 组件类的[当实际加载模块文件时]： 确切的语法是moduleId:module.id

此moduleId值由使用 角度反射过程和元数据_解析器组件 在创建组件之前评估完全限定组件路径的步骤 建造的

普通的

例如，在rootroot模块中声明这个对象

declare var module: {
    id: string;
};

以及本文中的更多配置：

---

顺便说一句，你可以将webpack用于bundle或scaffolding应用程序。

尝试在app.component.ts中使用“/app.component.css”@Jerry06它工作正常。但当我尝试为search.component.ts提供单独的文件时，出现了问题。这起作用了，但只是部分地，我添加了moduleId:module.id。我没有声明那个对象。您能指定我需要在哪里声明它吗？app.module.ts？我也在我的问题中加入了github回购协议。现在iOS应用程序运行良好，android应用程序仍然像sametsconfig.json{compilerOptions:{module:commonjs，target:es5}}一样，并将您的声明放入app.module即可。

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

@Component({
  selector: "my-app",
  template: `
  <ActionBar title="Glossary" class="action-bar"></ActionBar>
  <page-router-outlet></page-router-outlet>`,
  styleUrls: ["app.component.css"]
})
export class AppComponent {

}

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

@Component({
    selector: "my-app",
    template: `<Label text="search Here" class="small-spacing"></Label>`
})
export class SearchComponent {
  constructor(){
  }
}

04-28 08:38:11.072  5202  5202 W System.err:    at com.tns.Runtime.callJSMethodNative(Native Method)
04-28 08:38:11.072  5202  5202 W System.err:    at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1197)
04-28 08:38:11.072  5202  5202 W System.err:    at com.tns.Runtime.callJSMethodImpl(Runtime.java:1061)
04-28 08:38:11.072  5202  5202 W System.err:    at com.tns.Runtime.callJSMethod(Runtime.java:1047)
04-28 08:38:11.072  5202  5202 W System.err:    at com.tns.Runtime.callJSMethod(Runtime.java:1028)
04-28 08:38:11.072  5202  5202 W System.err:    at com.tns.Runtime.callJSMethod(Runtime.java:1018)

@Component({
    moduleId: module.id
    selector: "my-app",
    templateUrl: './reative/path'
})
export class SearchComponent {
  constructor(){
  }
}

declare var module: {
    id: string;
};