Now we have our application building to our DIS directory where we can send off all of the resulting files of our application. Let's go ahead and run an http-server on that DIS directory just to see what we have here.
The problem here, though, is if I were to go into, say, "My app directives" here and if KCD Hello had something that it required -- let's say it requires log and then in here we say "Log.info I have some info" -- now if I run my build again it's going to uglify all this stuff. If you're familiar with this problem, you know exactly what's going to happen. Let's go ahead and serve up our resulting stuff.
Everything is broken. If we look at the console here, unknown provider T provider, this is awful. The way that we overcome this is by using "Annotation." Just to make this a little bit easier, we're going to change this back from an arrow function to a regular function.
Only in Angular does the name of the parameter matter. That's using the implicit dependency injection. We need to be explicit about our dependency injection. We'll use the ng-annotate plugin to do that. Webpack has an ng-annotate loader that we're going to be using. Let's npm install as a dev dependency the ng-annotate loader.
If we look at our bundle, let's see if we can find where this dollar log is located. Here we go, KCD Hello. We have this explicit dependency injection in our function. That's being done by the ng-annotate plugin. In most cases you just need to plug this in, and everything will work.
There may be some cases where you need to explicitly say that your function needs to be annotated. If you were to do that in our controller, for example, you'd simply add a comment here that says ng inject, and ng-annotate will say, "Oh, OK. I need to make sure that I annotate this function."