CODEWITHSUNDEEP
angulariisasp.net-coreiis-express
bitshift
bitshift

Reputation: 6842

asp.net core web app publish command doesnt deploy angular client app correctly

Two different web apps. Both of which start out with the asp.net core w/angular template. In the 2nd case Im generating an angular6 app. The angular6 app runs fine locally. Its the publish step from visual studio where things go sideways in the 2nd case.


(1) A test case using the asp.net core w/angular 5 template. Works fine, publishes to a local IIS website and works fine there too. When publishing to IIS, I get the 'ClientApp' folder

package.json scripts section

"name": "aspnetcore_dummy1",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --extract-css",
    "build": "ng build --extract-css",
    "build:ssr": "npm run build -- --app=ssr --output-hashing=media",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

from tsconfig.json

"compilerOptions": {
    "outDir": "./dist/out-tsc",

(2)
asp.net core app w/angular 6 project.json scripts section

  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

from tsconfig.json

  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",

In both cases, this is what Startup.cs looks like for ConfigureServices

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);

    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "ClientApp/dist";
    });



}

However, when published to IIS, case (1) is correct with a ClientApp/dist folder but (2) Im not getting the 'dist' folder under ClientApp, but rather the 'e2e', 'src' folder and some of the settings files. See image

enter image description here

[update] - what is in the csproj file that works and is NOT in the other csproj file

 <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>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

Upvotes: 3

Views: 5322

Answers (1)

bitshift
bitshift

Reputation: 6842

On suggested comment above from itmius, I looked into the details of the project file. This is indeed where much of the action takes place during publishing. Rather that trying to track down this and/or any other "left over" configuration parts, I simply started with a blank slate - a new asp.net core w/angular project template, then copied over my existing clientapp folder and I was back in business.

Upvotes: 1

Related Questions