Skip to content
This repository has been archived by the owner on Oct 9, 2020. It is now read-only.

Using this plugin gives me typescript compile errors #34

Open
dfgkzhang opened this issue May 10, 2016 · 5 comments
Open

Using this plugin gives me typescript compile errors #34

dfgkzhang opened this issue May 10, 2016 · 5 comments

Comments

@dfgkzhang
Copy link

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
Copy link

aluanhaddad commented May 11, 2016

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
Copy link

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

@aluanhaddad
Copy link

aluanhaddad commented Sep 23, 2016

@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
Copy link

abidmix commented Sep 26, 2016

@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

image

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
Copy link

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants