在 azure 上发布 .net core 2.0 angular spa web 应用程序时出错答案

【问题标题】：Error on publishing .net core 2.0 angular spa web app on azure在 azure 上发布 .net core 2.0 angular spa web 应用程序时出错
【发布时间】：2019-01-05 22:17:57
【问题描述】：

从今天早上开始，我尝试使用 azure app service 扩展从 Visual Studio 代码发布我的 Angular Spa 应用程序，但是当我尝试导航到 url 时，我得到了这个页面：

我使用这个 CLI 命令将我的文件发布到我的电脑中：

dotnet build -c Release && dotnet publish -c Release --output "./release"

我的 csproj 看起来像这样：

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.1</TargetFramework>
    <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
    <TypeScriptToolsVersion>Latest</TypeScriptToolsVersion>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
    <UserSecretsId>b7354f74-12e8-4958-a0d5-4fdc25e86285</UserSecretsId>

    <!-- Set this to true if you enable server-side prerendering -->
    <BuildServerSideRenderer>false</BuildServerSideRenderer>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.App" Version="2.1.1"/>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="2.1.1" />
    <PackageReference Include="Gardendynamics.Commons" Version="1.0.0-ci-76" />
    <PackageReference Include="Gardendynamics.Tiers" Version="1.0.0-ci-50" />
  </ItemGroup>

  <ItemGroup>
    <ProjectReference Include="..\PicaplantBack.Database\PicaplantBack.Database.csproj" IncludeAssets="All" />
  </ItemGroup>
  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content 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 run build:preprod" />
    <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>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
</Project>

【问题讨论】：

标签： angular azure asp.net-core visual-studio-code azure-web-app-service

【解决方案1】：

我遇到了同样的问题，我可以按照详细信息解决它，

https://github.com/angular/angular-cli/issues/10666

我遇到的问题是我必须编辑我的 package.json 文件并从 start 和 build 属性中删除 --extractCss 参数。来自：

"scripts": {
    "ng": "ng",
    "start": "ng serve --extract-css",

到：

"scripts": {
    "ng": "ng",
    "start": "ng serve",

【讨论】：