Angular aot build error–No template specified for component

A colleague sent me the following screenshot with an error he got after switching to an AOT build in Angular:

Here is the related TypeScript file for this component:

	import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from "@angular/core";
	import { CommonModule } from "@angular/common";
	@Component({
	selector: 'snapp-perceel-list',
	template: require('./perceel-list.component.html'),
	styles: [require('./perceel-list.component.css')]
	})
	export class PerceelListComponent implements OnInit, OnChanges {
	}

view raw perceel-list.component.ts hosted with ❤ by GitHub

The problem was caused by the “template: require('./perceel-list.component.html')” statement in the component file. The aot build doesn’t like it when you try to resolve html templates dynamically.

Removing the require and just using the templateUrl instead solved the problem:

	import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from "@angular/core";
	import { CommonModule } from "@angular/common";
	@Component({
	selector: 'snapp-perceel-list',
	templateUrl: './perceel-list.component.html',
	styleUrls: ['./perceel-list.component.css']
	})
	export class PerceelListComponent implements OnInit, OnChanges {
	}

view raw perceel-list.component.ts hosted with ❤ by GitHub