Angular GitHub построить не все изображения, получая URL-адрес приложения (и другие вещи)

Question

Я сделал ANGULAR BUILD своего проекта для GITHUB

репо: https://github.com/robwuk/versa-app/tree/master/src

Страница проекта: https://robwuk.github.io/versa-app/

, как рекомендовано в ANGULAR (https://angular.io/guide/deployment). Затем я загрузил в GITHUB и настроил приложение на использование каталога / docs / в соответствии с инструкциями.

Если я посмотрю на это, я увижу несколько странностей:

1) по умолчаниюМаршрут "размеры" не отображается (нажмите кнопку "размеры")
2) некоторые изображения показывают ОК (например, на вкладке "размеры")
3) некоторые изображения не отображаются ОК (нажмите "цвета" или "кнопки "отделка салона") - цвета перечислены в массиве, поэтому я полагаю, что мне нужна лучшая ссылка на правильный каталог (см. вопрос 2 ниже)
4), как только я начну наговаривать на странице, URL-адрес изменяется, чтобы иметь "наоборот"-app \ versa-aap "

, если я смотрю на изображения как" открытые на новой вкладке "- я вижу следующие структуры каталогов:

работает: https://robwuk.github.io/versa-app/assets/images/
не работает: https://robwuk.github.io/assets/images/

все вышеперечисленное работает нормально, когда я использую ANGULAR на рабочем столе

, поэтому заданиеons

1) если мне нужно, чтобы часть моей страницы была МАРШРУТОМ, на который пользователь может щелкнуть, как я могу установить ее по умолчанию при загрузке страницы?

Маршрутизация определенакак:

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

и вызывается в «разделе сведений» следующим образом:

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

(т. е. нажатие на одну из 4 кнопок NAV изменяет то, что отображается в разделе).Теперь, если я сделаю «ng serve --open», я получу маршрут «размеры» по умолчанию (то есть мне не нужно нажимать на измерения, чтобы он показывался, но когда я делаю сборку и развертывание на GitHub, мне нужно нажать на «»измерения ", чтобы показать это. Любые идеи? что-то в ngOnInit возможно (я думал

{путь: '', redirectTo: '/ sizes', pathMatch: 'full'}

была команда по умолчанию?

2) как правильно ссылаться на изображения в папке / assets / в моем массиве (аналогично тому, как в учебнике ANGULAR "tour of heroes" есть списокгероев и импортирует их) - это исправило бы изображения "COLORS"

код для массива изображений:

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

и вызывается src \ app \ colors \ colors.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;
   }
}

с 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) как получить "versa-app" только один раз в URL (как только я это сделаю)все, что URL-адрес становится "https://robwuk.github.io/versa-app/versa-app/"

команда сборки, которую я использую в каталоге github \ versa-app:

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

любая помощь очень полученаред