Angular

Setting up your Angular project

When it comes to Angular development, the best documentation is, of course, official Angular documentation. For everything else that you as a developer may encounter, there is Google search engine helping you find solutions to any problem. Luckily, there are many blogs and websites that share already gained knowledge and solutions to the same problem you are experiencing. This is one of those developer's blog.

While setting up your Angular project, depending on your needs, you will most likely use various libraries and dependencies, and you will encounter many different build errors. On this page, you can find what exactly you need to change or add in your Angular configuration files, depending on your problem. 

I hope the solution you are searching for is right here! 💪

Typescript

Useful thing about Typescript is the "notification system" that pops up error messages in your terminal during the build time. This is great because you can fix any errors that might come up, before you deploy your application to production. For example:

1. Binding element 'id' implicitly has an 'any' type

Error: src/app/components/post/state/post.state.ts:92:74 - error TS7031: Binding element 'id' implicitly has an 'any' type.

 

deletePost({ getState, setState }: StateContext<BlogPostStateModel>, 

{ id }) {}

  

Binding element 'id' implicitly has an 'any' type error message refers to an element that has been declared without its type. Seeing that id could, for example, be of type string or a number, adding the type to it would solve the problem. You might think that it's enough to just add string after id, however, in this situation where I had NGXS action involved, the type had to be added separately:

 

{ id }: { id: number }

 

Solution: https://bobbyhadz.com/blog/typescript-binding-element-implicitly-has-an-any-type#binding-element-x-implicitly-has-an-any-type-in-typescript

 

 NPM package installation

 1. ng-bootstrap

Steps to implement ng-bootstrap package:

1. Install through npm install ng-bootstrap/ng-bootstrap
   
2. Import the NgbModule in your root module 

            import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 

        3. Put the NgbModule in imports array

          Imports: [NgbModule]  

        4. Add the Bootstrap css file in angular.json file in styles array 

            "styles": [

                  "src/styles.scss",

                  "../node_modules/bootstrap/dist/css/bootstrap.css"

                ],