Check out a free preview of the full Production-Grade Angular course
The "Configuring Nest to Mock a Service" Lesson is part of the full, Production-Grade Angular course featured in this preview video. Here's what you'd learn in this lesson:
Lukas demonstrates how to build a mock service that creates widgets within an application, how to configure a mock API to add data to the widgets, and how to configure the service so it can add mock widgets.
Transcript from the "Configuring Nest to Mock a Service" Lesson
[00:00:00]
>> And so now what I'll do is I'm going to hop into my app module, and I'm going to import my widgets, Module, and let's see what happens when I run this. So, npm run, you know what? Let's just do serve all and we'll catch up with this.
[00:00:35]
So I feel like it might break, but we can kind of go from there. And this warning here, I'm not too sure where that comes from, but whatever. All right so if we go up, and I wish I could make this a little smaller, I feel like I'm attempting fade here.
[00:00:59]
In the router score, when you see this, it means that these are the routes that it's mapping through, so it's outputting your routes. So I'm gonna come here and let's just check. And so you can see here, it tried to make the call and it doesn't exist. So this is because I don't have JSON server running.
[00:01:28]
So if I hop back in the code, let's see if we can flip this really, really quick. So I'm gonna go to the widgets service, the one in the, Here. And I'm pulling this from environment, which I'll talk about that possibly in a little bit. Well, real quick.
[00:02:03]
What I've done is you have these environment files that you can expose, Inside of your tsconfig.base. Now there's some upsides and some downsides to this. One, it's really easy to do because then I can come back over here and say I want to import environment from env.environment. And then I can dynamically set that at runtime.
[00:02:34]
But you do get circular dependencies, and if that's a problem, then you may need to fix that. But the other thing is that it doesn't optimize for tree shaking. But the other alternative to this is quite a bit more work, and there's actually not a lot of consensus on the best way to solve this.
[00:02:58]
So this works well enough and it's totally fine. So all I've done here is, let me just double check and make sure that I'm doing this correctly. This actually returns all widgets. So I'm just returning that out as a string. And so I think I got this. Yep, all right.
[00:03:32]
So now, what it's trying to do it's trying to grab that. So what I'm gonna do is I'm gonna close that. And now I need to make one change. And, We're gonna go to main.ts, enableCors, save this. And I threw an error, but I didn't get the cors issues.
[00:04:16]
So now, let's go back into, Our widget service. And let's treat this just a little bit so that we can make this work. So from here, I am going to, Jump into my code, And, Now, you see what's happening here? I was able to share my model definitions, one of the first things we talked about is data modelling.
[00:05:19]
And so in a model repo, you can actually share the interfaces between your front end and your back end, which is quite, quite nice. And so from here, 1, and title is going to be, Nest Widget FTW. Description is going to be Pending. And, Like so. And now, Return, Widgets.
[00:06:12]
So we'll save this. Let's go back into our, We have liftoff.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops