Angular templateUrl: MVC Controller Function

Question

First of all, thanks for taking your time.

My problem is that I want to get a .cshtml (returned from MVC Controller) as template for my angular site.

At first I created a ASP.Net Core 2.1 Web Application Template: Angular. Second I added a Home Controller in the "Controller" Folder.

using Microsoft.AspNetCore.Mvc;

// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace WebApplication4.Controllers
{
    public class HomeController : Controller
    {
        // GET: /<controller>/
        public IActionResult Index()
        {
            return View();
        }
    }
}

The next step was to create a folder named "Home" inside the "Pages" folder. Inside the Home folder I created a razor view called "index.cshtml" just filled with a

<h1>This is the Index View</h1>

Now I changed the templateUrl in app.component.ts to

templateUrl: '/home/index',

I saw all of that in a post from stackoverflow. I lost the link but here's the github the guy posted with it: https://github.com/ranjanmadhu/Angular2-101

Now I open my cmd, cd to the path of the project and try to build it via ng build.

Here comes the problem, it throws me this error:

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve './/home/index' in 'C:\Users\Myridor\AngularMvcTest\AngularMvcTest\ClientApp\src\app'

I hope someone can help me solve the problem.

Best regards, Nico aka. Myridor

score 0 · Answer 1 · answered Nov 09 '18 at 08:18

0

I never thought of an approach like that (mixing Razor and Angular via the templateUrl). I am not sure if that's a good idea. If you insist though, I think this post may help you: Stating directive templateUrl relative to root

Good luck!

answered Nov 09 '18 at 08:18

johey

1,139
1
9
25

If mixing it via templateUrl is a bad approach I'm open for every other idea :) Will look into the post u shared and thank you :) – Myridor Nov 09 '18 at 08:22

score 0 · Answer 2 · answered Nov 09 '18 at 09:23

I don't seem it will work too - even angular doesn't encourage this approach - But i have a idea for this problem

Directly map the index.html generated from angular to your controller that will just call your index.html and you can just use the angular components

I hope this will help - please check the sample below

    public IActionResult Index()
    {
      return PhysicalFile(Path.Combine(Directory.GetCurrentDirectory(),
        "wwwroot", "index.html"), "text/HTML");
    }

Your action method should look like this - Directly read the index.html and return it as a PhysicalFile() from your controller

Finally where do we get this index.html when you build your Angular Application it will move all your js and css to your build folder mapped on your angular.json file - so make sure the file path and read the index.html file

My outputPath in angular.json reads as:

"outputPath": "./wwwroot" - this is not a traditional way to run your application which needs both the angular build and your MVC build to render the pages but you can use it as a workaround

There is another way to achieve this if you are creating angular project in .net core 2.0^ you will get Angular template where you can create your application - if you do so it will directly render your angular application using spa in .net core

At my point of view don't mingle your angular template with your razor cshtml it's not a good idea - create your angular app seperatly and use your API to fetch data

Hope this helps you - Thanks Happy Coding !!

Thank you for taking the time and helping me, however the approach you wrote does the opposite of what I want to do (as far as I understand). Yours rendering the angular app from a Controller function. However I want the .cshtml to be rendered as my angular app and my approach was to achieve it with MVC Controller functions because the "return View();" will render it (afaik). — Myridor, Nov 09 '18 at 09:35
You just told you are open to any other idea so i have suggested you - No problem thanks — Rahul, Nov 09 '18 at 09:38
I don't want to disrespect you or your answer I just wanted to explain what I'm searching for because maybe I didn't do it that well in my question. But I'm considering the part "create your angular app seperatly and use your API to fetch data " :) — Myridor, Nov 09 '18 at 09:46

Angular templateUrl: MVC Controller Function

2 Answers2