Configuring Apps in a Monorepo

[00:00:00]
>> So now, let's go back into here and what I wanted to show everybody is within our application we're going to open up appcomponent.htm and this is going to be just kind of down and dirty just initially. So just go hello client, and we'll deal with this just in a second.

[00:00:38]
And then I'm gonna get rid of this. Save this and then within here, what I wanna do is I want to import the, well I want to inject rather the widgets constructor or the widgets service rather. Widgets service, Okay and we may need to export this so the one thing that you do have to do if you're using the alias, you need to make sure that you export it in the barrel roll so in.

[00:01:38]
So I'm doing this here so occasionally as well if that doesn't work, sometimes I have to do a couple of things. One, restart the TS server. Sometimes that works. And if that doesn't work, then what I do is I just have to do it by hand for once.

[00:02:03]
Core data. And here we go, all right,so now what I've done is I've imported the widget service and now I'm just going to oninit. So implements oninit. We're going to courses, this is gonna be an observable. And of course, it doesn't know what this is, good time, so I'll just import this one more time.

[00:03:18]
That's why I can just hear everybody chatting or yelling we're not dealing with courses. There we go. Typically when I do this, it's either items courses or something academic related. So, that is muscle memory at its finest. And so now within our egoninit, we're gonna go this.widgets equals this.widgetservice.all.

[00:03:53]
Okay? And from here,let's go into our template and I'm going to show you my favorite debugging trick ever. If you've ever watched any of my content, this is not a surprise. I'll pick something we'll just go with py naught.. And then we'll go here and we'll go courses into the pipe, JSON or rather async.

[00:04:33]
And then, and why do I keep saying, all right, widgets, widgets widgets. Let's save this. And you notice here that it's looking for some provider only then in a couple of things, so we're importing core data into our application. So within nhc module, we're gonna go here, core data module.

[00:05:05]
Let's save this. Let's go back. And it's still looking for HTTP client. So we'll import that HTTP client module. Let's save this and what I want to see Is that now, this is what's cool about this. If I look at what I've done now this is a very intentionally condensed example.

[00:05:48]
But now imagine this at scale, I have an application that I'm saying I need to get widgets and I need to add them in and make them available into my application. Historically, what you would have to do is you would have to within your application, wire up that functionality.

[00:06:15]
But within the client, I'm able to pull that in and make that work without having that functionality exist explicitly within that application in so much, I can go to the dashboard and let's go to the home component. And within this, you'll see here, this dot, which is service I'm essentially doing the same thing.

[00:06:48]
And so if I go to localhost 4200 and I don't think it is running I could be wrong. Nope. So let's go within this will open up one more window there we go and we'll go, NPM run, serve all. Hopefully we can do this without stepping on some toes.

[00:07:26]
All right, let's see what's breaking here, back into our code I should, we need to go here. All right, so we'll go into I believe it is the widgets component that is giving us problems. So what I'm gonna do is I'm just going to comment these out for now.

[00:08:22]
We'll deal with these in a moment. So let's go up here. Save this. Let's go back here and see if everything compiled well, all the way to the bottom. I believe we're good. Let's just check now. Refresh. Here we go. So what we have here is really important.

[00:08:48]
We have a client application that is consuming widgets. We also have a dashboard and it is also consuming Widgets. So now we have two separate applications that are consuming functionality from a shared live. The reason why this is possible and this goes back to the previous module, is that when you go to the widgets service you'll notice that there is nothing specific about either application in there.

[00:09:36]
So going back to kind of this fundamental premise is that extract your functionality in such a way That you increase cohesion, so that things that are functionally compatible, that they're in a single place, and then things that are or so you're separating things into these appropriate kind of containers that you can then pick these pieces up and move them.

[00:10:04]
And you're removing coupling from the things that are unrelated, and so in other words, your component layer doesn't need to know the implementation details of where your data is coming from. All it needs to know is that whatever you give me, I am going to render I don't care where it came from.

[00:10:26]
And if for some reason somebody wants to save, create, update, delete, I don't care how you do it. All I care is that you know how to do it, and you're able to then return the new data upon a successful completion. And so on the surface this is I think we can find 50 ways to say it.

[00:10:49]
But it's a really fundamental first principle concept that unfortunately, I see violated out in the wild all the time. And that people like yeah I got it, except then you look into the code and then you have really the axis of evil or some coupling based on that you have a service in a component that now you can never move that service without informing that component that is what has happened.