【发布时间】：2018-11-21 18:00:33
【问题描述】：
我正在尝试将我的带有webpack 设置的ASP.NET Core 2.0 Angular 5 应用程序迁移到带有Angular-Cli 的ASP.NET Core 2.1 Angular 6。
小问题：
如何使用Microsoft.AspNetCore.SpaServices.Extensions 强制解析来自cshtml 的剃须刀页面指令？
我不想使用来自Angular.json 的index.html，而是使用index.cshtml。
详细说明：
我从Angular template 开始了一个新的 ASP.NET Core 项目。有很多东西可以神奇地起作用。
-
ClientApp/src文件夹中有一个index.html文件，它是 应用程序启动时自动提供服务。 - 当应用程序运行时，在
index.html的</body>标记之前（从第一点开始）插入几个脚本：inline.bundle.js、polyfills.bundle.js、vendor.bundle.js、main.bundle.js和styles.bundle.css在</head>标记之前.
我不确定是谁插入了这些脚本，但我想将它们插入 Razor 页面 (cshtml)。
我尝试使用旧项目中的代码：
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>@ViewData["Title"]</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
@{string googleAnalyticsId = Html.Raw(ViewData["GoogleAnalyticsId"]).ToString();}
@if (!string.IsNullOrEmpty(googleAnalyticsId))
{
<script>
(function(i, s, o, g, r, a, m)
{
...
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', '@googleAnalyticsId', 'auto');
</script>
}
<script>
@Html.Raw(ViewData["TransferData"])
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/0.8.2/css/flag-icon.min.css" async defer />
<script src="https://apis.google.com/js/platform.js" async defer></script>
<app>
<!-- loading layout replaced by app after startupp -->
<div class="page-loading">
<div class="bar">
<i class="sphere"></i>
</div>
</div>
</app>
</body>
</html>
并将Angular.json 中的索引选项指向此index.cshtml：
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "wwwroot/dist",
"index": "Views/Home/Index.cshtml", //<----- here
问题是内容（所有@标签）没有被 ASP.NET Core 处理，而是直接输出内容：
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>@ViewData["Title"]</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
@{string googleAnalyticsId = Html.Raw(ViewData["GoogleAnalyticsId"]).ToString();}
@if (!string.IsNullOrEmpty(googleAnalyticsId))
{
<script>
...
但应该是：
<!DOCTYPE html>
<html>
<head>
<base href="/" />
<title>Test title</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<script>
我想将一些变量（来自 appsettings.json）打印到最后的 html 页面。由于我已经在使用 ASP.NET Core，Razor 页面似乎是一个不错的解决方案。
我也试试：
要添加新的 RazorPage，会处理 C# 内容（@ 指令），但没有人插入 Angular 脚本。
对 AndyCunningham 回答的回应：
ng build --prod 写入此文件：
<script type="text/javascript" src="runtime.b38c91f828237d6db7f0.js"></script><script type="text/javascript" src="polyfills.2fc3e5708eb8f0eafa68.js"></script><script type="text/javascript" src="main.16911708c355ee56ac06.js"></script>
到index.html。如何将其写入剃须刀页面。
【问题讨论】：
-
我面临同样的问题，因为新模板没有 Index.cshtml。你的问题解决了吗？如果是，你能分享一下片段吗？
-
嗨@SagarK 我需要从数据库中写入一些数据，所以我想使用 Razor 页面。目前，我正在 Startup 上编辑静态 Index.html 页面。
-
好的，但是您如何在启动中配置身份验证，因为没有使用 MapSpaFallbackRoute
-
这是一个微不足道的问题，我很震惊没有对此的支持。我认为这将是 SEO 的理想功能。总的来说，似乎制作这个系统的人，也许我忽略了其他原因，不知道单一职责原则......你们有没有为此想出任何办法？
-
您的问题解决了吗？
标签： angular asp.net-core angular-cli angular-cli-v6 asp-net-core-spa-services