Angular-cli: Create msbuild task

[HarelM]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Versions.

Any

Desired functionality.

Be able to compile a project in vs2017 with .net core and when the build completes to be able to see the errors or run the app on a successful build.
Use the --prod flag for a Release build and not use it for a Debug build.
Be able to use this task on a CI build agent to reduce custom scripts.

Mention any other details that might be useful.

I'm currently developing a site in VS2017 using angular-cli to build my client side project.
It would help a lot if I wouldn't need to step out of visual studio in order to build the angular app.
When an error occurs in the compilation it would help to be able to click on that error and that the relevant file will be opened at the relevant line much like any other errors.
The intellisence and red squiglish error lines of VS makes it a very productive environment for typescript.
I suppose this needs to be done with the cooperation of Microsoft but I think it will benefit everyone.

[filipesilva]

I agree that better integration with VS2017 would be a good thing to have, but I don't know much about how those tasks work and how to make them. Adding editor specific files to new projects is not something we'd want to do either though.

Is this the kind of thing where documentation is enough?

[HarelM]

I don't think documentation will be enough as I don't think you can write something to help the end user make it work.
msbuild tasks can be written in C# and added to the project using NuGet. this way once you write an msbuild task and publish it on NuGet you can write in the documentation for visual studio how to add this task to the relevant project file.
I haven't written a msbuild task myself but how hard can it be, right? :-)

[umarkashmiri]

I have created MS Build Targets for asp.net core 2.0 + Angular CLI for one of my project and those are working well for me so far. hope this would help.

I will host it on nuget as a target package whenever I get time, in the mean while, you can add the following at the end of your csproj file.

<Target Name="CheckDirectoryForEmpty" BeforeTargets="DebugRunWebpack">
    <PropertyGroup>
      <EmptyCheck>./wwwroot/*.*</EmptyCheck>
    </PropertyGroup>
    <ItemGroup>
      <EmptyCheck Include="$(EmptyCheck)" />
    </ItemGroup>
  </Target>

  <Target Name="DebugRunWebpack" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And '@(EmptyCheck)' == ''">
    <!-- 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." />

    <!-- In development, the dist files won't exist on the first run or when cloning to
         a different machine, so rebuild them if not already present. -->
    <Message Importance="high" Text="Starting Ng Build for development" />
    <Exec Command="ng build --target=development --environment=dev" />
  </Target>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
    <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
    <Exec Command="npm install" />
    <Message Importance="high" Text="Starting Ng Build for production" />
    <Exec Command="ng build --target=production --environment=prod" />
    <Message Importance="high" Text="Ng Build for production ended" />
    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="wwwroot\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

[HarelM]

@umarkashmiri Cool! thanks a lot!
Can you confirm that the above script assumes that the output of ng build is configured in tsconfig.json to be wwwroot (I have the same configuration so I don't see a real issue here).
Did you configure all your .ts, .css and .html files (the sources for ng build compilation) to not be content type so they won't get published?
Did you add the above code to the csproj file that holds your site or are did you add it as a different file?
Will it work for versions before 2.0? The statement mean you tested it only on 2.0 and it might work on previous version or you tried it and it didn't work?
I'm currently using 1.1, and while I plan to migrate it will take some time...

[umarkashmiri]

yes output is configured as wwwroot, that's i am copying it over the following line
<DistFiles Include="wwwroot\**" />
yes, they won't be published.
you can do in both ways either paste this in .target file and include into your csproj or directly add it.
you can try that out for the previous version. you might need to do the little tweaks for copying files using xcopy, but try it first.

[HarelM]

Here's what I eventually used, unfortunately when publishing, build is called twice.
But I wanted to allow the options of creating a release build locally.

  <Target Name="NodeInitialize">
    <!-- 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="Installing all npm packages" />
    <Exec Command="npm install" />
  </Target>

  <Target Name="DebugRunNgBuild" BeforeTargets="Build" DependsOnTargets="NodeInitialize" Condition=" '$(Configuration)' == 'Debug' and '$(DeployOnBuild)' != 'true'">
    <Message Importance="high" Text="Starting Ng Build for development" />
    <Exec Command="ng build --target=development --environment=dev --no-progress" />
    <Message Importance="high" Text="Ng Build for development ended" />
  </Target>

  <Target Name="ReleaseRunNgBuild" BeforeTargets="Build" DependsOnTargets="NodeInitialize" Condition=" '$(Configuration)' == 'Release' and '$(DeployOnBuild)' != 'true'">
    <Message Importance="high" Text="Starting Ng Build for production" />
    <Exec Command="ng build --target=production --environment=prod --no-progress" />
    <Message Importance="high" Text="Ng Build for production ended" />
  </Target>

Edit - updated code to fix an issue with compilation done twice on publish build.
Based on the following issue:
https://developercommunity.visualstudio.com/content/problem/27585/postbuildevent-runs-twice-during-publish-build-pub.html?childToView=119421#comment-119421

[woppa684]

For this part:

When an error occurs in the compilation it would help to be able to click on that error and 
that the relevant file will be opened at the relevant line much like any other errors.

I think the only thing you need we need is to have the error string be in a different format. When that string is in a specific format Visual Studio will pick it up automatically and the errors will appear in the error list etc.

For the lint command we can specify a format for the output, might it be an idea to also do that for the build command?

FYI, tsc produces output that Visual Studio can interpret, something like:

src/utils/someclass.ts(12,16): error TS2304: Cannot find name 'Foo'.

on the other hand, Angular CLI outputs in this style:

ERROR in D:/Bar/src/app/utils/bytebuffer.ts (12,16): Cannot find name 'Foo'.

Which is something VS does not show in the error list (with easy click-through to file/line etc). In visual studio there are even some weird characters around this error string because it doesn't understand the bold(red( )) around it.

[HarelM]

The following SO answer has an interesting MSBuild text replace method using powershell syntax:
https://stackoverflow.com/questions/5103026/in-msbuild-can-i-use-the-string-replace-function-on-a-metadata-item
@woppa684 if you get to solve this let us know. I'm not very good with MSBuild...

[HarelM]

Has this been resolved?

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}