Automated Angular component build

When compiling ITsynch.Suite.Identity.Application project, an automated build is executed to generate the javascript and css binary files that are used in the views.

To do that, we are using MSBuild to set up a few environment variables:

• The Angular Path variable defines the expected path where to find the angular project. This is set inside the default.props file

      <!-- ITsynch.Suite/dotnet/default.props -->
      <PropertyGroup>
          <AngularPath>$(MSBuildThisFileDirectory)..\angular</AngularPath>
      </PropertyGroup>
  

• The yarn command is the command that will be executed in the AngularPath. This command will build the identity-elements angular project.

• The Artifacts Path is the path where the files generated by the previous build will be located. This files will be embedded into the Identity.Application assembly.

• The Elements Path is the path where the Artifacts files will be copied to be used when building Identity with Docker. Every file will be embedded into the Identity.Application assembly.

• The RunAngularBuild flag indicates when to run the automated build. By default the value is false. If true, the automated build will be run.

    <PropertyGroup>
        <BuildScript>run identity-elements:build</BuildScript>
        <ElementsPath>$([System.IO.Path]::GetFullPath($(SolutionDir)ITsynch.Suite.Identity.Application\wwwroot\lib\elements))</ElementsPath>
        <ArtifactsPath>$(AngularPath)\dist\apps\identity-elements</ArtifactsPath>
        <RunAngularBuild>false</RunAngularBuild>
    </PropertyGroup>

The Automated build consist of three steps:

1. First, the yarn command is executed. If the build is successful the result files will be located at the Artifacts Path.

       <Target Name="BuildComponent">
           <Message Text="Building Components..." Importance="High" />
           <Exec Command="yarn --cwd $(AngularPath) $(BuildScript)" />
       </Target>
   

2. After the angular build is finished, the generated files will be located at the Artifacts Path and copied into the Elements Path. This step is needed to build Identity locally with docker.

       <Target Name="CopyArtifacts">
           <Message Text="Copying artifact to identity project..." Importance="high"/>
           <Exec Command="cp -a $(ArtifactsPath)\. $(ElementsPath)"/>
       </Target>
   

3. To complete the process, the files located at the Artifacts Path are directly embedded into the Identity.Application assembly.

       <Target Name="EmbedArtifacts">
           <Message Text="Adding artifacts to the project assembly..." Importance="High" />
           <ItemGroup>
               <FilesToEmbed Include="$(ArtifactsPath)\**\*.*" />
               <EmbeddedResource Include="@(FilesToEmbed)" CopyToOutputDirectory="Never">
                   <!--REMARKS: Changing the namespace prefix will require code changes-->
                   <Link>wwwroot.lib.elements.%(Filename)%(Extension)</Link>
               </EmbeddedResource>
           </ItemGroup>
       </Target>