No ResourceLoader for Angular component templateUrl in ASP.NET Core (.NET Framework)

[JaimeStill]

Built an ASP.NET Core (.NET Framework) Empty web project, and installed the following NuGet Packages:

• Microsoft.AspNetCore (1.1.2)
• Microsoft.AspNetCore.Mvc (1.1.3)
• Microsoft.AspNetCore.SpaServices (1.1.1)
• Microsoft.AspNetCore.StaticFiles (1.1.2)
• Microsoft.Extensions.Logging.Debug (1.1.2)

Mirrored the aspnetcore-spa Angular template with the following modifications:

• Renamed ClientApp (and all references) to src
• Installed semantic-ui-css instead of bootstrap

This same setup works fine in an ASP.NET Core web app that targets .NET Core, but when targeting .NET Framework, I get the following exception:

Exception: Call to Node module failed with error: Error: No ResourceLoader implementation has been provided. Can't read the url "app.component.html" at Object.get (..src\dist\vendor.js:53089:15)

The only way to get rid of this error is to change component template URLs as follows:

templateUrl: './app.component.html' // throws error

to

template: require('./app.component.html') // works just fine

The full project can be found in this GitHub Repo

[MarkPieszak]

You need angular2-template-loader setup in your webpack config or be using ngtools/webpack to be able to handle string relative URLs like that.

[JaimeStill]

angular2-template-loader is already installed and configured in webpack:

package.json

"angular2-template-loader": "0.6.2"

webpack.config.js

module: {
    rules: [
        { test: /\.ts$/, include: /src/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] }

[SteveSandersonMS]

I'm surprised that you're seeing a difference in Webpack's behaviour based on whether your server is .NET Core or .NET Full Framework. Webpack should not know about or be affected by this.

Can you track this down to a specific bug in code in this repo? If not, I'd guess it's more likely that there's some other difference between your two applications.

[JaimeStill]

I appreciate you guys taking time to help with this. As far as I've been able to tell, the issue pops up whenever .NET Framework is targeted instead of .NET Core.

To demonstrate, I did a clean run of yo aspnetcore-spa with version 0.9.3 and selected the Angular framework and took the following steps:

• Once the project was scaffolded, I modified the .csproj in Visual Studio Code to the following:

<PropertyGroup>
    <TargetFramework>net461</TargetFramework>
    <RuntimeIdentifier>win7-x86</RuntimeIdentifier>
</PropertyGroup>

• I then opened the project in Visual Studio Pro 2017 and attempted to debug with IIS Express. .UseWebpackDevMiddleware in Startup threw an exception about being unable to load System.Diagnostics.DiagnosticsSource, so I updated Microsoft.AspNetCore to v1.1.2 and Microsoft.AspNetCore.Mvc to v1.1.3.

When attempting to run the app at this point, the No ResourceLoader implementation exception is shown.

This demonstration is loaded into this GitHub Repo.

[SteveSandersonMS]

I think the issue in your case is completely unrelated to what you're describing. I think the problem is that you've removed the <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked> property from your csproj, which causes VS to spew garbage .js files all over your source directories (e.g., see all the .js and .js.map files in your ClientApp dir). This in turn breaks module resolution, hence being unable to load files.

You'll need to remove all the bad files and put <TypeScriptCompileBlocked> back :)

[JaimeStill]

Thanks @SteveSandersonMS! When I modified .csproj, I just made the initial <PropertyGroup> section look like what is generated by the .NET Framework project, incorrectly assuming that the initial settings were relevant to .NET Core.

[mpalmer-sps]

I would say that this is not closed. I am using the SPAtemplates outlined in this blog: "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 project references an HTML file from a Typescript file leveraging an HTML file with a hyphen in the name the error: "NodeInvocationException: No ResourceLoader implementation has been provided. Can't read the url "whatever.component.html""

Despite deleting and recreating the files this error persists. Switching to a standard inline template works but this breaks whenever a templateUrl is used.

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.

[SteveSandersonMS]

@mpalmer-sps Using the current templates (i.e., the Angular 4 template produced by dotnet new angular in .NET Core 2.0 SDK), I was unable to reproduce any issue with this. Templates with hyphens in their name are working fine via templateUrl. Could you check whether your issue can be reproduced using the latest template?

[sujithpattambi]

Guys,
I had the same issue, And I am able to resolve this by adding a comma "," after the templateUrl
@component({
selector: 'case',
templateUrl: './case.component.html' ,
})

Hope this will fix the issue

[MarkPieszak]

Sounds like you have the wrong version of angular template loader @sujithpattambi

[claylaut]

I had the same issue and in my case, it was a comment in @Component