[QUESTION] Cannot resolve symbol 'require'

[rbasniak]

Hi,

I'm a developer with pure desktop background and I'm starting to learn web development now with ASP.NET Core and Angular 2, so please forgive me if this is a stupid question =)

I downloaded this new updated version for Angular 2 final and I'm getting an error on all component files telling me that it 'Cannot resolve symbol require' on the template: require('./name.component.html').

Other projects I came across use typings and to resolve such errors I just drag the index.d.ts from the typings folder to my AppModule and unresolved names errors go away.

But this new version does not use typings. Based on this I would like to ask 3 questions:

1. Is there any way to remove the error on the require symbol? Application is running and working, it's just that's this is annoying.

2. Why is the require required? Why I can't just use templateUrl instead with the filename?

3. On all other tutorials I port to Asp.Net Core if I didn't reference the index.d.ts from the typings folder I get a lot of errors of unresolved symbols, like Promisse, Map, etc. But this does not happens with your Angular 2 template. Where are the typings definitions coming from?

By the way, great job with this project!!! Also this is the first and only setup I could replicate on a blank project using Angular and Webpack... Really thanks!

[MarkPieszak]

Hey @rbasniak

1. I'm actually not sure why it is showing up, it should be fine since we're including @types/node. Do you have VisualStudio setup to be using TypeScript 2.0?
   (You may need to install an extension to get TS2 going, check the marketplace, I believe you may need something like https://visualstudiogallery.msdn.microsoft.com/3ced0111-246b-498a-bb5d-44a51e6f6abe) In VSCode, require wasn't error'ing out for me.

2. require is required since TypeScript itself doesn't know what it is, so it needs to have some sort of provided Type Definitions for it.

3. The project is now using TypeScript 2._, which deprecated both tsd & typings, in favor of @types which are essentially the same as typings, except located in node_modules/@types/.. and can be installed directly through _npm* instead of the 3rd party, typings installer. Makes life easier 👍
   You won't get errors for Promise etc anymore, because with TS2, we have a lib compilerOption

"lib": ["es6", "dom"],

This is pulling in Type definitions for all things ES6 and DOM related. Things which are now bundled with TypeScript, instead of separate definitions.

Hope that helps!

[SteveSandersonMS]

1. @MarkPieszak is correct - this happens if you don't have VS or VS Code using TypeScript 2.0 tooling, so you'll need to update that. It's awkward that we had to take a dependency on TS 2.0 even before it shipped (it's a 3rd party library dependency). For now, VS users need to install TypeScript 2.0 RC for Visual Studio 2015.

2. "Why I can't just use templateUrl instead with the filename?" You can do that, but then the browser will have to fetch the .html files at runtime using ajax requests, which is spectacularly inefficient compared with compiling them into your app's JS bundles (which is what Webpack does with require references).

[rbasniak]

@MarkPieszak @SteveSandersonMS

I manually updated TS extension on VS to 2.0 but the 'require' wasn't being indentified yet. It turns out that it was Resharper who was complaining about it, if I disable Resharper then I get no errors on the 'require' statement.

Thank you both for these detailed explanations, specially about the typings, I wasn't aware that TS 2.0 changed that much.