How to Structure Angular Projects

I usually works on Angular and Node and developed various projects in the same. Recently, I came across many people asking for the best project structure for Angular projects by using which they can implement security and privacy measures to make best out of Angular. So this is our guide to implement a better approach in your Angular-only project. Currently I’m using Angular v8.1 and Node v12.7.

Lets begin with creating a new project: “dummy-project” using the following command -

This command will not launch an interactive phase(asking for user inputs while initializing project) and will directly create and install node modules. Although, here is a small description for each option:

Now coming back to our structure, we’ll have the following substitute directories for particular files/folders:

Components will also be divided into different parts as general/common for commonly used components and other parent components.

Lets create some of our first components. To do so use the below command:

Notice how we created particular directories using one command. Similarly we can create other components in components directories.

Now we’ll create helpers. Helpers directory will contain typescript files which will be used throughout the project for the purpose of implementing good security and creating a better user experience. We’ll be generating-

Use the below command to create the authentication guard, it will ask you to choose interface, use SpaceBar to choose the “CanActivate” interface and then press Enter.

ng generate guard helpers/auth — flat=true

For Interceptors we need to create HttpInterceptor files as follows:

And for fake-backend create a file fake-backend.ts.

We also need to create one model file for user to map user’s data, create a file user.ts in models directory.

That’s all folks.

Related posts:

Imposter syndrome to simply put means feeling like a fraud. It is a psychological pattern in which one doubts one’s accomplishments and has a persistently internalized fear of being exposed as a…

Vitamin C has long been praised for its numerous health benefits. But, did you know that it could also benefit your skin? This powerful antioxidant has been found to have skin brightening effects…