feat(angular): redirect user to an error page if the .env file is invalid

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",

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 {}

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>

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>

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;
+}

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 || '';
+  }
+}

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>

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 {}
+}

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);
   }
 }

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[] = [];

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');