Repository navigation
Webpack + Angular2 require in template #8514
Description
Hi,
I'm using Webpack + Angular2 with the raw-loader. In my app I'm using something like:
Components (@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:
Components (@component)({
selector: 'test',
template: "" + require('./test.component.html') + ""
})
How can this issue be fixed?
Thanks
Activity
aluanhaddad commentedon May 8, 2016
Gal (@galsch) Create a file named ./test.component.html.ts containing solely
Edit: this is for an environment where there is no require function
galsch commentedon May 8, 2016
Aluan Haddad (@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 commentedon May 8, 2016
If you clone the repo and run npm install it should work correctly. Note that template is being given type
anydue to the definition ofNodeRequirein'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 commentedon May 8, 2016
Aluan Haddad (@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
I ran typings install - but I still get the same TypeScript error.
Are you sure this what fixed the TypeScript error?
aluanhaddad commentedon May 8, 2016
What compiler version and compiler settings are you using? Can you publish your repository?
galsch commentedon May 8, 2016
Aluan Haddad (@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 commentedon May 9, 2016
Thanks for helping out Aluan Haddad (@aluanhaddad) !
aluanhaddad commentedon May 9, 2016
Gladly.
aluanhaddad commentedon Sep 4, 2016
Kian Ostad (@okian) the cast is irrelevant.
aluanhaddad commentedon Sep 4, 2016
With TS 2.0+ you can now write
In a top level declaration file. and use the
importstatement.