Good practices for creating an Angular project

The best practice for generating an angle project according to documentation and angular-cli .

To install the angle cli globally

npm install -g @angular/cli

Then to generate the project:

ng new NOME_DO_PROJETO

To generate a component for example

ng generate component meu-component

You can also use only g to get shorter, see the example of how to generate a service:

ng g service meu-service

All possible generate options as well as their flags are available here

EDIT

About angular project architecture:

The official documentation suggests an architecture by features.  Well imagine that you put all services together or all components together separate from their respective html. This architecture is discouraged from the angular JS because it does not scale well. Imagine if you have 50 components you have to find it in the middle of 50 inside a folder, not a good components. as your application grows, it will be very difficult to find the component you want. So having an architecture by routes / feature is much easier than finding the components and files you want in large applications.

Another advantage of doing the architecture by features is that you can do a lazy-loading of your modules only when they are needed. Making a great application much faster. Imagine that you have a route / admin might be that 80% of your users never access that route and it might contain very heavy components that would slow your website to load. So it makes sense to load it only when that route is accessed leaving your site much lighter.

So it must be more specifically an architecture by routes. And consequently by features.

In this case if you have for example a route / users that lists users.

You would have a folder

user

• user.module.ts
• usuario.routing.module.ts
• usuario.container.component.ts
• user.container.component.scss
• user.container.component.html
• user.interface.ts - > this would be the equivalent of the model.
• usuario.service.ts

user-list within this user folder

• usuario.list.component.ts
• usuario.list.component.scss
• usuario.list.component.html