带有 ASP.NET Core 的 Angular 2 复制 <html><body>答案

【问题标题】：Angular 2 with ASP.NET Core duplicating <html><body>带有 ASP.NET Core 的 Angular 2 复制 <html><body>
【发布时间】：2017-12-03 09:43:30
【问题描述】：

我已经使用 ASP.NET 核心设置了 Angular 2，使用：

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*

我遵循标准设置，但 App.component.html 复制了 html 和 body 标签。

当按下 Control U（查看源代码）时，html 看起来像：

<html>
    <head>
    ....
    </head>
    <body>
    <app>
    <html>
    <head>
    <style>
    ...
    </style>
    </head>
    </app>
     </body>
    </html>
</app>
...
</body>
</html>

已编辑 我的所有组件都没有 html 或 body 标签。唯一有 html 或 body 标记的是初始页面

我的_Layout.cshtml html：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - HotSnail</title>
        <base href="/" />
        <script src="~/content/modules/jquery/jquery-3.2.1.min.js"></script>
        <script src="~/content/modules/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
        <link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />
        <link href="~/content/modules/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
        <link href="~/content/modules/animate/animate.css" rel="stylesheet" />
        <link href="~/content/global.css" rel="stylesheet" />
    </head>
    <body>
        @RenderBody()

        @RenderSection("scripts", required: false)
    </body>
</html>

我的索引.cshtml

<script src="~/dist/vendor.js" asp-append-version="true"></script>
@section scripts {
    <script src="~/dist/main-client.js" asp-append-version="true"></script>
}

上面的代码是应该提供的，现在angular的第一位应该是app.component

app.component.html

    <ribbon></ribbon>
<div id="content">
    <router-outlet></router-outlet>
</div>

ribbon.component.html：

<div id="ribbon">

<span class="ribbon-button-alignment">
    <span id="refresh" class="btn btn-ribbon" data-action="resetWidgets" data-title="refresh" rel="tooltip" data-placement="bottom" data-original-title="<i class='text-warning fa fa-warning'></i> Warning! This will reset all your widget settings." data-html="true" data-reset-msg="Would you like to RESET all your saved widgets and clear LocalStorage?"><i class="fa fa-refresh"></i></span>
</span>

<!-- breadcrumb -->
<ol class="breadcrumb"><li>Home</li><li>Outlook</li><li>Inbox</li></ol>
</div>

这是应该在第一页注入的所有组件

更新* 所以我做了更多的研究，这似乎是一个已知的错误。正如这里所说： https://github.com/aspnet/JavaScriptServices/issues/662

我无法安静地弄清楚他们的 hacky 解决方案

Here is hacky code that fixes this:

return requestZone.run>(() => platform.serializeModule(AppModule)).then(html => { resolve({ html: html.slice(27, html.length - 14).replace('', '') }); }, 拒绝）；

在 index.cshtml 中，我建议将 app 更改为 div，因为我们已经从 Universal 返回 app 标签。
正在加载...

我不确定那个代码会去哪里..

更新

这也发生在做时创建的DEFAULT项目中

dotnet new angular

有谁知道谁维护这些模板，因为我想向开发团队发布一个错误

【问题讨论】：

首先，你很可笑……我们都会犯错，但为了帮助你，我们需要更多的东西，也许是你设置的 github
感谢您消除我的挫败感 :) 我会编辑并添加更多代码
我们在这里仍然缺少一些东西...为什么输出中有 2 </app>...
我更新了问题

标签： asp.net-mvc angular asp.net-core

【解决方案1】：

角度 5 也有同样的问题。

我在https://github.com/aspnet/JavaScriptServices/issues/662 上的最后评论中的建议中修复了它（salarcode 的最后评论）：

boot.server.ts 文件将代码更改为：

resolve({
html: (() => {
    let apphtml = state.renderToString();
    apphtml = apphtml.replace('<html><head><style>', '<style>').replace('</head><body><app', '<app').replace('</app></body></html>', '</app>');
    return apphtml;
})()});

【讨论】：