Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Angular 6 Starter (Multi-module)

A starter template for Angular 6 applications with multiple modules.


  • Angular CLI v6.0.8
  • Angular v6.0.6
  • Typescript v2.9.1


View a demo of the application here.

You can run a local demo by cloning this repo, running npm install, ng serve and then pointing your browser to http://localhost:4200.


Read more about the architecture here.

Angular 5

This is a copy, and improvement, of my Angular 5 Multi Module Starter.


The 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.


The 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.


The 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.


The AdminModule represents a privately accessible module which is lazy-loaded only upon successful user authentication via the LoginComponent and 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.


The 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 FormComponent and LoginComponent which are in the FormModule and CoreModule respectively.

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

The steps below will allow you to upgrade any projects based from this starter template:

  1. Switch from HttpModule and the Http service to HttpClientModule and the HttpClient service.

  2. Make sure you are using Node 8 or later.

  3. Update your Angular CLI globally and locally, and migrate the configuration to the new angular.json format by running the following:

    npm install -g @angular/cli
    npm install @angular/cli
    ng update @angular/cli
  4. Update all of your Angular framework packages to v6, and the correct version of RxJS and TypeScript.

    ng update @angular/core
  5. Use ng update or your normal package manager tools to identify and update other dependencies.

Updating the demo

  1. Install angular-cli-ghpages by running the command npm install -g angular-cli-ghpages
  2. Build the Angular app and set the base-href by running the command: ng build --prod --base-href ""
  3. Deploy to by running the angular-cli-ghpages tool (shorthand: ngh)


A starter template for Angular 6 applications with multiple modules.






No releases published


No packages published