Angular/GitHub - Few Issues when Building Angular App for GitHub

I have done an ANGULAR BUILD of my project for GITHUB

repo: https://github.com/robwuk/versa-app/tree/master/src

project page: https://robwuk.github.io/versa-app/

as recommended in ANGULAR (https://angular.io/guide/deployment). I have then uploaded to GITHUB and set the app to use the /docs/ directory as instructed.

If I look at this I notice a few oddities:

  1. default “dimensions” routing does not show (click on “dimensions” button)
  2. some images dont show OK (click on “colours” buttons) - these are listed in an array so am assuming I need better reference to the right directory (see question 2 below)
  3. once I start navigating within the page the URL changes to have “versa-app\versa-aap”

if I look at the images as “open on new tab” - I see following directory structures:

working: https://robwuk.github.io/versa-app/assets/images/
broken: https://robwuk.github.io/assets/images/

all of the above work OK when I use ANGULAR on my desktop

so questions

1) if I need part of my page to be a ROUTING that the user can click on, how can I default it on page load?

Routing defined as:

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DimensionsComponent }  from './dimensions/dimensions.component';
import { LayoutsComponent }     from './layouts/layouts.component';
import { ColoursComponent }     from './colours/colours.component';
import { TrimsComponent }     from './trims/trims.component';

const routes: Routes = [
  { path: 'dimensions', component: DimensionsComponent },
  { path: 'layouts', component: LayoutsComponent },
  { path: 'colours', component: ColoursComponent },
  { path: 'trims', component: TrimsComponent },
  { path: '', redirectTo: '/dimensions', pathMatch: 'full' },
];


@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ],
})
export class AppRoutingModule {}

and called in the “details section” by:

<div class="wrapper">
    <div class="detail" fxLayout="row" fxFill>
      <nav routerLink="/dimensions" fxFlex="25" routerLinkActive="detail__dimensions--active" class="detail__dimensions">
          Dimensions
      </nav>
      <nav routerLink="/layouts" fxFlex="25" routerLinkActive="detail__layouts--active" class="detail__layouts">
          Vehicle Layouts
      </nav>
      <nav routerLink="/colours" fxFlex="25" routerLinkActive="detail__colours--active" class="detail__colours">
          Colour
      </nav>
      <nav routerLink="/trims" fxFlex="25" routerLinkActive="detail__trims--active" class="detail__trims">
          Interior Trim
      </nav>
    </div>


<router-outlet></router-outlet>

<app-offers-button [text]="text" [width]="width" [height]=height [margintop]=margintop></app-offers-button>
</div>

(ie clicking on one of the 4 NAV buttons changes what is displayed in the section). Now if I do “ng serve --open” I get the “dimensions” route as the default (ie I dont have to click dimensions for it to show, but when I fdo a build and deploy to GitHub I need to click on “dimensions” to show it. Any ideas? something in ngOnInit perhaps (I thought

{ path: ‘’, redirectTo: ‘/dimensions’, pathMatch: ‘full’ }

was the default command?

2) how can I refer to images in the /assets/ folder correctly in my array (similar to how the ANGULAR “tour of heroes” tutorial has a list of heroes and imports them) - that would fix the “COLOURS” images

code for image array:

import { Colours } from './colours';

export const COLOURS: Colours[] = [
  { id: 1, name: 'Frozen White', hexColor: '#E8E7E3', imgURL: 'assets/images/Versa_FrozenWhite.png' },
  { id: 2, name: 'Red', hexColor: '#BA1F1F', imgURL: 'assets/images/Versa_Red.png' },
  { id: 3, name: 'Blazer Blue', hexColor: '#141731', imgURL: 'assets/images/Versa_BlazerBlue.png' },
  { id: 4, name: 'Moondust Silver', hexColor: '#A6A9AA', imgURL: 'assets/images/Versa_Silver.png' },
  { id: 5, name: 'Guard', hexColor: '#898A80', imgURL: 'assets/images/Versa_Guard.png' },
  { id: 6, name: 'Solar', hexColor: '#CCC65D', imgURL: 'assets/images/Versa_Solar.png' },
  { id: 7, name: 'Deep Impact Blue', hexColor: '#1D2F82', imgURL: 'assets/images/Versa_DeepImpactBlue.png' },
  { id: 8, name: 'Shadow Black', hexColor: '#181A1A', imgURL: 'assets/images/Versa_Black.png' },
  { id: 9, name: 'Magnetic', hexColor: '#5F625F', imgURL: 'assets/images/Versa_Magnetic.png' }
];

and is called by src\app\colours\colours.components.ts:

import { Component, OnInit } from '@angular/core';
import { Colours } from '../colours';
import { COLOURS } from '../swatches';

@Component({
  selector: 'app-colours',
  templateUrl: './colours.component.html',
  styleUrls: ['./colours.component.scss']
})
export class ColoursComponent implements OnInit {
  imageSrc: string;
  colours = COLOURS;
  constructor() {
    this.imageSrc = this.colours[0].imgURL;
  }

  ngOnInit() {
  }

  onClick(imageNameObject) {
     this.imageSrc = imageNameObject.imgURL;
   }
}

with HTML:

  <div class="wrapper">
   <img src="{{imageSrc}}" class="colours__car">
   <div fxLayout="row" fxFill class="swatches">
     <div *ngFor="let colours of colours">
       <nav class="swatch" [ngStyle]="{background: colours.hexColor}" (click)="onClick(colours)"></nav>
     </div>
    </div>
    <div fxLayout="row" fxFill class="types">
      <div class="types__nonmetallic">Non metallic</div>
      <div class="types__metallic">Metallic</div>
    </div>
  </div>

3) how do I only get “versa-app” once in the URL (as soon as I do anything the URL becomes "https://robwuk.github.io/versa-app/versa-app/"

build command I use in the github\versa-app directory is:

ng build --prod --output-path docs --base-href versa-app

any assistance greatly received

  1. needed to add the default route in to the ngOnInit of the component displaying the routed data
  2. moved the arry & spec files in to the component directory and corrected the URLs
  3. still outstanding but now 1 & 2 are sorted that is less of a problem

I just saw this question and tried to run the app. The routing issue you mentioned as the third thing seems to be working fine now.
Were you able to successfully hack into it?