Office Add-in Angular app by Yeoman generator: Component must have a template or templateUrl [with Webpack], even though it's declared

Question

We are using Webpack and Angular template with require syntax like below in officeJS Add-In.

@Component({
    moduleId: module.id.toString(),
    selector: 'list',
    template: require('./list.html')
})

We are getting error Component 'List' must have a template or templateUrl on Component declaration.

I don't have much detail about Webpack, but with templateUrl application not working (might be because of with webpack/system.js), Application is not able to get HTML by templateUrl at runtime.

But core problem with above require syntax is I'm not getting intellisense in template HTML w.r.t associated component by Angular Language Service.

I found one open issue on GitHub for this require syntax https://github.com/angular/angular/issues/23553

Considering solution for template syntax, Do we have any alternative solution where intellisense and webpack both can work together?

We are using Angular 4 and "webpack": "^4.41.5", but I think this issue exists for higher Angular version as well, based on above GitHub post.

Recent Observation:

I tried with new Angular Project from scratch for OfficeJS as per https://learn.microsoft.com/en-us/office/dev/add-ins/quickstarts/word-quickstart?tabs=yeomangenerator here as well facing same issue with default webpack configuration, seems there might be some limitation.

Answer 1

Looking at the code of the current version (11.1.2) says that this error only occurs when

template === null && !templateUrl

Since you aren't passing in templateUrl then that must mean that template is null.

I don't know if this is the same issue but here are some things I had to work through to get this process working for me. It might shed some light on what your issues might be.

The template part assumes it is being passed a string so I had to figure out how to load the whole template into a string for that part of the component. Here is what I settled on.

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

import template from './foo.html'

@Component({
    selector: 'foo',
    template
})
export class FooComponent {}

Combined with the webpack html-loader, which exports html as string, this then loads the html into my javascript as a string for each component.

However, typescript didn't like this so I had to create a definition file for html so that it knew I was expecting it to a string.

declare module '*.html' {
    const _: string;
    export default _;
}

And with that in place everything works.