search

RobertDyball / A2SPA

SPA with ASP.NetCore 2 + Angular 4 + Bootstrap 4+ OpenIdDict
https://www.codeproject.com/Articles/1148767/SPA-using-ASP-Net-Core-plus-Angular-part
91 stars 43 forks source link

Error referencing cshtml templates from components: Module parse failed: Unexpected token (5:0) You may need an appropriate loader to handle this file type. #8

Closed Xoadra closed 6 years ago

Xoadra commented 6 years ago

So after resolving my previous issue, I've managed to continue onward through the rest of part 1 of the tutorial and begin actually switching over to the .cshtml files ASP.NET Core uses by default as opposed to regular old Angular .html files. However, as I try to build my files before running the application to test it, I run into this error:

Module parse failed: Unexpected token (5:0) You may need an appropriate loader to handle this file type.

It appears that Angular does not like the .cshtml files being referenced as component templates, hence the fit it throws when I try to ng build, dotnet build, or dotnet run. I use the Angular CLI to manage the Angular side of my project so I suspect I may end up running into bundling issues as well right after this, but for the time being, Angular files won't build because my components are trying to use .cshtml files which Angular doesn't appear to be able to parse on its own.

For a full reference of the error I'm getting, take a look at it here:

ERROR in ./Views/Partials/AboutComponent.cshtml
Module parse failed: Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type.
| 
| 
| @{ ViewData["Title"] = "About"; }
| 
| 
 @ ./wwwroot/app/about/about.component.ts 14:22-78
 @ ./wwwroot/app/app.module.ts
 @ ./wwwroot/main.ts
 @ multi ./wwwroot/main.ts
ERROR in ./Views/Partials/ContactComponent.cshtml
Module parse failed: Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type.
| 
| 
| @{ ViewData["Title"] = "Contact"; }
| 
| 
 @ ./wwwroot/app/contact/contact.component.ts 14:22-80
 @ ./wwwroot/app/app.module.ts
 @ ./wwwroot/main.ts
 @ multi ./wwwroot/main.ts
ERROR in ./Views/Partials/IndexComponent.cshtml
Module parse failed: Unexpected character '@' (5:0)
You may need an appropriate loader to handle this file type.
| 
| 
| @{ ViewData["Title"] = "Home Page"; }
| 
| 
 @ ./wwwroot/app/index/index.component.ts 14:22-78
 @ ./wwwroot/app/app.module.ts
 @ ./wwwroot/main.ts
 @ multi ./wwwroot/main.ts
ERROR in ./Views/Partials/AppComponent.cshtml
Module parse failed: Unexpected token (5:0)
You may need an appropriate loader to handle this file type.
| 
| 
| <nav class="navbar navbar-inverse navbar-fixed-top">
|   <div class="container">
|       <div class="navbar-header" (click)="setTitle( 'Home - NgCore' )">
 @ ./wwwroot/app/app.component.ts 24:22-73
 @ ./wwwroot/app/app.module.ts
 @ ./wwwroot/main.ts
 @ multi ./wwwroot/main.ts

As a brief experiment, I temporarily decoupled the build and run process between Angular and ASP.NET Core I have set up in my csproj file which got dotnet run to work, but as expected, it returned a ton of 404 errors largely referencing .bundle.js files among others.

You can take a look at my project files if you'd like as I have a repo of the project I've been working on. Feel free to clone it and tinker with it if you'd like. The old index.html file is still sitting around in there since I'm hesitant to dump it until I've gotten this app to fully integrate its frameworks.

Thanks again for the help last time! I'm so close to getting this whole thing to work but then I run into these huge errors lol. Looking forward to your feedback on this one.

RobertDyball commented 6 years ago

Hi Ian,

still working over the source, train trip has had rather bad internet access (worse than normal), but the most immediate thing I noticed was the path to the html template inside the angular controller.

you have ../../views/partials/xyz when it should be just partials/xyz

I'll try and get it built at home and then get a look over it tomorrow.

Xoadra commented 6 years ago

No problem! Whenever you have the time is fine.

you have ../../views/partials/xyz when it should be just partials/xyz

I do recall trying this, but I believe I encountered errors regarding pathing and extensions issues. Reviewing this again as just Views/Partials/AppComponent.cshtml, I received the following error:

ERROR in ./wwwroot/app/app.component.ts
Module not found: Error: Can't resolve './Views/Partials/AppComponent.cshtml' in '/Users/xoadra/Programming/Project/NgCore/wwwroot/app'
resolve './Views/Partials/AppComponent.cshtml' in '/Users/xoadra/Programming/Project/NgCore/wwwroot/app'
  using description file: /Users/xoadra/Programming/Project/NgCore/package.json (relative path: ./wwwroot/app)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Users/xoadra/Programming/Project/NgCore/package.json (relative path: ./wwwroot/app)
    using description file: /Users/xoadra/Programming/Project/NgCore/package.json (relative path: ./wwwroot/app/Views/Partials/AppComponent.cshtml)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Users/xoadra/Programming/Project/NgCore/wwwroot/app/Views/Partials/AppComponent.cshtml doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Users/xoadra/Programming/Project/NgCore/wwwroot/app/Views/Partials/AppComponent.cshtml.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Users/xoadra/Programming/Project/NgCore/wwwroot/app/Views/Partials/AppComponent.cshtml.js doesn't exist
      as directory
        /Users/xoadra/Programming/Project/NgCore/wwwroot/app/Views/Partials/AppComponent.cshtml doesn't exist
[/Users/xoadra/Programming/Project/NgCore/wwwroot/app/Views/Partials/AppComponent.cshtml]
[/Users/xoadra/Programming/Project/NgCore/wwwroot/app/Views/Partials/AppComponent.cshtml.ts]
[/Users/xoadra/Programming/Project/NgCore/wwwroot/app/Views/Partials/AppComponent.cshtml.js]
[/Users/xoadra/Programming/Project/NgCore/wwwroot/app/Views/Partials/AppComponent.cshtml]
 @ ./wwwroot/app/app.component.ts 24:22-69
 @ ./wwwroot/app/app.module.ts
 @ ./wwwroot/main.ts
 @ multi ./wwwroot/main.ts

Looking through this again, the key line I found interesting was:

[/Users/xoadra/Programming/Project/NgCore/wwwroot/app/Views/Partials/AppComponent.cshtml]

This is why I switched to using the path that you saw since it appeared to resolve that error.

RobertDyball commented 6 years ago

Hi Ian, you're seeing errors parsing .cshtml since you're relying on the "ng serve" to serve up the website, not dotnet core itself. From point of view ng serve, these .cshtml files will be treated as just another plain text file. I am guessing you started with Angular CLI , with something like this

ng new my-app cd my-app ng serve --open

On the other hand, compare to a dotnet CLI you could do this:

dotnet new --help md TestApp cd TestApp dotnet new mvc --auth Individual dotnet run

then browse to localhost:5000 ... use this technique to launch your app - unless you are using say VS2017 and IISExpress.

Xoadra commented 6 years ago

I have been using dotnet run to run my app, but this still results in errors. However, I do have my dotnet run and ng build commands set to run together by just using dotnet run. Decoupling them allows my app to finally run, but I'm left with a slew of errors in my browser console for missing files instead and none of the content moved to the .cshtml files now displays.

What I can do is decouple my build commands so that I can show you the browser console errors I'm getting.

GET http://localhost:5000/lib/bootstrap/dist/css/bootstrap.css net::ERR_ABORTED
localhost/:15 GET http://localhost:5000/css/site.css net::ERR_ABORTED
localhost/:222 GET http://localhost:5000/inline.bundle.js net::ERR_ABORTED
localhost/:223 GET http://localhost:5000/polyfills.bundle.js net::ERR_ABORTED
localhost/:224 GET http://localhost:5000/styles.bundle.js net::ERR_ABORTED
localhost/:225 GET http://localhost:5000/vendor.bundle.js net::ERR_ABORTED
localhost/:226 GET http://localhost:5000/main.bundle.js net::ERR_ABORTED
localhost/:229 GET http://localhost:5000/lib/jquery/dist/jquery.js net::ERR_ABORTED
localhost/:230 GET http://localhost:5000/lib/bootstrap/dist/js/bootstrap.js net::ERR_ABORTED
localhost/:231 GET http://localhost:5000/js/site.js net::ERR_ABORTED
localhost/:237 GET http://localhost:5000/systemjs.config.js net::ERR_ABORTED
localhost/:237 GET http://localhost:5000/systemjs.config.js 404 (Not Found)
(index):240 Error: Unexpected token <
  Evaluating http://localhost:5000/app
  Loading app
    at eval (<anonymous>)
    at evaluate (evaluate.js:106)
    at instantiate.js:394
    at dynamicExecute (register-loader.js:665)
    at doEvaluate (register-loader.js:612)
    at ensureEvaluate (register-loader.js:520)
    at register-loader.js:133
    at ZoneDelegate.invoke (zone.js:388)
    at Zone.run (zone.js:138)
    at zone.js:858

Modifying the paths to those files resulted in the same 404 errors being returned as well, and I believe it's because it has no output files to read due to the fact that I can't build with ng build until I resolve the conflict it's having with using .cshtml templates for its Angular components.

That said, I haven't been using ng serve at all. I've been running everything with dotnet run and run into the same issue regardless of if I build first or not.

RobertDyball commented 6 years ago

Hi Ian, still working on this. Understand you're using dotnet build, you'll need to make sure ng build + ng serve don't get called during build.

I'll only do minor changes this time, to get running, so far I've found tsconfig.json points output to "root" directory,

image

this causes issues with the destination of the transpiled ts files, output dir need to be wwwroot.

I've moved the files from bower.json into package.json - though npm, bower, yarn etc all do much the same thing, as far as grabbing packages, bower doesn't work so well as compared to npm or yarn, and by using package.json puts all dependencies in the same location.

Next mod I did was to add ~/ to all relative paths in _layout.cshtml .. most of the time it's ok, but sometimes, depending on relative locations of folders, can be an issue - e.g., when published to a virtual directory.

Last one (so far) .. the views are in a folder called "Partials", the view uses path 'Partials' but thecontroller is called PartialController.

more to come (on trip home :)

Xoadra commented 6 years ago

So I ended up taking a break from this project as other responsibilities took over. A few days ago however, my schedule lightened up so I figured I'd give tinkering with this app concept one more go by slowly integrating the files from the modified version you gave me, and in the process I found some erroneous files hidden deep within my autogenerated bin folder from ASP.NET Core. I had duplicates named after an older version's project name. I deleted them, and out of curiosity decided to rebuild and run the app... and it finally worked!

It turns out that was my issue all along. That, and not having the loader file to accompany my systemjs config file. Other than those two things, the rest of my project was perfectly fine as-is.

Given that, I think I'm going to do a bit more tinkering with it to see if I can get my project to work under different setups and learn a little bit more about frontend and backend development to see what kind of architecture I ultimately want to go with for the website I'll be building. I'll probably dig further through the rest of your tutorial as well to glean some additional insights.

Thanks a ton for all of the help and insights you've given me. I really appreciate it.