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:
- default “dimensions” routing does not show (click on “dimensions” button)
- 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)
- 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