Angular using a template path to an html file

Question

Trying to better understand the @component selector and template to path my routing to an html file. I am getting errors when trying to simply point to the html file even though it seems I have what I need in my index.ts files. The errors I am getting are:

Looking at the involved files, I am not sure what is wrong. Here is my user.component.ts:

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

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

Then my index.ts from the root of 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 {}

And finally, my index.ts from the root of my /src:

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

Where I am going wrong on this? I don't see any issues. Am I not using template correctly? Seems I should be able to inject html or add a path to the html file, no?

Per the first answer, it fixed part of it, but not understanding why now it doesn't understand the path. The console no longer out puts an error, but the page does not load in the browser. Here is the error:

And here is a screenshot of my file structure:

Answer 1

Looking at your component folder and code. I feel that the path to the component html is incorrect. Try this code and see.

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

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

Answer 2

Add moduleID in @component

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