javascript - 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:

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);

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

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

这是我的文件结构的屏幕截图:

Answer 1

查看您的组件文件夹和代码。我感觉组件html的路径不正确。尝试此代码并查看。

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

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