😑 Mistakes I made when I started with Angular (Applies to any web framework)
Tags: javascript, webdev, angular, beginners
Published: 2022-05-27 17:10:31

These are things you should consider when you are starting with JS frameworks.

## 1. Thinking in components
The urge to quickly develop something when you are starting new should be controlled. The smallest things such as **Button** , **Input Field** even a **Heading tag**, make it as component.

Why though ?
- Whenever there is a button you will always use this component and this will help maintain the button through out the pages consistent.
- A single change in this button component will always update everywhere its used.

The ultimate aim of the components is to break down web pages in to very small pieces of code to improve readability and make it more consistent

In the start you may hesitate to create simple components such as Heading , Labels. But trust me when the website grows and when you had to change one small thing, This comes so much easy.

## 2. Lazy Loading Routes
Instead of loading everything at the start break your pages in to small modules and only load them when the route is activated. Its not that tough in angular as you think it is. 

Learn more on [Lazy Loading](https://angular.io/guide/lazy-loading-ngmodules)

## 3. Usage of Types
Angular uses typescript by default but not react/next. But you can easily add types on those with the create-react-app with typescript.

Don't make anything as **any** unless you were testing its working or not. Types comes a long way to improve code and the habit of **ctrl + space** for those suggestions drastically reduce your development time and null checks are needed , we can easily forgot a null check when using javascript.

## 4. Angular + CSS
**For beginners** and the one who mostly works in a company will always have css frameworks such as Angular Material / Bootstrap / PrimeNg.

Customizing Bootstrap and Angular Material are really a headache. Sometimes it will work and sometimes it won't, trying to understand that itself will cost lot of productivity.

So look out on that , the solution that worked for me when using bootstrap/Material is I will always wrap that code/component in my own small component, write custom css classes and use this everywhere.

## 5. Usage of rxjs
You don't need it when you are starting , but at some point of time you need to learn this for the betterment of the website. There is no escape. ( I have been working 1+ Year on angular ,  I still don't know rxjs I will be starting soon )


---

📝 Bookmark this if you are going to start with angular.

😱 Do you know that using await inside forEach will not work?
[Know why in 2 minutes](https://dev.to/shrihari/dont-use-await-inside-foreach-h86)

🕸 Are you a budding web developer and in need of some cool css websites to learn from Visit [Colors & Design](https://dev.to/shrihari/colors-design-inspiration-websites-for-new-comers-1lcb)


And If you like these type of small articles to boost your knowledge, don't forget to follow on dev.to, It motivates to write more and contribute open source.

**Peace** 🕊 !

---
## Try Our new product for free!
[DocsAI](https://docsai.app/) - Create AI support agents with your documents in the most affordable price, starts at **0$**. Don't need a bot , but need ai help on your docs just upload and start chating !

Using for a company ? [Check out our pricing](https://docsai.app/pricing) Just contact me for personalized pricing !

![docsAi](https://firebasestorage.googleapis.com/v0/b/shrihari-personal-storage.appspot.com/o/banner-docs-jpeg.jpeg?alt=media&token=45c47666-de2a-4e02-8881-beb6e43ce581)

---