Subtle Angular compile issue

Stumbled across a subtle issue with an Angular 4 build today that lead to some investigation - so capturing here as a reminder. The CI build was failing, but local build working without issue – the complaint was the accessibility of a property on a class.

… .component.html (26,71): Property 'demoProperty' is private and only accessible within class 'DemoComponent'.

After investigation the difference between the local build and CI server causing this mismatch was the addition of the --prod flag. We had applied this flag as it enables AOT (https://angular.io/guide/aot-compiler) which (along with other benefits described) improves performance of the deployed app. Reading through the AOT docs this amended compilation may fail when the JIT works successfully for several documented reasons; the one tripping us up here is that all data bound members must be public – so my default desire to keep the accessibility on a property as low as possible was the cause!

So now when running the build locally we always apply either the --prod flag or the --aot flag - you can also use the --aot flag on ng serve.