CODEWITHSUNDEEP
angularwebpackangular-cli
Tom
Tom

Reputation: 795

Dynamic base href link with webpack

I just moved from systemjs to webpack as I moved to Angular-CLI. It used to work but it does not anymore. Here is what I have :

In my index.html in 

<script type='text/javascript'>
    var base = document.location.pathname.split('/')[1];
    document.write('<base href="/' + base + '" />');
</script>

And I also added a "/" at the root of the few js files added bellow.

Now that I'm on webpack, those files are loaded from somewhere else and I can't add this "/" anymore. So it is trying to load them on http://www.exemple.com/it/xxx.js, instead of http://www.exemple.com/xxx.js

I've seen that I have to update something in webpack.config.js file but angular-cli guys have decided to put it in their module and not on the project root as usual. I know I could edit this file but I don't want to do it again everytime I update angular-cli.

Is there a good way to do that ?

Upvotes: 5

Views: 3912

Answers (2)

dec
dec

Reputation: 604

Maybe you could use the provider in your @NgModule annotation:

@NgModule({
        declarations: [
            AppComponent,...    ],
        providers: [
            { provide: APP_BASE_HREF, useValue: '/'},... ],
        bootstrap: [AppComponent] 
}) 
export class AppModule { }

Upvotes: 1

Alexander Ciesielski
Alexander Ciesielski

Reputation: 10824

When building you can modify base tag () in your index.html with --base-href your-url option.

# Sets base tag href to /myUrl/ in your index.html
ng build --base-href /myUrl/
ng build --bh /myUrl/

https://github.com/angular/angular-cli#base-tag-handling-in-indexhtml

Upvotes: 4

Related Questions