Webpack + Angular2 require in template

[galsch]

Hi,

I'm using Webpack + Angular2 with the raw-loader. In my app I'm using something like:

@component({
selector: 'test',
template: require('./test.component.html')
})

However, I get the following error:

Error:(22, 12) TS2345: Argument of type '{ selector: string; template: {}; directives: Type[][]; }' is not assignable to parameter of type '{ selector?: string; inputs?: string[]; outputs?: string[]; properties?: string[]; events?: strin...'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string'.

I fix it by using:
@component({
selector: 'test',
template: "" + require('./test.component.html') + ""
})

How can this issue be fixed?

Thanks

[aluanhaddad]

@galsch Create a file named ./test.component.html.ts containing solely

export default "";

Edit: this is for an environment where there is no require function

[galsch]

@aluanhaddad I created a new file with the line you gave, without doing any other changes - and I still get the same error.

Also, I want to have a solution that won't make me add a counterpart .ts file for every .html files.

Looking at https://github.com/AngularClass/angular2-webpack-starter - Angular2 + Webpack started Kit they were able to achieve it without any TypeScript errors.

Take a look at https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/app/home/home.component.ts

I'm not sure how they were able to achieve this without TypeScript errors.

[aluanhaddad]

If you clone the repo and run npm install it should work correctly. Note that template is being given type any due to the definition of NodeRequire in 'typings/browser/ambient/node'. You actually do not need to create the additional file I mentioned because the provided require function will always pass the typechecker if given a string.

[galsch]

@aluanhaddad I have created a much simpler Webpack + Angular2 project which don't have all the configurations from https://github.com/AngularClass/angular2-webpack-starter and I want to take only the necessary minimum out of that repo.

Currently in my project I get the TypeScript error.

I've changed my typings.json file with

"node": "github:DefinitelyTyped/DefinitelyTyped/node/node.d.ts#8cf8164641be73e8f1e652c2a5b967c7210b6729"

I ran typings install - but I still get the same TypeScript error.

Are you sure this what fixed the TypeScript error?

[aluanhaddad]

What compiler version and compiler settings are you using? Can you publish your repository?

[galsch]

@aluanhaddad You rock - thanks! After adding the node into typings.json and making some cleaning in my project - it finally worked.

Thanks - issue can now be closed.

[RyanCavanaugh]

Thanks for helping out @aluanhaddad !

[aluanhaddad]

Gladly.

[aluanhaddad]

@okian the cast is irrelevant.

[aluanhaddad]

With TS 2.0+ you can now write

declare module '*.html' {
    export = '';
}

In a top level declaration file. and use the import statement.