No ResourceLoader for Angular component templateUrl if URL contains hyphen #1224

Activity

1. SteveSandersonMS commented on Aug 24, 2017

   

   SteveSandersonMS

   on Aug 24, 2017

   Member

   More actions

   As per my other comment, I'm afraid I wasn't able to reproduce this.

   If you are still seeing this even with the latest .NET Core 2.0 Angular template, would you be able to post a minimal sample project to GitHub? Otherwise I'm not sure how to proceed with this, as it all seems to work fine when I try.
2. mpalmer-sps commented on Aug 24, 2017

   

   mpalmer-sps

   on Aug 24, 2017

   Author

   More actions

   Hi @SteveSandersonMS , I'm going to upload a new GitHub repo for this and will share the link shortly along with steps I'm taking to create the project.
3. mpalmer-sps commented on Aug 24, 2017

   

   mpalmer-sps

   on Aug 24, 2017

   Author

   More actions

   Hello @SteveSandersonMS , I've prepared a GitHub for this and can immediately reproduce the issue : https://github.com/mpalmer-sps/SandboxTemplateUrlIssue

   My current SDK version (I think) is below:
   C:\Windows\system32>dotnet --info
   .NET Command Line Tools (2.0.0)

   Product Information:
   Version: 2.0.0
   Commit SHA-1 hash: cdcd1928c9

   Runtime Environment:
   OS Name: Windows
   OS Version: 10.0.15063
   OS Platform: Windows
   RID: win10-x64
   Base Path: C:\Program Files\dotnet\sdk\2.0.0\

   Microsoft .NET Core Shared Framework Host

   Version : 2.0.0
   Build : e8b8861ac7faf042c87a5c2f9f2d04c98b69f28d

   Steps I took to setup the project (not including the Git portion):

   1. run command : dotnet new angular
   2. run command: dotnet restore
   3. run command: npm install
   4. Once Done open the CSProject file in Visual Studio 2017 Enterprise
   5. Save all files to save the SLN file
   6. Run the project in "start without debugging" mode
   7. Verify that the base project works in its basic form - all good
   8. Created a component and HTML Template called "hyphen-test" in the Hyphens folder that I created
   9. Leverage the Template property for output in the test component and add it to the app.module.shared.ts as well as the selector in the home.component.html - all good
   10. Add HTML content to the hyphen-test.component.html file and switch to using a templateUrl property using both " templateUrl: './hyphen-test.component.html'" and " templateUrl: 'hyphen-test.component.html'"

   In both cases an error is displayed as follows:

   An unhandled exception occurred while processing the request.
   NodeInvocationException: No ResourceLoader implementation has been provided. Can't read the url "hyphen-test.component.html"
   Error: No ResourceLoader implementation has been provided. Can't read the url "hyphen-test.component.html"
   at Object.get (C:\Projects\SandboxTemplateUrlIssue\ClientApp\dist\vendor.js:62734:15)
   at DirectiveNormalizer.module.exports.DirectiveNormalizer._fetch (C:\Projects\SandboxTemplateUrlIssue\ClientApp\dist\vendor.js:49463:43)
4. SteveSandersonMS commented on Aug 24, 2017

   

   SteveSandersonMS

   on Aug 24, 2017

   Member

   More actions

   Thanks for providing the repro. I can see what the issue is now. You might find it surprising, but it's this: TheLarkInn/angular2-template-loader#55

   Unfortunately angular2-template-loader throws this error if your @Component({ ... }) block contains comments in certain places. And your hyphen-test.component.ts file contains this in its @Component({ ... }) block:

   //template: '<div>Hello from Hyphen Test as a template property</div>'
   

   If you remove that line things will start working. It doesn't have anything to do with hyphens.

   If you want this issue to be fixed, please consider submitting a PR to the angular2-template-loader project.
5. SteveSandersonMS

   closed this as completedon Aug 24, 2017
6. mpalmer-sps commented on Aug 24, 2017

   

   mpalmer-sps

   on Aug 24, 2017

   Author

   More actions

   Thanks Steve! that seems to work, can you provide how you figured that out?
7. dneimke commented on Oct 4, 2017

   

   dneimke

   on Oct 4, 2017

   More actions

   I had similar the same (similar?) issue and solved it by:

   • Deleting node_modules and doing another npm install
   • Manually removing all obj/Release and obj/Debug content
   • Manually deleting all generated .js files throughout the app and making sure that tsconfig was configured correctly