Yesterday I finished up my third SPA based on Angular 5 (if you're wondering if I'm using the final release or not, check this, this and then this other post and you might get an idea). The debug went good and the unit test were all green, so I hit the Visual Studio 2017 Publish button and went to get me a drink. When I came back, I was very displeased to see that the publish job failed due to the following compilation error:
The command "node node_modules/webpack/bin/webpack.js --env.prod" exited with code 2
I immediately thought it was strange to say the least, considering the fact that the manual build went good. I tried to perform it again, and it went well without any trace of that error. What the hell was going on? Almost without thinking, I started googling the error around until I stumbled upon this post, which didn't help me at all: few quick checks immediately told me that it definitely wasn't a Node.JS, PATH and/or execution folder issue. The culprit must've been somewhere else.
At a certain point, I had the obvious thought to execute that command from the command-line, so I could at least see those WebPack & TypeScript compiler errors who magically happened to be there only during publish.
|
1 |
C:\MySolutionPath> node node_modules/webpack/bin/webpack.js --env.prod |
Why it took so long for me to figure it out? Anyway, as soon as I did that a bunch of strange TypeScript errors flooded my commant prompt screen:
|
1 2 3 4 5 6 |
ERROR in navmenu.component.html: Property 'auth' is protected and only accessible within class 'NavMenuComponent' and its subclasses. ERROR in navmenu.component.html: Property 'auth' is protected and only accessible within class 'NavMenuComponent' and its subclasses. ERROR in navmenu.component.html: Property 'auth' is protected and only accessible within class 'NavMenuComponent' and its subclasses. ERROR in quiz.component.html: Property 'auth' is private and only accessible within class 'QuizComponent'. ERROR in quiz.component.html: Property 'auth' is private and only accessible within class 'QuizComponent'. ERROR in quiz.component.html: Property 'auth' is private and only accessible within class 'QuizComponent'. |
... And so on. An insane amount of private and protected properties, instantiated through Dependency Injection within some of my Angular components, which couldn't be accessed by the class template file anymore... despite the fact that they could, when I built the project few seconds earlier! Not to mention the fact that these properties should be accessible by design, since the template file is also part of the Angular component and gets built within the same class!
That last thought led me to the solution: slowly but surely, I started to remember what I've learned here and then here. The issue was clearly due to the fact that I was building the Angular app in AOT (Ahead-Of-Time) compilation scenario: when you do that, the template files are turned into separate TS classes from their components, thus they cannot access any of their private members anymore.
Long story short, I fixed the problem by making these properties public, so my templates could access them even when I had to use AOT compilation - which is something you definitely need when deploying an Angular app into production.
That's about it: I sincerely hope that this short post will help others who, like me, are struggling against this simple, yet rather counter-intuitive issue. Too bad that Visual Studio 2017 doesn't output something more: the Node/NPM/TypeScript error-handling is still dramatically lacking, despite all the efforts already spent to internalize it within the GUI.
