Angular 7: A template to be up to speed in no time

Today, I'll share with you an Angular 7 application from where you can start building your own. I've followed as much as possible the best practices available here.

You can find the source code at this repository.

If you can improve this solution, do not hesitate to tell me. 😀

Let's inspect the different parts:

Core Module

1. guards

I've incorporated basically 2 guards: 

• The AuthGuard implements both CanActivate and CanLoad. This guard is responsible for checking if the current user is authenticated and authorized. If not authenticated, the user will be redirected to the login page. If the authenticated user hasn't sufficient permission, he will be redirected to the home page.
• The NoAuthGuard which implements CanActivate, provides a way to restrict a route when a user is already logged in (e.g. login).

2. interceptors

• The ErrorInterceptor basically intercepts client errors and server side errors. When it catches a 401 or 403 errors, it will sign out automatically the user. You should log the client errors at this level.
• The JwtInterceptor add an Authorization header, with the JWT token, to each subsequent request.
• The LoaderInterceptor informs the LoaderService when the request starts and stops.

3. mocks

The FakeBackendInterceptor enables you to test your application without a real API interaction. As soon as your API is ready, you may remove this dependency from the CoreModule : providers array.

4. models

The User class is the representation of an authenticated user that your API should return.

5. services

• The ApiService provides an abstraction layer for initiating HTTP requests. This layer use the HttpClient under the hood.
• The AuthenticationService helps : (1) login; (2) logout; (3) keep in memory the current authenticated user via an Observable.
• The LoaderService holds the loading status that needs to be share with other components. It can update this status via the methods: startLoading and stopLoading.

With @Injectable({providedIn:'root'}), Angular  can register automatically these services for us.

The core module MUST BE IMPORTED ONLY ONCE otherwise you will 😭 !

Layout Module

The layout module includes the header, footer and loader components

Auth Module

The auth module includes only the login component, but it may include also the registration component.

Modules Folder

In this folder you will put all your business modules. I use to access all this modules via lazy loading (cf. app.routing.ts). As a sample, I've put a business and admin modules.

Shared Module

In this module, I basically put only components, directives and pipes which will be reused in other modules. 

In the SharedModule, I also import and export: (1) CommonModule, (2) FormsModule, (3) ReactiveFormsModule and (4) a custom Angular Material module - AppMaterialModule. This way, if others modules need them, we only need to import the SharedModule.

Testing folder

I've put all of my testing utilities (mock, spy...) in this folder.

app-material.module.ts

I've created a special module where I can declare all the Angular Material components I want to use. This module is incorporated in the SharedModule defined above.

For getting started with Angular Material, you can click here.

app.component.ts

This component acts as our entry point.

app.module.ts

This is the application root module, where I've imported all the required modules.

src/styles folder

I've reused the way the angular team organized css staff inside the angular website:

• 0-base: typography
• 1-layouts: general layout
• 2-modules: specific to your business modules

I've also included, some Bootstrap utilities in this project.