CODEWITHSUNDEEP
angularvisual-studiobuild.net-corepublish
MoeinMP
MoeinMP

Reputation: 137

How Define <base href="/ProjectName/"> for Angular Project By Visual Studio Publish?

I have a .Net Core API project that includes an Angular version 7 project, so I do not want to change the index.html source code each time manually,

index.html 

<base href="/">

manually each time when I build development version (VS -> href ="/" -> IIS Express ) then build production version by Visual Studio publish (VS-> href="/ProjectName/" -> Right-Click On Project -> Publish...), I believe it does not make sense!

N.B. As I publish and build angular project by VS publish feature I don't access to this commands,

ng build --prod --base-href /ProjectName/

or any different type of this command

I am looking for a solution to handle this issue by configuration or something like this.

Thanks a lot!

Upvotes: 2

Views: 3287

Answers (4)

user2030561
user2030561

Reputation: 99

Expanding on Ravi's answer above. I had to nest the conditionals inside the <Target node of the csproj to get this to work:

<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
  <PropertyGroup>
      <BaseHref Condition="'$(Configuration)' == 'Debug' Or '$(Configuration)' == 'Release'">/MyDefaultRoot/</BaseHref>
      <BaseHref Condition="'$(Configuration)' == 'QA'">/MyDefaultRootQA/</BaseHref>
  </PropertyGroup>
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod --base-href $(BaseHref)" />

Upvotes: 0

Ravi
Ravi

Reputation: 408

I am using .net core MVC with Angular8 project.

For reference: https://learn.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-3.1&tabs=visual-studio

I updated the csproj file for setting the base-href for npm build action.

Steps :

  1. Use <Choose> <When> msbuild elements in csproj

For setting base-href variable based on Build Configuration parameter.

<Choose>
<When Condition="'$(Configuration)' == 'Debug' Or '$(Configuration)' == 'Release'">
  <PropertyGroup>
    <BaseHref>/</BaseHref>
  </PropertyGroup>
</When>   
<When Condition="'$(Configuration)' == 'environment'">
  <PropertyGroup>
    <BaseHref>/BaseHrefUrl/</BaseHref>
  </PropertyGroup>
</When></Choose>

<BaseHref> is the custom element

  1. Use BaseHref as parameter in npm build
<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 --base-href $(BaseHref)" />
  <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>
  1. Change the Build configuration to specific environment.

Based on Choose When condition it will set the BaseHref

npm run build -- --prod --base-href /BaseHrefUrl/

ng build "--prod" "--base-href" "/BaseHrefUrl/"

Upvotes: 2

savinn
savinn

Reputation: 78

Add it to package.json for build script "build": 

ng build --prod --aot  --base-href /ProjectName/

Upvotes: 3

MoeinMP
MoeinMP

Reputation: 137

So based on @savinn solution that it works charming, I try to explain the solution one more time,

In Angular project veriosn 7, I have index.hmtl, like this

index.html

<base href="/">

it works properly to run the application on Development mode on IIS Express (F5),

but for production mode you need to define the projcet name like this

index.html

  <base href="/ProjectName/">

but you could not change it each time and check-in your source code, so based on @savinn solution you can set the

package.json

 "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --aot --base-href /ProjectName/",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

now, when you publish your project on IIS by Visual Studio 2017, it runs this ng build, and on published index.html file on IIS you can see this

Published index.html on IIS, ClientApp\dist\index.html

 <base href="/ProjectName/">

so without changing the index.html you can run app as development mode, and publish it by VS publish on IIS.

Upvotes: 3

Related Questions