Angular in production mode + OctoPack


(davidkeaveny) #1

What is the best way of integrating an Angular application which has been built in production mode with Octopack, especially when running on a TeamCity server?

When run in production mode, Angular CLI will add a hash to the name of each bundle it builds (for cache-busting purposes), hash obviously changes each time you change your source code, and you won’t know until you have built it what the hash is going to be - so it’s rather hard on a build server to know how to include your production Angular bundles in an Octopack-built deployment package.

So, how can I add files to Octopack without having to modify my .csproj at build time? (Or pre-build it locally in production mode, check in changes to the .csproj, hope I didn’t miss anything and that other developers haven’t done similar in parallel, etc etc).

I’m not using Gulp or Grunt - just your vanilla NPM these days.

(Dalmiro Grañas) #3

Hi David,

Thanks for reaching out! In this case I’d strongly recommend you to stop using Octopack, and modify your build process to do the following:

  1. Build your app and drop all the files you need to deploy to a fixed folder in your build working directory (i.e [BuildDir]\Output)

  2. Use the step Octopus Deploy: Push Packages that comes with our TeamCity Plugin to :
    2.1) Pack the entire content of [BuildDir]\Output into a zip package.
    2.2) Push the package from 2.1 to your Octopus repository.

Octopack can be really good to get up and running fast in very basic setups, but as soon as you need to do something extra it can become a bit too rigid, reason why we recommend people to use Octo.exe (which is what that TC step uses in the background).

Let me know how that goes

(Dalmiro Grañas) #4

Totally forgot to mention:

If you want to keep the Packaging+Pushing logic on the NPM side, you can use this instead:

Hope that helps!