标签: asp-net-core-spa-services

如何为使用SpaServices托管的多个SPA配置ASP.net核心服务器路由

我有一个Angular 5应用程序,我希望使用最新的Angular模板RC在ASP.net Core上使用Angular Universal .我已经按照文档操作并启动并运行了应用程序.问题是我也在使用Angular的i18n工具,它生成多个编译的应用程序,每个语言环境1个.我需要能够主持每一个https://myhost.com/{locale}/.

我知道我可以为每个区域设置启动ASP.net核心应用程序的实例,并在网络服务器中设置托管以使相应的路径路由到关联的应用程序,但这对我来说似乎过分了.

路由配置为:

// app is an instance of Microsoft.AspNetCore.Builder.IApplicationBuilder
app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller}/{action=Index}/{id?}");
});

Run Code Online (Sandbox Code Playgroud)

SpaServices配置有:

app.UseSpa(spa =>
{
    // To learn more about options for serving an Angular SPA from ASP.NET Core,
    // see https://go.microsoft.com/fwlink/?linkid=864501

    spa.Options.SourcePath = "ClientApp";

    spa.UseSpaPrerendering(options =>
    {
        options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";
        options.BootModuleBuilder = env.IsDevelopment()
            ? new AngularCliBuilder(npmScript: "build:ssr:en")
            : null;
        options.ExcludeUrls = new[] { "/sockjs-node" };
        options.SupplyData = (context, data) =>
        { …

Run Code Online (Sandbox Code Playgroud)

asp.net-core asp-net-core-spa-services

asg*_*ant

lucky-day

33
推荐指数

1
解决办法

1万
查看次数

将ng-bootstrap集成到ASP.NET Core JavaScript Services(Angular)项目中

我使用ASP.NET 2.0核心的JavaScript服务有角,并试图整合NG-引导.

我安装了ng-bootstrap:

npm install --save @ng-bootstrap/ng-bootstrap

我把它添加到webpack.config.vendor.js:

...
const treeShakableModules = [
    '@angular/animations',
    '@angular/common',
    '@angular/compiler',
    '@angular/core',
    '@angular/forms',
    '@angular/http',
    '@angular/platform-browser',
    '@angular/platform-browser-dynamic',
    '@angular/router',
    '@ng-bootstrap/ng-bootstrap',  // <-- down here
    'zone.js',
];
...

Run Code Online (Sandbox Code Playgroud)

我添加NgbModule到我的导入app.module.shared.ts:

...
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
...
@NgModule({
    declarations: [
        AppComponent,
        ...
    ],
    imports: [
        CommonModule,
        NgbModule.forRoot(),  // <-- this guy
        HttpModule,
        FormsModule,
        RouterModule.forRoot([
            ...
        ])
    ]
})
export class AppModuleShared {
}

Run Code Online (Sandbox Code Playgroud)

我清理解决方案并运行: …

asp.net-core ng-bootstrap asp.net-core-2.0 angular asp-net-core-spa-services

Eri*_*ase

2017 10-04

12
推荐指数

1
解决办法

670
查看次数

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

我想我的迁移ASP.NET Core 2.0 Angular 5与应用程序webpack安装到ASP.NET Core 2.1 Angular 6使用Angular-Cli.

简短的问题:

如何强制从解析剃刀页的指令cshtml有Microsoft.AspNetCore.SpaServices.Extensions？

我不希望使用index.html从Angular.json,但index.cshtml.

详细描述:

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

index.html文件ClientApp/src夹内有一个文件,在应用程序启动时会自动提供.
当应用程序运行时,才</body>从标签index.html几个脚本插入(从第一个点)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 …

Run Code Online (Sandbox Code Playgroud)

asp.net-core angular-cli angular asp-net-core-spa-services angular-cli-v6

Mak*_*kla

2018 10-09

11
推荐指数

3
解决办法

4264
查看次数

在没有 SPA 代理的情况下使用 ASP.Net Core React.js 模板

在 VS2019 预览版中，您有多个模板。我对以下两个感兴趣：

我对两者都进行了一些尝试，发现了一些差异。在ASP.NET Core with React.js模板中，启动了 SPA 代理服务器，而在中则ASP.NET Core with React.js and Redux无需启动 SPA 代理服务器（第二个模板在 TS 中，而不是 JS）。

我的意思是simply works without that。我查看了这两个.csproj文件，发现了差异（我只会附加值得注意的差异）：

第一个模板：

...
    <SpaProxyServerUrl>https://localhost:5002</SpaProxyServerUrl>
    <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="6.0.0-preview.6.21355.2" />
  </ItemGroup>
...
 <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
...

Run Code Online (Sandbox Code Playgroud)

第二个模板：

...
# SpaProxy stuff missing
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="6.0.0-preview.5.21301.17" />
  </ItemGroup>
...
 <ItemGroup>
      <DistFiles Include="$(SpaRoot)build\**; $(SpaRoot)build-ssr\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>

Run Code Online (Sandbox Code Playgroud)

请注意，在第二个模板中Microsoft.AspNetCore.SpaServices.Extensions使用的是而不是Microsoft.AspNetCore.SpaProxy …

asp.net asp.net-core asp-net-core-spa-services

Viv*_*ere

lucky-day

8
推荐指数

2
解决办法

2万
查看次数

为什么 SpaServices 似乎总是随机添加不同的端口？

自 Core 2.1 更新以来，出现了新的 Spa 模板。我已经尝试了 Angular，并将其更新为 Angular 6。现在一切正常，除了每次进行更改时我都需要手动构建。这很奇怪，因为它以前可以很好地与 Angular 5 配合使用。我查了一下这个，我在日志中发现了这一点：

Microsoft.AspNetCore.SpaServices:Information:> test@0.0.0 start C:[redacted]\Projects\test\test\ClientApp ng serve "--port" "62206"

** Angular Live Development Server 正在侦听 localhost:62206，在http://localhost:62206/上打开浏览器**

如您所见，它将“--port”“62206”添加到ng serve. 当我稍后访问http://localhost:62206/ 时，我可以看到我的网站并且实时更新似乎在那里工作！

我尝试重新启动服务器几次，但我注意到每次它都使用不同的端口。这几乎看起来是随机的。

让我更气愤的是，我的应用程序实际上运行在端口 66230 上！为什么 SpaServices 不只使用 IIS 端口？有没有办法手动更改它？因为如果我必须等待我的服务器启动，滚动输出找到它选择的端口，在我的地址中输入它以便我可以调试，我会浪费很多时间和精力

.net c# .net-core asp-net-core-spa-services

use*_*943

lucky-day

7
推荐指数

0
解决办法

262
查看次数

StaticFileOptions.OnPrepareResponse 从未调用 ASP.NET Core SPA Web 应用程序

我创建了一个在 ASP.NET Core 5.0 上运行的基于 React 的 SPA，但最近在将重大更改推送到生产环境后遇到了问题 - 用户在尝试访问该网站时经常会看到错误，因为他们的浏览器正在加载过时的内容与对后端所做的更改不兼容的 SPA 版本。

调查

深入研究这一点，问题似乎是index.html缓存的时间超过了应有的时间，并且根据我在这些帖子中读到的内容，我应该将其配置为永远不会被缓存：

我在这里的帖子中遇到了一个与我有类似问题的人，并遵循这个解决方案。经过更多挖掘后，我还在这个 Github 线程中发现了该解决方案的更全面版本，并且我当前的尝试基于此。

类似的问题

我发现这篇文章与我的类似：StaticFileOptions.OnPrepareResponse does not get call for index.html。不同之处在于，他们的回调除了他们感兴趣的路径之外的所有内容都被命中，而我的回调根本没有被命中。

当前的解决方案尝试

在我的应用程序中，我将Startup.Configure方法更改为：

public void Configure(IApplicationBuilder app)
{
    app.UseStaticFiles();

    app.UseSpaStaticFiles(new StaticFileOptions
    {
        OnPrepareResponse = ctx =>
        {
            if (ctx.Context.Request.Path.StartsWithSegments("/static"))
            {
                // Cache all static resources for 1 year (versioned filenames)
                var headers = ctx.Context.Response.GetTypedHeaders();
                headers.CacheControl = new CacheControlHeaderValue …

Run Code Online (Sandbox Code Playgroud)

c# caching asp.net-core asp-net-core-spa-services

Tag*_*agc

2022 01-26

7
推荐指数

1
解决办法

1661
查看次数

部署新版本的 ASP.NET Core / React 应用程序时如何确保客户端完全重新加载？

我有一个小的 ASP.NET Core Web 应用程序，它有一个 React 前端。VS2017 向导中的“新项目”几乎开箱即用，然后添加到。

我现在已经通过我们的构建和部署系统进行了部署，并且 ASP.NET Core DLL 具有从构建服务器设置的构建版本。

但是，当我部署时，React 前端无法正确重新加载，也不会出现新功能。我必须要求用户按 ctrl-F5 才能更新。

我添加了版本更改检测（在控制器上添加了 API 调用），window.location.reload()当它看到客户端时，它仍然从缓存中提取客户端文件。

我可以将版本号添加到 urls 或 webpack 或类似的东西以强制从服务器获取吗？

更新：缓存破坏与创建反应应用程序似乎相关。我可能会尝试...

reactjs asp.net-core asp-net-core-spa-services

MrP*_*eak

2019 03-05

6
推荐指数

0
解决办法

934
查看次数

如何在 Angular 5 中获取当前请求的 url (window.location)？

如何在 Angular 5 中获取当前请求的 url？

我尝试了在网上找到的几个解决方案，但似乎没有任何效果。- $window - 在 WindowRef 示例中包装本机窗口

我整个早上都在寻找这个，但对 Angular 有点陌生，并且迷失在针对不同版本 Angular 的在线不同示例中。

更新：我正在使用 TypeScript

谢谢

angular asp-net-core-spa-services angular5

Arn*_*eld

2017 12-05

5
推荐指数

2
解决办法

8861
查看次数

实体框架核心 + 空间数据正在引发 SRID 无效错误

我收到以下错误：

错误：SqlException：例程执行或用户定义的聚合“地理”期间的 .NET Framework 错误：System.ArgumentException：24204：空间参考标识符 (SRID) 无效。指定的 SRID 必须与 sys.spatial_reference_systems 目录视图中显示的受支持 SRID 之一匹配。

当我尝试将这样创建的点保存到 SQL DB 时，会引发此错误

new Point(it.Lat, it.Lng)

Run Code Online (Sandbox Code Playgroud)

在那之后，我尝试使用GeometryFactory这样的：

    public static class GeometryHelper
    {
        public static IGeometryFactory GeometryFactory { get; set; }
            = NtsGeometryServices.Instance.CreateGeometryFactory();
    }
...
    geometryFactory.CreatePoint(new Coordinate(it.Lat, it.Lng))

Run Code Online (Sandbox Code Playgroud)

没事了。

还尝试设置特定的 SRID：

    public static class GeometryHelper
    {
        public static IGeometryFactory GeometryFactory { get; set; }
            = NtsGeometryServices.Instance.CreateGeometryFactory(4326);
    }

Run Code Online (Sandbox Code Playgroud)

但是然后得到这个错误：

SqlException：例程执行或用户定义的聚合“地理”期间的 .NET Framework 错误：System.FormatException：标识的元素之一的格式无效。System.FormatException:

sql-server spatial geospatial asp-net-core-spa-services ef-core-2.2

Raú*_*año

2019 07-26

5
推荐指数

2
解决办法

1215
查看次数

如何在单个 ASP.NET Core 站点上托管多个 React SPA 应用程序？

我正在尝试使用 ASP.NET Core 3.1 和最新的 SpaServices 扩展来运行多个 React SPA 应用程序，但在提供静态资产时遇到了问题。我构建的大部分内容来自一个类似的问题：如何为使用 SpaServices 托管的多个 SPA 配置 ASP.net Core 服务器路由，但这与 Angular 和旧版本的 SpaServices 相关。

我的代码有两个 React 应用程序，ClientApp并且AdminApp我已经使用以下启动代码对每个应用程序进行了配置：

app.Map("/client", clientApp =>
{
    clientApp.UseSpa(spa =>
    {
        spa.Options.SourcePath = "ClientApp";

        if (env.IsDevelopment())
        {
            spa.UseReactDevelopmentServer(npmScript: "start");
        }
    });
});

app.Map("/admin", adminApp =>
{
    adminApp.UseSpa(spa =>
    {
        spa.Options.SourcePath = "AdminApp";

        if (env.IsDevelopment())
        {
            spa.UseReactDevelopmentServer(npmScript: "start");
        }
    });
});

Run Code Online (Sandbox Code Playgroud)

转到/client和/admin路由提供正确的 Reactindex.html文件，但链接的捆绑.js文件不会加载。以下是ClientAppSPA的最终索引 HTML 的示例： …

single-page-application reactjs asp.net-core asp-net-core-spa-services

Bri*_*nga

lucky-day

5
推荐指数

1
解决办法

1003
查看次数