diff --git a/packages/angular/package-lock.json b/packages/angular/package-lock.json
index 1aabff4626..c21e6920e4 100644
--- a/packages/angular/package-lock.json
+++ b/packages/angular/package-lock.json
@@ -130,6 +130,23 @@
         }
       }
     },
+    "@angular/router": {
+      "version": "11.2.8",
+      "resolved": "https://registry.npmjs.org/@angular/router/-/router-11.2.8.tgz",
+      "integrity": "sha512-HkHIe0yxRFXSOlotK6jN7kU0y7MU1I9R15ahxIe33bNDXM6ZQO3ZPiaulM+nxmu6lYjjFVfbUame0vs70R5mkA==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.0.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.1.0.tgz",
+          "integrity": "sha512-hcVC3wYEziELGGmEEXue7D75zbwIIVUMWAVbHItGPx0ziyXxrOMQx4rQEVEV45Ut/1IotuEvwqPopzIOkDMf0A==",
+          "dev": true
+        }
+      }
+    },
     "@coveo/bueno": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/@coveo/bueno/-/bueno-0.1.0.tgz",
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 3dff73142a..cfab5effd5 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -33,6 +33,7 @@
   },
   "devDependencies": {
     "@angular/core": "^11.2.2",
+    "@angular/router": "^11.1.2",
     "@angular/forms": "^11.2.2",
     "@angular/material": "^11.2.1",
     "@coveo/headless": "^0.1.0",
diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/app-routing.module.ts b/packages/angular/src/ng-add-setup-project/files/src/app/app-routing.module.ts
new file mode 100644
index 0000000000..7bb407f68a
--- /dev/null
+++ b/packages/angular/src/ng-add-setup-project/files/src/app/app-routing.module.ts
@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {ErrorComponent} from './error/error.component';
+import {HomeComponent} from './home/home.component';
+
+const routes: Routes = [
+  {path: '', component: HomeComponent},
+  {path: 'error', component: ErrorComponent},
+];
+
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule],
+})
+export class AppRoutingModule {}
diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/app.component.html b/packages/angular/src/ng-add-setup-project/files/src/app/app.component.html
index a4c09025c0..0680b43f9c 100644
--- a/packages/angular/src/ng-add-setup-project/files/src/app/app.component.html
+++ b/packages/angular/src/ng-add-setup-project/files/src/app/app.component.html
@@ -1,6 +1 @@
-<!-- Toolbar -->
-<app-hero></app-hero>
-
-<div class="content" role="main">
-  <app-search-page></app-search-page>
-</div>
+<router-outlet></router-outlet>
diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.html b/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.html
new file mode 100644
index 0000000000..6ab9f263df
--- /dev/null
+++ b/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.html
@@ -0,0 +1,19 @@
+<section class="warning-bg full-height center">
+  <div class="inner-container">
+    <p class="mat-display-1 mb-5">Invalid Environment Variables</p>
+    <p class="mat-headline">
+      You should have a valid <code>.env</code> file at the root of this
+      project. You can use <code>.env.example</code> as starting point and make
+      sure to replace all placeholder variables <code>&#60;...&#62;</code> by
+      the proper information for your organization.
+    </p>
+
+    <div *ngIf="this.errorMessage" class="mat-subheading-2">
+      Error Message: <b>{{ this.errorMessage }}</b>
+    </div>
+
+    <p class="mat-subheading-1">
+      Refer to the project <b>README</b> file for more information.
+    </p>
+  </div>
+</section>
diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.scss b/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.scss
new file mode 100644
index 0000000000..422823edeb
--- /dev/null
+++ b/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.scss
@@ -0,0 +1,23 @@
+.warning-bg {
+  background-color: #fadd6e;
+}
+
+.full-height {
+  height: 100%;
+}
+
+.inner-container {
+  margin-top: 30vh;
+}
+
+.center {
+  display: flex;
+  flex-direction: column;
+  padding: 2rem;
+}
+
+code {
+  color: #cc3c52;
+  padding: 5px 2px;
+  background-color: #f5f5f5;
+}
diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.ts b/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.ts
new file mode 100644
index 0000000000..82503515e1
--- /dev/null
+++ b/packages/angular/src/ng-add-setup-project/files/src/app/error/error.component.ts
@@ -0,0 +1,16 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-error',
+  templateUrl: './error.component.html',
+  styleUrls: ['./error.component.scss'],
+})
+export class ErrorComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+
+  get errorMessage() {
+    return history.state.errorMessage || '';
+  }
+}
diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.html b/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.html
new file mode 100644
index 0000000000..019e5dc9f3
--- /dev/null
+++ b/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.html
@@ -0,0 +1,5 @@
+<app-hero></app-hero>
+
+<div class="content" role="main">
+  <app-search-page></app-search-page>
+</div>
diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.scss b/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.ts b/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.ts
new file mode 100644
index 0000000000..57ac412c2b
--- /dev/null
+++ b/packages/angular/src/ng-add-setup-project/files/src/app/home/home.component.ts
@@ -0,0 +1,12 @@
+import {Component, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss'],
+})
+export class HomeComponent implements OnInit {
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/packages/angular/src/ng-add-setup-project/files/src/app/init.service.ts b/packages/angular/src/ng-add-setup-project/files/src/app/init.service.ts
index fb2014a1e9..4a703f4a2f 100644
--- a/packages/angular/src/ng-add-setup-project/files/src/app/init.service.ts
+++ b/packages/angular/src/ng-add-setup-project/files/src/app/init.service.ts
@@ -1,3 +1,4 @@
+import {Router} from '@angular/router';
 import {Injectable, APP_INITIALIZER} from '@angular/core';
 import {environment} from '../environments/environment';
 import {EngineService} from './engine.service';
@@ -6,11 +7,17 @@ import {EngineService} from './engine.service';
   providedIn: 'root',
 })
 export class InitService {
-  constructor(private engineService: EngineService) {}
+  constructor(private engineService: EngineService, private route: Router) {}
 
   async init() {
     const res = await fetch(environment.tokenEndpoint);
-    const {token} = await res.json();
+    const data = await res.json();
+    const token = data.token;
+
+    if (!token) {
+      this.route.navigate(['error'], {state: {errorMessage: data.message}});
+      return;
+    }
     this.engineService.init(token);
   }
 }
diff --git a/packages/angular/src/ng-add-setup-project/rules/ng-module.ts b/packages/angular/src/ng-add-setup-project/rules/ng-module.ts
index 867d10ccc9..254929306a 100644
--- a/packages/angular/src/ng-add-setup-project/rules/ng-module.ts
+++ b/packages/angular/src/ng-add-setup-project/rules/ng-module.ts
@@ -1,5 +1,4 @@
 import {
-  insertImport,
   addDeclarationToModule,
   addSymbolToNgModuleMetadata,
   addImportToModule,
@@ -36,7 +35,7 @@ export function updateNgModule(
     const changes = [
       ...injectInitService(source, appModulePath),
       ...getAllCoveoComponentsToInject(tree, source, appModulePath),
-      ...injectMaterialImports(source, appModulePath),
+      ...injectAdditionalImports(source, appModulePath),
     ];
 
     changes.map((change) => {
@@ -125,7 +124,7 @@ function getAllCoveoComponentsToInject(
   return changes;
 }
 
-export function injectMaterialImports(
+export function injectAdditionalImports(
   source: SourceFile,
   appModulePath: string
 ) {
@@ -138,6 +137,7 @@ export function injectMaterialImports(
     MatPaginatorModule: '@angular/material/paginator',
     MatSelectModule: '@angular/material/select',
     MatButtonModule: '@angular/material/button',
+    AppRoutingModule: './app-routing.module',
   };
 
   const changes: InsertChange[] = [];
diff --git a/packages/cli/src/commands/ui/create/angular.ts b/packages/cli/src/commands/ui/create/angular.ts
index 583c814755..a08159ab4e 100644
--- a/packages/cli/src/commands/ui/create/angular.ts
+++ b/packages/cli/src/commands/ui/create/angular.ts
@@ -49,7 +49,7 @@ export default class Angular extends Command {
   }
 
   private async createProject(name: string, defaults: boolean) {
-    const cliArgs = ['new', name, '--style', 'scss'];
+    const cliArgs = ['new', name, '--style', 'scss', '--routing'];
 
     if (defaults) {
       cliArgs.push('--defaults');