Using this plugin gives me typescript compile errors

[dfgkzhang]

Adding this import to my component, import template as "./FooterComponent.html!text", will cause the typescript compiler to log an error TS2307: Cannot find module './FooterComponent.html!text'. This happens for all html imports, but doesn't happen for css imports using plugin-css. Is it possible to fix this as it causes a lot of noise when compiling typescript.

[aluanhaddad]

TypeScript reports an error because there is no module named ./FooterComponent.html!text in it's compilation context. There is indeed no such module.

To illustrate this, imagine we are using meta to automatically apply the text plugin. In that case our import would look like import footerTemplate from './FooterComponent.html';. Clearly the file exists, but it is also clearly not a module.

There are two work arounds which mitigate this issue.

1. Ambient module declarations and absolute path imports:
   Create a file named my-temlates.d.ts with the content

declare module 'app/components/footer/FooterComponent.html!text' {
    export default '';
}

Now you can import your template without errors with import footerTemplate from 'app/components/footer/FooterComponent.html!text';.

1. Per template dummy modules and relative path imports:
   Create a file in the same location as the template with the name app/components/footer/FooterComponent.html!text.ts and the content

export default '';

Personally, while the second approach requires creating more files and is a bit more noisy, I find it to be more maintainable.

[aluanhaddad]

By the way, the TypeScript team is looking to make this easier. See microsoft/TypeScript#6615

[aluanhaddad]

@dfgkzhang, @guybedford TypeScript 2.0 (2.0.3) was officially released yesterday. It contains new ambient module declaration syntax specifically to handle importing files such as html templates.
Specifically

declare module "*.html" { 
  const html: string;
  export default html; 
} // allows importing any .html file and gives it type string

declare module "*.json" {
  var json: any[] | { [key: string]: any; };
  export default json; 
}

These wildcards work for any extension.

This is no longer an issue for SystemJS users.

[abidmix]

@aluanhaddad I am still having an issue when I try to bundle. I have created an ambient module declaration like this
declare module "*.html" { var __html__: string; export default __html__; }

And in my imports

var DLATemplate = require('/Template/activity/ActivityDla.html')

@component({
selector: 'activities-dla',
template: DLATemplate,
})

This builds fine and works fine unbundled but I am having issues when trying to bundle
On bundling I get this error

I also have this line in my system.config

meta: { "*.html": { loader: 'text' } },
Am not sure why I am getting this error since I am not trying to read a folder here. I am running the angular 2.0.0 version

[aluanhaddad]

That's an odd error, but it's not related to this issue. This issue regards the TypeScript compiler displaying error messages because it did not understand that the HTML files are transformed into modules by the loader. It never had any effect on SystemJS runtime behavior or builder behavior.
I think you're experiencing a different issue because this issue was all about static type checking and not about code emit. Even when the compiler would emit these errors it had no effect on the loading of the actual templates.