Dynamic href base link with webpack

Question

I just switched from systemjs to webpack when I switched to Angular -CLI. It worked, but no longer happens. 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 "/" to the root of several js files added below.

Now that I am in webpack, these files are downloaded from another place, and I can no longer add this "/". Therefore, he tries to download them at http://www.exemple.com/it/xxx.js instead of http://www.exemple.com/xxx.js

I saw that I needed to update something in the webpack.config.js file, but the Angular-cli guys decided to put it in their module, and not at the root of the project, as usual. I know that I can edit this file, but I do not want to do it again every time I update Angular-cli.

Is there a good way to do this?

Answer 1

When creating, you can change the base tag () in your index.html with the -base-href your-url parameter.

# 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

Answer 2

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

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