Days 8-10: Standalone components and home view

Aleksandra Janecka — Tue, 14 Nov 2023 06:36:18 +0000

In the previous blog post I was talking about how I've set up my project and about creating login and create account pages. Now it's time to move into main part of the application and also to start thinking a bit about project structure!

Day 8 - Home view

Day 8 was quite simple. It was Sunday, so I had more time to code and I spent it on creating the layout for the home view for my application. And here is the effect!

For the most part is was going pretty smoothly. I just ran into one problem, I spent way too much time trying to solve (and eventually giving up...) Namely, trying to change the fill color of SVGs... I still have no idea, why is it not working... If you have some suggestions, I'd be glad to hear!

The icon here also should change the color on hover as the text does...

Days 9-10 - Project structure

On days 9 to 10 it was time to start thinking about project structure! I wasn't coding too much these days, but some conceptual work is needed sometimes as well! First my idea was to split an app into modules - the old fashioned way 😉

But then I learned that I've had this misconception about standalone components, that they are mostly good as a substitute for shared module. It turns out, it is actually recommended to build whole applications using them nowadays! So that's what I decided to do! But first... what the hell are standalone components?

Standalone components

Standalone components are a relatively new feature introduced in Angular 15. They offer a simplified way of building applications, because they are not a part of any module, and also, when used in another standalone components, they don't need to be imported! You can use them just like that! But they can also be imported into a module, so you can slowly transition into this new style without having to refactor the whole application.

So what are the advantages of standalone components? The main one is that you don't introduce unnecessary dependencies, by importing whole modules, when you only need bunch of components from them, which in turn reduces the bundle size, thus making your application run faster!

So how do I make an standalone component? It's very easy! You just add standalone: true to it's declaration :) Also you need to import into a component all the components that you are using in it. So now the declaration looks like this:

@Component({
    selector: 'app-navbar',
    templateUrl: './navbar.component.html',
    styleUrls: ['./navbar.component.scss'],
    standalone: true,
    imports: [ToggleButtonsComponent],
})
export class NavbarComponent {

Migrating an application to standalone components

So do I have to go through the whole application now, and manually change the declarations of all components? No! There is a tool for that!
You just need to tun this command thrice: ng generate @angular/core:standalone

Wait.. why thrice? Is it some kind of weird spell? No, it's because the migration is split into parts, and each time you need to select another option :) These are the options, you get when you run this command:

Step 1: Convert all components, directives and pipes to standalone

This step is doing something similar to what I have shown in the code block above. It turns all the components into standalone versions and adds necessary imports to them!

Step 2: Remove unnecessary NgModule classes

This step did nothing when I ran this in my application. That's because I only have AppModule which is my root module, and AppRoutingModule which is my main routing module. But if I had any other modules in my app, they should in theory be removed. But this step often doesn't remove all the modules, and some manual work may still be needed.

Step 3: Bootstrap the application using standalone APIs

This step removes the root module of your application and instead invokes bootstrapApplication function in your main.ts. That function is responsible for bootstrapping your routing, singleton services etc. It looks like this:

bootstrapApplication(AppComponent, {
    providers: [
        importProvidersFrom(BrowserModule, AppRoutingModule, ReactiveFormsModule, AngularSvgIconModule.forRoot()),
        provideHttpClient(withInterceptorsFromDi())
    ]
})
  .catch(err => console.error(err));

??? Profit?

Not yet in my case! One pesky module is still standing strong! And it is routing module.

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

Let's just get rid of it, export routes, and rename the file to something like routes.ts. So the content of this file looks something like this now:

export const routes: Routes = [
  { path: '', redirectTo: '/sign-in', pathMatch: 'full' },
  {
    path: 'sign-in',
    title: 'Sign in',
    component: LoginComponent,
    pathMatch: 'full',
  },
  {
    path: 'sign-up',
    title: 'Sign up',
    component: SignUpComponent,
    pathMatch: 'full',
  },
  {
    path: 'dashboard',
    title: 'Dashboard',
    component: DashboardComponent,
    pathMatch: 'full',
    canActivate: [authGuard],
  },
];

Now we can change the way we provide it in our bootstapApplication function:

bootstrapApplication(AppComponent, {
    providers: [
        importProvidersFrom(BrowserModule, ReactiveFormsModule, AngularSvgIconModule.forRoot()),
        provideHttpClient(withInterceptorsFromDi()),
        provideRouter(routes)
    ]
})

And that's it! The application is working fine, and we don't have a single module in it! Well, instead of the ones from Angular and external libraries 😉

Conclusion

For the past two days I haven't done much coding, but I still learned a lot. And now I can play more with this new style of application and play around with concepts like lazy loading. In the following days I'll probably get back to coding to cool off a bit, but I still have some concepts like this to explore, so from time to time I will be sharing these effects of my exploration. Until next time!

My first week of #100DaysOfCode challenge!

Aleksandra Janecka — Sat, 11 Nov 2023 12:12:44 +0000

Recently I decided to introduce a number of changes into my life. I decided to get up earlier and have regular sleep schedule, I am learning to play bass guitar, I am reading books every day etc. But more on that in another post ;) This post is about coding! And yes, I also decided to code every day, and to get myself started I decided to begin #100DaysOfCode challenge!

My goals

As my first goal, I decided to complete a challenge from Frontend Mentor. I selected a pretty advanced challenge with level 5 (Guru) difficulty - Link-sharing app. I don't really think it is that difficult, but it contains quite a lot of different elements, so it's definitely not a 1-day challenge.

My main objectives are:

create a responsive layout according to the provided mockups (I may introduce slight changes, because I don't like how few things are handled)
Write unit and integration tests
Take care of a11y (accessibility)
Try to use the features from newest versions of Angular like signals or standalone components
In the future I may also consider creating backend app for this project, but for now I only plan to do the frontend.

On weekdays I am usually spending on coding about 1 hour a day, in the morning before work. On weekends I am currently aiming for around 3 hours, but I might try to extend that time.

Week 1 progress

This week I've been working mostly on login and registration pages, but there was also a lot of work put into things that will save me a lot of work later on. For example I created this really cool input component along with styles for active and invalid states.

And this is how the whole layout looks like!

Login page

Create account page

I also created an auth service to handle login and register requests, but it just stores the data on the frontend. As I mentioned before I am not building backend for this app for now. I also didn't care at all for testing and a11y for now. I will do that soon, but first I need to refresh my knowledge on these topics, so I'm pushing with other topics in the meantime. If you know any good resources, I'm very open for recommendations!

Summary

Thank you for reading this post! For now it's just a quick summary as a lot of things are still in progress, and I plan to cover them in larger detail, when they are fully finished. But in the meantime feel free to check my Github repository to see how things are implemented!

If you have any suggestion and a request to cover specific topic, please feel free to comment! See you in the next update :)

DEV Community: Aleksandra Janecka