Notitie
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen u aan te melden of de directory te wijzigen.
Voor toegang tot deze pagina is autorisatie vereist. U kunt proberen de mappen te wijzigen.
Opmerking
Dit is niet de nieuwste versie van dit artikel. Zie de .NET 9-versie van dit artikel voor de huidige release.
Waarschuwing
Deze versie van ASP.NET Core wordt niet meer ondersteund. Zie het .NET- en .NET Core-ondersteuningsbeleid voor meer informatie. Zie de .NET 9-versie van dit artikel voor de huidige release.
Belangrijk
Deze informatie heeft betrekking op een pre-releaseproduct dat aanzienlijk kan worden gewijzigd voordat het commercieel wordt uitgebracht. Microsoft geeft geen garanties, uitdrukkelijk of impliciet, met betrekking tot de informatie die hier wordt verstrekt.
Zie de .NET 9-versie van dit artikel voor de huidige release.
Visual Studio biedt projectsjablonen voor het maken van apps met één pagina (SPA's) op basis van JavaScript-frameworks zoals Angular-, Reacten Vue- met een ASP.NET Core-back-end. Deze sjablonen:
- Maak een Visual Studio-oplossing met een front-endproject en een back-endproject.
- Gebruik het Visual Studio-projecttype voor JavaScript en TypeScript (.esproj) voor de front-end.
- Gebruik een ASP.NET Core-project voor de back-end.
Projecten die zijn gemaakt met behulp van de Visual Studio-sjablonen kunnen worden uitgevoerd vanaf de opdrachtregel in Windows, Linux en macOS. Als u de app wilt uitvoeren, gebruikt u dotnet run --launch-profile https
om het serverproject uit te voeren. Als u het serverproject uitvoert, wordt de front-end JavaScript-ontwikkelserver automatisch gestart. Het https
startprofiel is momenteel vereist.
Visual Studio-handleidingen
Volg een van de zelfstudies in de Visual Studio-documentatie om aan de slag te gaan:
- Een ASP.NET Core-app maken met Angular
- Een ASP.NET Core-app maken met React
- Een ASP.NET Core-app maken met Vue
Zie JavaScript en TypeScript in Visual Studio voor meer informatie
ASP.NET Core SPA-sjablonen
Visual Studio bevat sjablonen voor het bouwen van ASP.NET Core-apps met een JavaScript- of TypeScript-front-end. Deze sjablonen zijn beschikbaar in Visual Studio 2022 versie 17.8 of hoger met de ASP.NET en webontwikkeling workload geïnstalleerd.
De Visual Studio-sjablonen voor het bouwen van ASP.NET Core-apps met een JavaScript- of TypeScript-front-end bieden de volgende voordelen:
- Schone projectscheiding voor de front-end en back-end.
- Blijf up-to-up-to-date met de nieuwste front-end frameworkversies.
- Integreer met de nieuwste command-linetools voor frontend-frameworks, zoals Vite.
- Sjablonen voor zowel JavaScript & TypeScript (alleen TypeScript voor Angular).
- Uitgebreide bewerkingservaring voor JavaScript- en TypeScript-code.
- Integreer JavaScript-buildhulpprogramma's met de .NET-build.
- gebruikersinterface voor npm-afhankelijkheidsbeheer.
- Compatibel met foutopsporing en startconfiguratie van Visual Studio Code.
- Voer frontend-unittests uit in Test Explorer met behulp van JavaScript-testframeworks.
Verouderde ASP.NET Core SPA-sjablonen
Eerdere versies van de .NET SDK bevatten wat nu verouderde sjablonen zijn voor het bouwen van SPA-apps met ASP.NET Core. Zie de .NET 7-versie van het SPA-overzicht en de artikelen over Angular en React voor documentatie over deze oudere sjablonen.
Architectuur van toepassingssjablonen met één pagina
De SPA-sjablonen (Single Page Application) voor Angular en React bieden de mogelijkheid om Angular- en React-apps te ontwikkelen die worden gehost in een .NET-back-endserver.
Tijdens het publiceren worden de bestanden van de Angular- en React-app gekopieerd naar de wwwroot
map en worden ze geleverd via de middleware voor statische bestanden.
In plaats van HTTP 404 (Niet gevonden) te retourneren, verwerkt een terugvalroute onbekende aanvragen naar de back-end en dient deze de index.html
voor de SPA.
Tijdens de ontwikkeling is de app geconfigureerd voor het gebruik van de front-endproxy. React en Angular gebruiken dezelfde front-endproxy.
Wanneer de app wordt gestart, wordt de index.html
pagina geopend in de browser. Een speciale middleware die alleen tijdens ontwikkeling is ingeschakeld.
- Onderschept de binnenkomende aanvragen.
- Controleert of de proxy wordt uitgevoerd.
- Verwijst naar de URL van de proxy als deze actief is, of start een nieuw exemplaar van de proxy.
- Hiermee wordt een pagina naar de browser teruggestuurd die elke paar seconden automatisch ververst totdat de proxy in werking is en de browser wordt doorverwezen.
Het belangrijkste voordeel van de ASP.NET Core SPA-sjablonen bieden:
- Start een proxy als deze nog niet actief is.
- HTTPS instellen.
- Het configureren van sommige aanvragen die moeten worden geproxied naar de back-end ASP.NET Core-server.
Wanneer de browser een verzoek voor een back-end-eindpunt verzendt, bijvoorbeeld /weatherforecast
in de sjablonen. De SPA-proxy ontvangt het verzoek en stuurt het transparant terug naar de server. De server reageert en de beveiligd-WACHTWOORDVERIFICATIE-proxy stuurt de aanvraag terug naar de browser:
Gepubliceerde apps met één pagina
Wanneer de app wordt gepubliceerd, wordt de beveiligd-WACHTWOORDVERIFICATIE een verzameling bestanden in de wwwroot
map.
Er is geen runtimeonderdeel vereist voor de app:
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddControllersWithViews();
var app = builder.Build();
if (!app.Environment.IsDevelopment())
{
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
app.MapFallbackToFile("index.html");
app.Run();
In het voorgaande sjabloon gegenereerde Program.cs
bestand:
-
app.
UseStaticFiles staat toe dat de bestanden worden geleverd. -
app.
MapFallbackToFile("index.html")
maakt het mogelijk om het standaarddocument te leveren voor een onbekende aanvraag die de server ontvangt.
Wanneer de app wordt gepubliceerd met dotnet publish, zorgt de volgende taken in het csproj
bestand ervoor dat npm restore
wordt uitgevoerd en dat het juiste NPM-script wordt uitgevoerd om de productieartefacten te genereren:
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
<!-- Ensure Node.js is installed -->
<Exec Command="node --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
</Exec>
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
<Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
</Target>
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="$(SpaRoot)build\**" />
<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
<RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
</ResolvedFileToPublish>
</ItemGroup>
</Target>
</Project>
Apps met één pagina ontwikkelen
Het projectbestand definieert enkele eigenschappen waarmee het gedrag van de app tijdens de ontwikkeling wordt bepaald:
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>net7.0</TargetFramework>
<Nullable>enable</Nullable>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
<IsPackable>false</IsPackable>
<SpaRoot>ClientApp\</SpaRoot>
<DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
<SpaProxyServerUrl>https://localhost:44414</SpaProxyServerUrl>
<SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="7.0.1" />
</ItemGroup>
<ItemGroup>
<!-- Don't publish the SPA source files, but do show them in the project files list -->
<Content Remove="$(SpaRoot)**" />
<None Remove="$(SpaRoot)**" />
<None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
</ItemGroup>
<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
<!-- Ensure Node.js is installed -->
<Exec Command="node --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
</Exec>
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
<Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
</Target>
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="$(SpaRoot)build\**" />
<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
<RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
</ResolvedFileToPublish>
</ItemGroup>
</Target>
</Project>
-
SpaProxyServerUrl
: Hiermee bepaalt u de URL waar de server verwacht dat de SPA-proxy wordt uitgevoerd. Dit is de URL:- De server pingt na het starten van de proxy om te weten of deze gereed is.
- Waar de browser naartoe wordt omgeleid na een succesvolle respons.
-
SpaProxyLaunchCommand
: De opdracht die de server gebruikt om de SPA-proxy te starten wanneer er wordt gedetecteerd dat de proxy niet actief is.
Het pakket Microsoft.AspNetCore.SpaProxy
is verantwoordelijk voor de voorgaande logica voor het detecteren van de proxy en het omleiden van de browser.
De hosting startup-assembly die in Properties/launchSettings.json
is gedefinieerd, wordt gebruikt om tijdens de ontwikkeling automatisch de vereiste componenten toe te voegen die nodig zijn om te detecteren of de proxy actief is en deze anders op te starten.
{
"iisSettings": {
"windowsAuthentication": false,
"anonymousAuthentication": true,
"iisExpress": {
"applicationUrl": "http://localhost:51783",
"sslPort": 44329
}
},
"profiles": {
"MyReact": {
"commandName": "Project",
"launchBrowser": true,
"applicationUrl": "https://localhost:7145;http://localhost:5273",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development",
"ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
}
},
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development",
"ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
}
}
}
}
Installatie voor de client-app
Deze installatie is specifiek voor het front-endframework dat door de app wordt gebruikt, maar veel aspecten van de configuratie zijn vergelijkbaar.
Angular-configuratie
Het door de sjabloon gegenereerde ClientApp/package.json
bestand:
{
"name": "myangular",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"prestart": "node aspnetcore-https",
"start": "run-script-os",
"start:windows": "ng serve --port 44483 --ssl --ssl-cert \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.pem\" --ssl-key \"%APPDATA%\\ASP.NET\\https\\%npm_package_name%.key\"",
"start:default": "ng serve --port 44483 --ssl --ssl-cert \"$HOME/.aspnet/https/${npm_package_name}.pem\" --ssl-key \"$HOME/.aspnet/https/${npm_package_name}.key\"",
"build": "ng build",
"build:ssr": "ng run MyAngular:server:dev",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"@angular/animations": "^14.1.3",
"@angular/common": "^14.1.3",
"@angular/compiler": "^14.1.3",
"@angular/core": "^14.1.3",
"@angular/forms": "^14.1.3",
"@angular/platform-browser": "^14.1.3",
"@angular/platform-browser-dynamic": "^14.1.3",
"@angular/platform-server": "^14.1.3",
"@angular/router": "^14.1.3",
"bootstrap": "^5.2.0",
"jquery": "^3.6.0",
"oidc-client": "^1.11.5",
"popper.js": "^1.16.0",
"run-script-os": "^1.1.6",
"rxjs": "~7.5.6",
"tslib": "^2.4.0",
"zone.js": "~0.11.8"
},
"devDependencies": {
"@angular-devkit/build-angular": "^14.1.3",
"@angular/cli": "^14.1.3",
"@angular/compiler-cli": "^14.1.3",
"@types/jasmine": "~4.3.0",
"@types/jasminewd2": "~2.0.10",
"@types/node": "^18.7.11",
"jasmine-core": "~4.3.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.1",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.0.0",
"typescript": "~4.7.4"
},
"overrides": {
"autoprefixer": "10.4.5"
},
"optionalDependencies": {}
}
Bevat scripts waarmee de angular-ontwikkelserver wordt gestart:
Het
prestart
script roeptClientApp/aspnetcore-https.js
aan, dat verantwoordelijk is voor ervoor zorgen dat het HTTPS-certificaat van de ontwikkelingsserver beschikbaar is voor de SPA-proxyserver.De
start:windows
enstart:default
:- Start de Angular-ontwikkelserver via
ng serve
. - Geef de poort, de opties voor het gebruik van HTTPS en het pad naar het certificaat en de bijbehorende sleutel op. Het opgegeven poortnummer komt overeen met het poortnummer dat is opgegeven in het
.csproj
bestand.
- Start de Angular-ontwikkelserver via
Het door de sjabloon gegenereerde ClientApp/angular.json
bestand bevat:
De
serve
opdracht.Een
proxyconfig
element in dedevelopment
configuratie om aan te geven datproxy.conf.js
moet worden gebruikt om de front-endproxy te configureren, zoals wordt weergegeven in de volgende gemarkeerde JSON:{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "version": 1, "newProjectRoot": "projects", "projects": { "MyAngular": { "projectType": "application", "schematics": { "@schematics/angular:application": { "strict": true } }, "root": "", "sourceRoot": "src", "prefix": "app", "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "progress": false, "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", "allowedCommonJsDependencies": [ "oidc-client" ], "assets": [ "src/assets" ], "styles": [ "node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.css" ], "scripts": [] }, "configurations": { "production": { "budgets": [ { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }, { "type": "anyComponentStyle", "maximumWarning": "2kb", "maximumError": "4kb" } ], "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "outputHashing": "all" }, "development": { "buildOptimizer": false, "optimization": false, "vendorChunk": true, "extractLicenses": false, "sourceMap": true, "namedChunks": true } }, "defaultConfiguration": "production" }, "serve": { "builder": "@angular-devkit/build-angular:dev-server", "configurations": { "production": { "browserTarget": "MyAngular:build:production" }, "development": { "browserTarget": "MyAngular:build:development", "proxyConfig": "proxy.conf.js" } }, "defaultConfiguration": "development" }, "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n", "options": { "browserTarget": "MyAngular:build" } }, "test": { "builder": "@angular-devkit/build-angular:karma", "options": { "main": "src/test.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", "assets": [ "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [] } }, "server": { "builder": "@angular-devkit/build-angular:server", "options": { "outputPath": "dist-server", "main": "src/main.ts", "tsConfig": "tsconfig.server.json" }, "configurations": { "dev": { "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "extractLicenses": true, "vendorChunk": true }, "production": { "optimization": true, "outputHashing": "all", "sourceMap": false, "namedChunks": false, "extractLicenses": true, "vendorChunk": false } } } } } }, "defaultProject": "MyAngular" }
ClientApp/proxy.conf.js
definieert de routes die moeten worden teruggezet naar de back-end van de server. De algemene set opties wordt gedefinieerd op http-proxy-middleware voor react en angular, omdat beide dezelfde proxy gebruiken.
De volgende gemarkeerde code uit ClientApp/proxy.conf.js
gebruikt logica gebaseerd op de omgevingsvariabelen die tijdens de ontwikkeling zijn ingesteld om te bepalen op welke poort de backend draait.
const { env } = require('process');
const target = env.ASPNETCORE_HTTPS_PORTS ? `https://localhost:${env.ASPNETCORE_HTTPS_PORTS}` :
env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:51951';
const PROXY_CONFIG = [
{
context: [
"/weatherforecast",
],
target: target,
secure: false,
headers: {
Connection: 'Keep-Alive'
}
}
]
module.exports = PROXY_CONFIG;
React-installatie
De
package.json
sectie scripts bevat de volgende scripts waarmee de react-app tijdens de ontwikkeling wordt gestart, zoals wordt weergegeven in de volgende gemarkeerde code:{ "name": "myreact", "version": "0.1.0", "private": true, "dependencies": { "bootstrap": "^5.2.0", "http-proxy-middleware": "^2.0.6", "jquery": "^3.6.0", "merge": "^2.1.1", "oidc-client": "^1.11.5", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-bootstrap": "^0.26.2", "react-router-dom": "^6.3.0", "react-scripts": "^5.0.1", "reactstrap": "^9.1.3", "rimraf": "^3.0.2", "web-vitals": "^2.1.4", "workbox-background-sync": "^6.5.4", "workbox-broadcast-update": "^6.5.4", "workbox-cacheable-response": "^6.5.4", "workbox-core": "^6.5.4", "workbox-expiration": "^6.5.4", "workbox-google-analytics": "^6.5.4", "workbox-navigation-preload": "^6.5.4", "workbox-precaching": "^6.5.4", "workbox-range-requests": "^6.5.4", "workbox-routing": "^6.5.4", "workbox-strategies": "^6.5.4", "workbox-streams": "^6.5.4" }, "devDependencies": { "ajv": "^8.11.0", "cross-env": "^7.0.3", "eslint": "^8.22.0", "eslint-config-react-app": "^7.0.1", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.26.0", "eslint-plugin-jsx-a11y": "^6.6.1", "eslint-plugin-react": "^7.30.1", "nan": "^2.16.0", "typescript": "^4.7.4" }, "overrides": { "autoprefixer": "10.4.5" }, "resolutions": { "css-what": "^5.0.1", "nth-check": "^3.0.1" }, "scripts": { "prestart": "node aspnetcore-https && node aspnetcore-react", "start": "rimraf ./build && react-scripts start", "build": "react-scripts build", "test": "cross-env CI=true react-scripts test --env=jsdom", "eject": "react-scripts eject", "lint": "eslint ./src/" }, "eslintConfig": { "extends": [ "react-app" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
Het
prestart
script roept het volgende aan:-
aspnetcore-https.js
, die ervoor moet zorgen dat het HTTPS-certificaat van de ontwikkelingsserver beschikbaar is voor de SPA-proxyserver. - Roept
aspnetcore-react.js
aan om het juiste.env.development.local
bestand in te stellen voor gebruik van het HTTPS-ontwikkelingscertificaat lokaal.aspnetcore-react.js
configureert het lokale HTTPS-ontwikkelingscertificaat doorSSL_CRT_FILE=<certificate-path>
enSSL_KEY_FILE=<key-path>
aan het bestand toe te voegen.
-
Het
.env.development
bestand definieert de poort voor de ontwikkelserver en geeft HTTPS op.
Hiermee configureert src/setupProxy.js
de SPA-proxy om de verzoeken door te sturen naar de back-end. De algemene set opties wordt gedefinieerd in http-proxy-middleware.
De volgende gemarkeerde code in ClientApp/src/setupProxy.js
maakt gebruik van logica op basis van de omgevingsvariabelen die tijdens de ontwikkeling zijn ingesteld om te bepalen op welke poort de back-end wordt uitgevoerd:
const { createProxyMiddleware } = require('http-proxy-middleware');
const { env } = require('process');
const target = env.ASPNETCORE_HTTPS_PORTS ? `https://localhost:${env.ASPNETCORE_HTTPS_PORTS}` :
env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:51783';
const context = [
"/weatherforecast",
];
const onError = (err, req, resp, target) => {
console.error(`${err.message}`);
}
module.exports = function (app) {
const appProxy = createProxyMiddleware(context, {
target: target,
// Handle errors to prevent the proxy middleware from crashing when
// the ASP NET Core webserver is unavailable
onError: onError,
secure: false,
// Uncomment this line to add support for proxying websockets
//ws: true,
headers: {
Connection: 'Keep-Alive'
}
});
app.use(appProxy);
};
Ondersteunde SPA-frameworkversie in ASP.NET Core SPA-sjablonen
nl-NL: De SPA-projectsjablonen die worden meegeleverd met elke ASP.NET Core-release verwijzen naar de nieuwste versie van het juiste SPA-framework.
SPA-frameworks hebben doorgaans een kortere releasecyclus dan .NET. Vanwege de twee verschillende releasecycli kan de ondersteunde versie van het SPA-framework en .NET uit de pas lopen: de belangrijkste versie van het SPA-framework, waarvan een belangrijke .NET-release afhankelijk is, kan de ondersteuning verliezen, terwijl de .NET-versie waarmee het SPA-framework is uitgebracht nog steeds wordt ondersteund.
De ASP.NET Core SPA-sjablonen kunnen worden bijgewerkt in een patch-release naar een nieuwe SPA frameworkversie om de sjablonen in een ondersteunde en veilige toestand te houden.