2

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.

Maulik
  • 510
  • 1
  • 7
  • 22
  • what raw-loader version do you use in package.json? – Raz Ronen Jan 11 '21 at 19:23
  • It seems we have consumed "file-loader": "^5.0.2" and "html-loader": "^0.5.5" only in webpack config, haven't used raw-loader, is it must to use? – Maulik Jan 12 '21 at 03:57

1 Answers1

0

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.

Matthew Green
  • 10,161
  • 4
  • 36
  • 54
  • Hi @MatthewGreen, still after creating definition file for html and importing html as above, getting `Component 'AppComponent' must have a template or templateUrl` seems its still not able to locate html, and no intellisense in HTML for component functions (vice versa), just to mention I created custom typings file and imported in "typeRoots" of tsconfig.json – Maulik Feb 09 '21 at 06:34
  • You might confirm that you are getting a string for your template. Maybe just a simple file with a console.log of your variable. It could be a problem with the way you have webpack set up. – Matthew Green Feb 09 '21 at 21:55
  • In my case, 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 – Maulik Apr 29 '21 at 11:54