gpt4 book ai didi

angular - ASP.NET Core 2.1 Angular 6.0 SPA 模板 - 用于索引而不是静态页面的 Razor 页面 (cshtml)

转载 作者:太空狗 更新时间:2023-10-29 17:05:26 25 4
gpt4 key购买 nike

我正在尝试迁移我的 ASP.NET Core 2.0 Angular 5申请 webpack设置为 ASP.NET Core 2.1 Angular 6Angular-Cli .

简短的问题:

如何强制解析来自 cshtml 的 Razor 页面指令与 Microsoft.AspNetCore.SpaServices.Extensions

我不想使用 index.html来自 Angular.json ,但是 index.cshtml .

详细描述:

我从 Angular template 开始了一个新的 ASP.NET Core 项目.有很多东西可以神奇地起作用。

  1. 有一个index.html里面的文件ClientApp/src文件夹是应用程序启动时自动提供服务。
  2. 当应用程序运行时,在 </body> 之前来自 index.html 的标签(从第一点开始)插入了几个脚本:inline.bundle.js , polyfills.bundle.js , vendor.bundle.js , main.bundle.jsstyles.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 .如何将其写入 Razor 页面。

最佳答案

我的回答基于我在 React SPA 扩展方面的经验,但它对 Angular 也应该有帮助,因为它使用 the same ClientApp/index.html middleware mechanism , 同样的 IApplicationBuilder.UseSpa入口点。

问题是当你使用app.UseSpa(...)时,这个扩展的默认实现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 并改用 Razor View 。

基本上,我已经重新实现了 UseSpa 的功能,但没有将拦截和转发到 index.html 的中间件附加到 index.html。

请注意,Home razor View 仍然需要做 index.html 正在做的更重要的事情。最重要的是,它需要 include bundle.js由 SPA 静态内容中间件提供服务。

关于angular - ASP.NET Core 2.1 Angular 6.0 SPA 模板 - 用于索引而不是静态页面的 Razor 页面 (cshtml),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50815456/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com