Интеграция Angular 7 и ASP.NET MVC — Стили
Я пытаюсь вызвать приложение Angular 7 со страницы .cshtml Razor в ASP.NET MVC. Приложение загружается, но не применяет стили. У меня есть сборка приложения Angular в папке Bundles в корневом каталоге решений MVC. Мой BundlesConfig.cs выглядит так:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/Script/Bundles")
.Include(
"~/bundles/main.*",
"~/bundles/polyfills.*",
"~/bundles/scripts.*",
//"~/bundles/styles.*",
"~/bundles/vendor.*",
"~/bundles/runtime.*"
));
bundles.Add(new StyleBundle("~/Content/Styles")
.Include("~/bundles/styles.*"));
}`
Index.cshtml выглядит так:
@{
ViewBag.Title = "Index";
}
<my-component></my-component>
Наконец, мой _Layout.cshtml выглядит так:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Hello World - ASP.NET MVC</title>
@Styles.Render("~/Content/Styles")
</head>
<body>
<main role = "main" class = "container">
@RenderBody()
</main>
@Scripts.Render("~/Script/Bundles")
</body>
</html>
Единственный файл стилей, попавший в мою папку Bundles, — это styles.js, и я не уверен, что это корень проблемы. Я попытался вручную переместить файл styles.scss в пакеты и сослаться на него в какой-то момент, но это тоже не удалось. Как видите, я закомментировал стили.* из комплекта скриптов, но пробовал и с раскомментированными. Это тоже не удалось. Спасибо за любую помощь, которую вы можете предоставить.
Добавление к @Igor порядка, в котором вы ссылаетесь на эти файлы, может определить, работает ли ваше приложение правильно/вообще.
Файлы в пакете Script совпадают с файлами в index.html, который также находится в папке Bundles.
Вы также можете открыть консоль разработки браузера и просмотреть ресурсы. Совпадают ли они между ожидаемым index.html и тем, что загружается из пакетов? Лично мне не нравится функция пакета в MVC, я решил добавить файлы angular непосредственно в index.cshtml (или любой другой файл, который является вашим корневым файлом .cshtml) и выяснить правильные имена файлов в помощнике Html при запуске.
Я просто исправил порядок, чтобы он соответствовал индексному файлу - к сожалению, результат был таким же.
Могу ли я предложить игнорировать возможности связывания и просто использовать прямой тег <link ... />? сделать сборку нг. Вы можете скопировать ссылку из index.html, сгенерированного из сборки ng, и просто настроить пути. Затем: находится ли файл css в папке dist? если это не так или если есть styles.js, это означает, что вам нужно настроить сборку Angular. Если он есть, убедитесь, что он скопирован в вашу папку /Content/Styles.
В конце концов я использовал тег <script> и сбросил пакет. Оказалось, что мне нужно переместить папку с ресурсами в корень решения, чтобы получить доступ к файлам .svg, которые искало приложение, поэтому оказалось, что некоторые из моих стилей отсутствовали, это были просто ресурсы! Спасибо, что помогли мне все обдумать.
Соберите приложение angular из cli и посмотрите на полученный файл
index.html, скопируйте ссылки, которые вы там видите. Обратите внимание, что результирующий файл может иметь другую структуру, если вы создадите его с производственным флагом.