我在 Visual Studio 2019 中创建了一个 Asp.Net Core 3.1 MVC 项目，然后使用 Angular 9 创建了一个新的 Angular 客户端应用程序(在这个 tutorial 之后)。当我分别运行客户端和服务器时，我能够看到我的 Angular 组件在我的 View 中运行。然后我修改了我的 startup.cs 以包含运行 SPA，以便我可以同时运行它们。
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
if (!env.IsDevelopment())
{
app.UseSpaStaticFiles();
}
app.UseRouting();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
});
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 = "angularApp";
if (env.IsDevelopment())
{
spa.UseAngularCliServer(npmScript: "start");
}
});
}
此行
spa.UseAngularCliServer(npmScript: "start");确实着火了，但似乎什么也没发生。这是我的 package.json
{
"name": "angular-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~9.1.0-rc.0",
"@angular/cdk": "^9.1.3",
"@angular/common": "~9.1.0-rc.0",
"@angular/compiler": "~9.1.0-rc.0",
"@angular/core": "~9.1.0-rc.0",
"@angular/elements": "^9.1.0-rc.0",
"@angular/forms": "~9.1.0-rc.0",
"@angular/material": "^9.1.3",
"@angular/platform-browser": "~9.1.0-rc.0",
"@angular/platform-browser-dynamic": "~9.1.0-rc.0",
"@angular/router": "~9.1.0-rc.0",
"document-register-element": "^1.7.2",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.7",
"@angular/cli": "~9.0.7",
"@angular/compiler-cli": "~9.1.0-rc.0",
"@angular/language-service": "~9.1.0-rc.0",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}
}
.csproj 文件
<Project Sdk="Microsoft.NET.Sdk.Web">
<PropertyGroup>
<TargetFramework>netcoreapp3.1</TargetFramework>
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
<TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
<IsPackable>false</IsPackable>
<SpaRoot>angularApp\</SpaRoot>
<DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
<!-- Set this to true if you enable server-side prerendering -->
<BuildServerSideRenderer>false</BuildServerSideRenderer>
</PropertyGroup>
<ItemGroup>
<None Include="wwwroot\images\Symbols\A.png" />
<None Include="wwwroot\images\Symbols\B.png" />
<None Include="wwwroot\images\Symbols\C.png" />
<None Include="wwwroot\images\Symbols\D.png" />
<None Include="wwwroot\images\Symbols\E.png" />
<None Include="wwwroot\images\Symbols\F.png" />
<None Include="wwwroot\images\Symbols\G.png" />
<None Include="wwwroot\images\Symbols\H.png" />
<None Include="wwwroot\images\Symbols\I.png" />
<None Include="wwwroot\images\Symbols\J.png" />
<None Include="wwwroot\images\Symbols\K.png" />
<None Include="wwwroot\images\Symbols\L.png" />
<None Include="wwwroot\images\Symbols\Letters.ai" />
<None Include="wwwroot\images\Symbols\M.png" />
<None Include="wwwroot\images\Symbols\N.png" />
<None Include="wwwroot\images\Symbols\O.png" />
<None Include="wwwroot\images\Symbols\P.png" />
<None Include="wwwroot\images\Symbols\Q.png" />
<None Include="wwwroot\images\Symbols\R.png" />
<None Include="wwwroot\images\Symbols\S.png" />
<None Include="wwwroot\images\Symbols\T.png" />
<None Include="wwwroot\images\Symbols\U.png" />
<None Include="wwwroot\images\Symbols\V.png" />
<None Include="wwwroot\images\Symbols\W.png" />
<None Include="wwwroot\images\Symbols\X.png" />
<None Include="wwwroot\images\Symbols\Y.png" />
<None Include="wwwroot\images\Symbols\Z.png" />
</ItemGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation" Version="3.1.2" />
<PackageReference Include="Microsoft.AspNetCore.SpaServices" Version="3.1.2" />
<PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.1.2" />
<PackageReference Include="Microsoft.TypeScript.MSBuild" Version="3.8.3">
<PrivateAssets>all</PrivateAssets>
<IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
</PackageReference>
<PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="3.1.1" />
<PackageReference Include="Newtonsoft.Json" Version="12.0.3" />
</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>
<ItemGroup>
<None Remove="angularApp\src\app\common\common.ts" />
</ItemGroup>
<ItemGroup>
<Folder Include="angularApp\src\app\services\" />
</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 -- --prod" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
<DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
</ResolvedFileToPublish>
</ItemGroup>
</Target>
</Project>
有人可以让我知道我错过了什么吗？
谢谢!
最佳答案
改变:"start": "ng serve"
至:"start": "echo hello && ng serve"
这个问题很好解释here
关于c# - Angular 9 组件和 .NET Core 应用程序未作为 SPA 运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60804203/