CODEWITHSUNDEEP
angularazureasp.net-corevisual-studio-codeazure-web-app-service
OrcusZ
OrcusZ

Reputation: 3660

Error on publishing .net core 2.0 angular spa web app on azure

Since this morning, I'm trying to publish from visual studio code with the azure app service extension my Angular Spa application but when I try to navigate to the url, I get this page :

enter image description here

I publish my file into my pc using this CLI command :

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

My csproj look like this : 

<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>

Upvotes: 1

Views: 870

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

I had the same issue and i was able to solve it by following the details,

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

The problem i had was i had to edit my package.json file and remove the --extractCss parameter from the start and build property. from:

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

to:

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

Upvotes: 2

Related Questions