No ResourceLoader for Angular component templateUrl if URL contains hyphen

[mpalmer-sps]

I am using the SPAtemplates outlined in this blog and just updated to .NetCore 2 because the templates no longer appear unless you update: "https://blogs.msdn.microsoft.com/webdev/2017/02/14/building-single-page-applications-on-asp-net-core-with-javascriptservices/" with Visual Studio 2017.

The behavior I'm seeing is that once the TS file references an HTML TemplateURL file from with a hyphen in the name the error: "NodeInvocationException: No ResourceLoader implementation has been provided. Can't read the url "whatever-whatever.component.html""

Despite deleting and recreating the files this error persists but that may be some form of caching - I have yet to exhaust all options after deleting.

Switching to a standard inline template works but this breaks whenever a templateUrl is used (even if you rename the file and remove the hyphen). Creating a new component with a new html display template without a hyphen works well. So this is very easy to reproduce.

Is there anything that can be checked? Keep in mind that I've not modified the csproj file in any way - just adding new components so the <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> is still there and there are no "extra" js or map files.

[SteveSandersonMS]

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.

[mpalmer-sps]

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.

[mpalmer-sps]

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)

[SteveSandersonMS]

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.

[mpalmer-sps]

Thanks Steve! that seems to work, can you provide how you figured that out?

[dneimke]

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