Menu
For an Angular 7 application that finally build to
- main.js
- assets
-- assets/img
With an component/html that reference to asset as
src='./assets/img/img1.jpeg'
The application would be given to different teams and can be hosted on different roots
example.com/route/first
example2.com/route/second
If the consumer refer to my build content as
<script src=''../some-dir/libs/main.js">
The Angular application will look at the current path to find assets ( example.com/route/first/assets ) which will force them to copy-paste the asset folder that I provided to their root. I imagine It would be much more simple for the customer if my component can look for my asset at the location relative to my build content ( '../some-dir/libs/asset' ), instead of their directory root. However I'm not very sure if what I expect is industry standard or appropriate
How can I correctly build/bundle/reference assets that the consumer can use anywhere by just extracting and referencing/importing my build content ? ( That I don't need to know consumer's project structure and the consumer does not need to alter my/his folder structure )
526
Just use relative url in app like this:
<img src='./assets/img/img1.jpeg' />
If you know where the root context is, build your app with base-href and deploy-url parameter like this:
ng build --prod --base-href=/route1/ --deploy-url=/route1/
if you need deploy into different root context , change the value of the parameters and build it again.
But if you don't know the deploy root context, the plan B is:
Change useHash to true in the app-routing.module.ts
const routes: Routes = [/* your routes goes here */];
@NgModule({
imports: [
RouterModule.forRoot(routes, {
useHash: true, // change useHash to true
enableTracing: !environment.production
})
],
exports: [RouterModule]
})
export class AppRoutingModule { }
and change the base href in index.html to ./,
<head>
<base href="./">
</head>
don't add base-href and deploy-url parameter with ng build, then you can deploy your app to any web root. but the the url will be end with /{webroot}/#/{client-route}
109
I believe either defining "baseHref" option in angular.json or base tag in your head in index.html should help.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
