Angular 5 Starter (Multi-module)
A starter template for Angular 5 applications with multiple modules.
- Angular CLI v1.5.0
- Angular v5.1.0
- Typescript v2.4.2
View a demo of the application here.
You can run a local demo by cloning this repo, running
ng serve and then pointing your browser to
Read more about the architecture here.
FormModule represents a publicly accessible module which is lazy-loaded when the application is executed. There is no authorization required to view any of the pages or components within the
FormModule. In a real-world application, the
FormModule can be replaced with the core of the website which can be accessed by anyone - such as the homepage.
CoreModule drives the Angular application. It handles the API HTTP Interceptor, Authentication Guard and Authentication Service. In addition, the
CoreModule holds the Login component, not-found component and the global Header component.
HeaderComponent independently determines the route from the URL, and the permissions set in the User Authentication token, and then appropriately displays the links in the navigation bar.
AdminModule represents a privately accessible module which is lazy-loaded only upon successful user authentication via the
AuthenticationService in the
CoreModule. In a real-world application the
AdminModule would be the registered-user dasboard. In this demo, you can use any username and password to login.
SharedModule contains directives and components which may be used across multiple modules and areas of the application. A good example is the
RequiredLabelDirective which adds an asterisk to an input label. This directive can be used all over the application including the
LoginComponent which are in the
For a more detailed explanation on the architectural decisions made in this design, read this article.
- Multi-module architecture using Angular CLI conventions
- Core module, Shared module, 1x public module, 1x private module
- HTTP/API interceptor example
- Authentication guard example
- Shared directive example
Upgrading to Angular 6
I have created a separate GitHub repo for an Angular 6 Multi-Module Starter for those who want a fresh template with the latest features (NgRx, feature toggles etc).
The steps below will allow you to upgrade any projects based from this starter template:
Make sure you are using Node 8 or later.
Update your Angular CLI globally and locally, and migrate the configuration to the new
angular.jsonformat by running the following:
npm install @angular/cli@latest --save-dev ng update @angular/cli
You can also run
npm install -g @angular/cli@latest(with the global flag) if preferred. I still mostly work with Angular 5 so I did not update my global Angular CLI.
ng updateor your normal package manager tools to identify and update other dependencies.
Updating the demo
- Install angular-cli-ghpages by running the command
npm install -g angular-cli-ghpages
- Build the Angular app and set the base-href by running the command:
ng build --prod --base-href "https://zaarheed.github.io/angular5-starter-multi-module"
- Deploy to GitHub.io by running the