fix: set correct, relative, src paths for assets

[tino-tg]

What:

Set relative src path for assets in order to work properly on github pages.

This fixes the following:

Issue number: N/A

[tomastrajan]

@tino-tg seems to be still broken,

maybe it has to be done differently? eg this way build process does mayeb NOT process the reference... mayeb image has to be done using css OR require('path/to/img') to be processed as asset?

EDIT: assets are processed, eg this url works

https://tomastrajan.github.io/angular-ngrx-material-starter/assets/logo.png

so it must be the link then?

EDIT2: the url in prod is https://tomastrajan.github.io/assets/logo.png which is missing /angular-ngrx-material-starter/ which is usually added for prod build in package.json

--deploy-url /angular-ngrx-material-starter/ --base-href /angular-ngrx-material-starter

but does not apply to that magic string for image url...

that being said it can either come from environment.ts so that it works in both DEV and PROD or some other solution...

[tomastrajan]

@tino-tg added couple of edits in previous comment

[tino-tg]

maybe it has to be done differently? eg this way build process does mayeb NOT process the reference... mayeb image has to be done using css OR require('path/to/img') to be processed as asset?

EDIT: assets are processed, eg this url works

https://tomastrajan.github.io/angular-ngrx-material-starter/assets/logo.png

so it must be the link then?

Yes, I was surprised as well, because I set the assets-link in another project of mine the same way and the logo is displayed fine on github pages. Only difference is, that there is no hash routing.

The images source was set by require('path/to/img').default - see https://github.com/tomastrajan/angular-ngrx-material-starter/pull/550/files#diff-0178c2b6c307e8e54a63668dcc1af694fc16cd622dde8759405ffa53629bc90a for example - before the upgrade to Angular 12. But it was necessary to be changed because it broke the build after updating the @angular-devkit dependency to version 12.

[tino-tg]

I'll take care of it and let you know or open another PR.

Just one question: Why the hash-routing anyway? I'd guess it was necessary to make it work with GithubPages in the past. If this is the case, I'd try a solution without hash-routing and see if this also fixes the assets-path problem - if this is OK for you!? As I mentioned in the previous comment, I deploy another Angular Project of mine to GithubPages as well and I set the assets paths simply by relative path assets/filename.png and it works fine on GithubPages (without hash-routing).

[tomastrajan]

@tino-tg yes, that's correct, the hash was used to make it work with GH pages and it would be really great if we could move forward without it.

Requirements:

1. working dev mode
2. working prod on GH pages

Thank you a lot!