Угловой templateUrl: функция контроллера MVC

Question

Прежде всего, спасибо, что нашли время.

Моя проблема в том, что я хочу получить файл .cshtml (возвращенный из контроллера MVC) в качестве шаблона для моего углового сайта.

Сначала я создал шаблон веб-приложения ASP.Net Core 2.1: Angular. Во-вторых, я добавил Home Controller в папку «Controller».

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();
        }
    }
}

Следующим шагом было создание папки с именем «Home» внутри папки «Pages». Внутри домашней папки я создал бритвенное представление с именем index.cshtml, заполненное

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

Теперь я изменил templateUrl в app.component.ts на

templateUrl: '/home/index',

Я видел все это в сообщении от stackoverflow. Я потерял ссылку, но вот github, который парень опубликовал вместе с ним: https://github.com/ranjanmadhu/Angular2-101

Теперь я открываю свой cmd, cd по пути к проекту и пытаюсь собрать его с помощью ng build.

Здесь возникает проблема, она выдает мне эту ошибку:

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'

Я надеюсь, что кто-то может помочь мне решить проблему.

С уважением, Нико ака. Myridor

Answer 1

Мне кажется, это тоже не сработает - даже угловой не поощряет такой подход - но у меня есть идея для этой проблемы

Непосредственно сопоставьте index.html, сгенерированный из angular, с вашим контроллером, который просто вызовет ваш index.html, и вы можете просто использовать угловые компоненты

Я надеюсь, что это поможет - пожалуйста, проверьте образец ниже

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

Ваш метод действия должен выглядеть следующим образом - непосредственно прочитайте index.html и верните его как PhysicalFile() из вашего контроллера

Наконец, откуда мы получаем это index.html, когда вы создаете ваше Angular Application, оно переместит все ваши js и css в вашу папку сборки, сопоставленную с вашим angular.json файлом - так что убедитесь, что путь к файлу и прочитайте index.html файл

Мой outputPath в angular.json читается как:

"outputPath": "./wwwroot" - это не традиционный способ запуска вашего приложения, для которого требуется как угловая сборка, так и сборка MVC для рендеринга страниц, но вы можете использовать его как обходной путь

Есть еще один способ добиться этого, если вы создаете угловой проект в .net core 2.0 ^ , вы получите угловой шаблон, в котором вы можете создать свое приложение - если вы это сделаете, он будет непосредственно отображать ваш угловой приложение, использующее spa в .net core

На мой взгляд, не смешивайте свой угловой шаблон с бритвой cshtml это не очень хорошая идея - создайте свое угловое приложение отдельно и используйте API для извлечения данных

Надеюсь, это поможет вам - Спасибо, Happy Coding !!

Answer 2

Я никогда не думал о таком подходе (смешивание Razor и Angular через templateUrl). Я не уверен, что это хорошая идея. Хотя, если вы настаиваете, я думаю, что этот пост может вам помочь: Указание директивы templateUrl относительно корня

Удачи!