How to have different base_url for different environment instance in angular2

Question

My index.html file of angular2 has following content:

I want that, when I build it in (npm run build)default mode (development mode), it should be

<base href="/">

But When I build it in production mode (npm run build --target=production), it should be

<base href="/new/">

I am expert in angular1, but new to angular2, but have tried to add a variable for base_url in index.ts file but that doesn't seems to be working.

I expect there muust be a quicker way to solve this, can anyone please help here.

if you're using webpack, you could using this plugin to inject to html when build npmjs.com/package/inject-html-webpack-plugin — Tiep Phan
– Tiep Phan, Commented Apr 25, 2017 at 17:52
we are not using this.. is that possible through angular-cli? or anyother way.. — undefined
– undefined, Commented Apr 25, 2017 at 17:55
please see answer below, and @Pankaj Parkar is Angular expert. — Tiep Phan
– Tiep Phan, Commented Apr 25, 2017 at 18:03
@TiepPhan for Angular cli, your answer seems to be a best option for me ;) — Pankaj Parkar
– Pankaj Parkar, Commented Apr 25, 2017 at 18:37

Tiep Phan · Accepted Answer · 2017-04-25 18:02:24Z

2

because you're using Angular CLI, it does support very well

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

you can update scripts in package.json:

"scripts": {
  //...
  "start": "ng serve -bh /anotheUrl/",
  "build": "ng build -bh /myUrl/",
  //..
},

answered Apr 25, 2017 at 18:02

Tiep Phan

12.6k3 gold badges40 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

I'm glad to help!

Pankaj Parkar · Accepted Answer · 2017-04-25 17:56:58Z

2

You could use APP_BASE_HREF provider to set its value

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

answered Apr 25, 2017 at 17:56

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges