ASP.NET Core 2.1 Angular 6.0 SPA模板-索引的剃刀页（cshtml）而不是静态页 [英] ASP.NET Core 2.1 Angular 6.0 SPA template - razor page (cshtml) for index instead static page
问题描述
我正在尝试将安装了 webpack 的 ASP.NET Core 2.0 Angular 5 应用程序迁移到 ASP.NET Core 2.1 Angular 6 和 Angular-Cli 。
I am trying to migrate my ASP.NET Core 2.0 Angular 5 application with webpack setup to ASP.NET Core 2.1 Angular 6 with Angular-Cli.
简短的问题：
如何强制从 cshtml 与 Microsoft.AspNetCore.SpaServices.Extensions ？
我不想使用 Angular.json index.html c $ c>，但 index.cshtml 。
I do not want to use index.html from Angular.json, but index.cshtml.
长描述：
我从角度模板。有很多事情神奇地起作用了。
I started a new ASP.NET Core project from Angular template. There are quite a few things that just magically works.
-
ClientApp中有一个文件夹，该文件夹是应用程序启动时自动提供的index.html文件/ src
。 - 应用程序运行时，在
< / body> <之前/ code>标签（从第一点开始）从index.html插入：inline.bundle.js，polyfills.bundle.js，vendor.bundle.js，main.bundle .js和styles.bundle.css在< / head>标记之前。
- There is an
index.htmlfile insideClientApp/srcfolder which is automatically served when application starts. - When application runs, before
</body>tag fromindex.html(from first point) several scripts are inserted:inline.bundle.js,polyfills.bundle.js,vendor.bundle.js,main.bundle.jsandstyles.bundle.cssbefore</head>tag.
我不确定是谁插入了这些脚本，但是我想将它们插入到Razor页面（ cshtml ）。
I am not sure who inserted those scripts, but I want to insert them to Razor page (cshtml).
我尝试使用旧项目中的代码：
I tried to use code from my old project:
<!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 ：
And point index options in Angular.json to this index.cshtml:
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "wwwroot/dist",
"index": "Views/Home/Index.cshtml", //<----- here
问题是ASP.NET Core不处理内容（所有@标记），但输出直接内容：
Problem is that content (all @ tags) is not processed by ASP.NET Core but it outputs direct content:
<!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页面似乎是不错的解决方案。
I want to print some variables (from appsettings.json) to the end html page. Since I am already using ASP.NET Core, Razor page seems good solution.
我也尝试：
来添加新的RazorPage，处理C＃内容（@指令），但没有人插入Angular脚本。
I also try:
to add new RazorPage, C# content (@ directives) are processed, but no-one is inserting Angular scripts.
对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 。
推荐答案
我将这个答案基于我对React SPA扩展的经验，但应该对Angular也有帮助，因为它使用相同的 ClientApp / index.html 中间件机制，以及相同的 IApplicationBuilder.UseSpa 入口点。
I'm basing this answer on my experience with React SPA extensions, but it should be helpful for Angular as well, as it uses the same ClientApp/index.html middleware mechanism, and the same IApplicationBuilder.UseSpa entrypoint.
问题是，当您使用 app.UseSpa（...）时，此扩展名的默认实现配置 监听所有UI请求并将其转发到index.html 。
The problem is that when you use app.UseSpa(...), the default implementation of this extension configures a middleware that listens for ALL UI requests and fwds them to index.html.
我为我们的项目构建了一个简单的示例： https://github.com/andycmaj/aspnet_spa_without_indexhtml/pull/1/files 应该显示需要更改哪些内容才能忽略index.html并使用剃刀视图。
I've built a quick example of how we get around this for our projects: https://github.com/andycmaj/aspnet_spa_without_indexhtml/pull/1/files should show you what needs to change in order to ignore index.html and use a razor view instead.
基本上，我已经重新实现了 UseSpa 的功能，但是没有附加
Basically, i've re-implemented what UseSpa does, but without attaching the middleware that intercepts and fwds to index.html.
请注意， Home 剃刀视图仍然需要执行以下操作： index.html正在做的更重要的事情。最重要的是，它需要包括<$ c $ SPA静态内容中间件提供的c> bundle.js 。
Note that the Home razor view still needs to do the more important things that index.html was doing. Most importantly, it needs to include bundle.js served by the SPA static content middleware.
这篇关于ASP.NET Core 2.1 Angular 6.0 SPA模板-索引的剃刀页（cshtml）而不是静态页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
