Angular 使用 html 文件的模板路径

Question

试图更好地理解@component 选择器和模板，以将我的路由指向一个 html 文件。尝试简单地指向 html 文件时出现错误，即使我的 index.ts 文件中似乎有我需要的内容。我得到的错误是：

查看涉及的文件，我不确定出了什么问题。这是我的 user.component.ts：

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

@Component({
  selector: 'users',
  template: require('./components/userMgmt/inviteUser.html')
})
export class userComponent {}

然后我的 index.ts 来自 app 的根目录：

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import 'jquery';
import 'bootstrap';
import 'font-awesome/css/font-awesome.css';

import {routing, RootComponent} from './routes';
import {AppComponent} from './containers/app';
import {HeaderComponent} from './components/header';
import {userComponent} from './components/userMgmt/user.component';

@NgModule({
  imports: [
    BrowserModule,
    routing
  ],
  declarations: [
    RootComponent,
    AppComponent,
    HeaderComponent,
    userComponent
  ],
  bootstrap: [RootComponent]
})
export class AppModule {}

最后，我的 /src 根目录下的 index.ts：

import 'core-js/client/shim';
import 'zone.js/dist/zone';

import '@angular/common';
import 'rxjs';

import './index.scss';

import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {AppModule} from './app';


declare var process: any;
if (process.env.NODE_ENV === 'production') {
  enableProdMode();
} else {
  Error['stackTraceLimit'] = Infinity; // tslint:disable-line:no-string-literal
  require('zone.js/dist/long-stack-trace-zone'); // tslint:disable-line:no-var-requires
}

platformBrowserDynamic().bootstrapModule(AppModule);

我在哪里出错了？我没有看到任何问题。我没有正确使用模板吗？似乎我应该能够注入 html 或添加 html 文件的路径，不是吗？

根据第一个答案，它修复了部分问题，但不明白为什么现在它不了解路径。控制台不再出现错误，但页面未在浏览器中加载。这是错误：

这是我的文件结构的截图：

Answer 1

在@component 中添加moduleID

 @Component({
      selector: 'users',
      moduleId: module.id,
      templateUrl: './inviteUser.html'
 })

Answer 2

查看您的组件文件夹和代码。感觉组件html的路径不对。试试这段代码看看。

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

@Component({
  selector: 'users',
  templateUrl: './inviteUser.html'
})
export class userComponent {}