Unable to start project after generating with Yeo

[morganjs07]

I had been using this template for some time and suddenly my project is unable to locate any components. Stating 404 GETs on all componentname.html files.

I attempted to start a fresh project with no changes made to see if I did something wrong.
Generated an angular 2.0.2 project that was not the experimental one.

Did dotnet run and the application will start and the API will work but the client UI will fail with the following:

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: Error: No ResourceLoader implementation has been provided. Can't read the url "counter.component.html"
at Object.get (C:\Code\please\ClientApp\dist\vendor.js:43828:17)
at DirectiveNormalizer._fetch (C:\Code\please\ClientApp\dist\vendor.js:39786:45)
at DirectiveNormalizer.normalizeTemplateAsync (C:\Code\please\ClientApp\dist\vendor.js:39829:23)
at DirectiveNormalizer.normalizeDirective (C:\Code\please\ClientApp\dist\vendor.js:39804:46)
at RuntimeCompiler._createCompiledTemplate (C:\Code\please\ClientApp\dist\vendor.js:43218:210)
at C:\Code\please\ClientApp\dist\vendor.js:43156:43
at Array.forEach (native)
at C:\Code\please\ClientApp\dist\vendor.js:43154:50
at Array.forEach (native)
at RuntimeCompiler._compileComponents (C:\Code\please\ClientApp\dist\vendor.js:43153:45)

Thank you for any help.

[MarkPieszak]

Have you removed angular2-template-loader from webpack or your installs? It's definitely something about that that's causing it.

In general, to use templateUrl or styleUrls you must use angular2-template-loader in your TypeScript loaders.

Take a look at my comment here:
angular/universal#579 (comment)

[morganjs07]

Sorry if I'm coming off as clueless. I'm very new to this process.

I haven't removed anything at all from the generated project.
Could you clarify from your installs?

Your comment is what I found when googling.
The webpack.config.js file is untouched and matches.

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

If I do as the comment suggests: templateUrl: to template:require('') it works but am I supposed to do that for all files now or is a change coming?

Or should I be doing what waterfoul suggested in that post?

Is there anything else I could do to help? I've also tried your other git repo (ang2univ) and seem to be having the same issue.

[RayMartinshair]

I can confirm that I am see the same behavior/error when generating a new project via

yo aspnetcore-spa

Error:

fail: Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware[0]
  An unhandled exception has occurred: Call to Node module failed with error: Error: No ResourceLoader implementation has been provided. Can't read the url "counter.component.html"
at Object.get (C:\Code\Ng2Spa\ClientApp\dist\vendor.js:43828:17)
at DirectiveNormalizer._fetch (C:\Code\Ng2Spa\ClientApp\dist\vendor.js:39786:45)
at DirectiveNormalizer.normalizeTemplateAsync (C:\Code\Ng2Spa\ClientApp\dist\vendor.js:39829:23)
at DirectiveNormalizer.normalizeDirective (C:\Code\Ng2Spa\ClientApp\dist\vendor.js:39804:46)
at RuntimeCompiler._createCompiledTemplate (C:\Code\Ng2Spa\ClientApp\dist\vendor.js:43218:210)
at C:\Code\Ng2Spa\ClientApp\dist\vendor.js:43156:43
at Array.forEach (native)
at C:\Code\Ng2Spa\ClientApp\dist\vendor.js:43154:50
at Array.forEach (native)
at RuntimeCompiler._compileComponents (C:\Code\Ng2Spa\ClientApp\dist\vendor.js:43153:45)

System.Exception: Call to Node module failed with error: Error: No ResourceLoader implementation has been provided. Can't read the url "counter.component.html"
at Object.get (C:\Code\Ng2Spa\ClientApp\dist\vendor.js:43828:17)
at DirectiveNormalizer._fetch (C:\Code\Ng2Spa\ClientApp\dist\vendor.js:39786:45)
at DirectiveNormalizer.normalizeTemplateAsync (C:\Code\Ng2Spa\ClientApp\dist\vendor.js:39829:23)
at DirectiveNormalizer.normalizeDirective (C:\Code\Ng2Spa\ClientApp\dist\vendor.js:39804:46)
at RuntimeCompiler._createCompiledTemplate (C:\Code\Ng2Spa\ClientApp\dist\vendor.js:43218:210)
at C:\Code\Ng2Spa\ClientApp\dist\vendor.js:43156:43
at Array.forEach (native)
at C:\Code\Ng2Spa\ClientApp\dist\vendor.js:43154:50
at Array.forEach (native)
at RuntimeCompiler._compileComponents (C:\Code\Ng2Spa\ClientApp\dist\vendor.js:43153:45)
at Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance.d__7`1.MoveNext()

[morganjs07]

Ok now I'm more confused. It was only files that do not have a styleUrls property on the component. If I add one then the file/component is found. Not sure if that helps any.

It helps me at the moment since my issue is fixed by adding a bunch of blank css files and styleUrls properties to these components.

[MarkPieszak]

It might be a bug in a recent update that was made to angular2-template-loader or something like that, especially if it's out of no where. It might be looking for them and trying to get the files (when you never even put down a filename) like you were just saying @sutherlandm2

[morganjs07]

I think it is related to this. #TheLarkInn/angular2-template-loader#50
For me the easiest solution is just locking it to "angular2-template-loader": "0.6.0",.

Changed to reflect correct issue.

[MarkPieszak]

There it is! Hopefully Sean will patch it soon.

[denvercoder]

None of these methods worked for me. I have angular2-template-loader locked to 0.6.0. If I replace templateUrl: with template: it will load the project but on all three pages I see:

"./home.component.html"

"./fetchdata.component.html"

"./counter.component.html"

fail: Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware[0] An unhandled exception has occurred: Call to Node module failed with error: Error: No ResourceLoader implementation has been provided. Can't read the url "counter.component.html" at Object.get (/Users/dev/projects/test/ClientApp/dist/vendor.js:43828:17) at DirectiveNormalizer._fetch (/Users/dev/projects/test/ClientApp/dist/vendor.js:39786:45) at DirectiveNormalizer.normalizeTemplateAsync (/Users/dev/projects/test/ClientApp/dist/vendor.js:39829:23) at DirectiveNormalizer.normalizeDirective (/Users/dev/projects/test/ClientApp/dist/vendor.js:39804:46) at RuntimeCompiler._createCompiledTemplate (/Users/dev/projects/test/ClientApp/dist/vendor.js:43218:210) at /Users/dev/projects/test/ClientApp/dist/vendor.js:43156:43 at Array.forEach (native) at /Users/dev/projects/test/ClientApp/dist/vendor.js:43154:50 at Array.forEach (native) at RuntimeCompiler._compileComponents (/Users/dev/projects/test/ClientApp/dist/vendor.js:43153:45)

[lgtelles]

To solve this i did the following
replace (and every templateUrl)

templateUrl: './app.component.html',

to
template: require('./app.component.html'),

[lgtelles]

I can make a change on the template repo to reflect this fix.

[btmadison]

To clarify what worked for me, I had to BOTH lock the version of the template loader and replace the templateUrl with template: require... - FYI I did this with the experimental yo that installs angular 2.4.5

[ricky68]

This is still happening for me with angular 2.0.2
I've made both the changes suggested here but it doesn't seem to make any difference to the error for me.

fail: Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware[0]
An unhandled exception has occurred: Call to Node module failed with error: Error: No ResourceLoader implementation has been provided. Can't read the url "counter.component.html"

[derricksimpson]

After working with variations of versions for about 2 hours, I was finally able to get the latest 2.4.5 template to work with angular v2.4.6.

I think it was angular2-template-loader getting updated to 0.6.1 (2/5/2016), but reverting it alone didn't solve all my problems, so I finally went with this:

Note: I stripped out the ^.

"dependencies": {
"@angular/common": "2.4.6",
"@angular/compiler": "2.4.6",
"@angular/core": "2.4.6",
"@angular/forms": "2.4.6",
"@angular/http": "2.4.6",
"@angular/platform-browser": "2.4.6",
"@angular/platform-browser-dynamic": "2.4.6",
"@angular/platform-server": "2.4.6",
"@angular/router": "3.4.6",
"@types/node": "6.0.62",
"angular2-platform-node": "2.1.0-rc.1",
"angular2-template-loader": "0.6.0",
"angular2-universal": "2.1.0-rc.1",
"angular2-universal-patch": "0.2.1",
"angular2-universal-polyfills": "2.1.0-rc.1",
"aspnet-prerendering": "2.0.3",
"aspnet-webpack": "1.0.27",
"awesome-typescript-loader": "3.0.0-beta.13",
"copy-webpack-plugin": "4.0.1",
"css": "2.2.1",
"css-loader": "0.25.0",
"es6-shim": "0.35.1",
"event-source-polyfill": "0.0.7",
"expose-loader": "0.7.1",
"extract-text-webpack-plugin": "2.0.0-rc.2",
"file-loader": "0.9.0",
"font-awesome": "4.7.0",
"html-loader": "0.4.4",
"isomorphic-fetch": "2.2.1",
"json-loader": "0.5.4",
"less": "2.7.2",
"less-loader": "2.2.3",
"normalize-css": "2.3.1",
"preboot": "4.5.2",
"raw-loader": "0.5.1",
"rxjs": "5.1.0",
"style-loader": "0.13.1",
"to-string-loader": "1.1.5",
"typescript": "2.1.5",
"url-loader": "0.5.7",
"webpack": "2.2.1",
"webpack-hot-middleware": "2.16.1",
"webpack-merge": "0.14.1",
"zone.js": "0.7.6"
}

[morganjs07]

There are solutions here.
#TheLarkInn/angular2-template-loader#50