使用ASP.NET Core的Angular 2复制<html> <body>-Java 学习之路

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

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

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

当按下控制U（查看源）时，html看起来像：

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

redacted 我的所有组件都没有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>

我的Index.cshtml

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

上面的代码是应该提供的，现在角度的第一位应该是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>

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

UPDATE* 所以我做了一些研究，似乎是一个已知的bug . 正如它在这里所说：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标签 . 载入中...

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

UPDATE

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

dotnet new angular

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

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;
})()});

回复于 2024-05-20T04:25:49+08:00

使用ASP.NET Core的Angular 2复制<html> <body>

1 回答

相关问题