Angular2 how to set templateUrl base path

In Angular2, I have something like templateUrl = 'templates/app.component.html' during development. But in deployment, i need the url to be something like templateUrl = '/static/angular_templates/app.component.html'. It bites to have to change the url at every single place. Is there an easy way to set a base url and do something like

templateUrl = BASE_TEMPLATE_PATH+ '/app.component.html'

so i only need to update BASE_TEMPLATE_PATH when switching from development to production? Thanks!

5
Leave a Reply

avatar
5 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

With TypeScript you can use static variables, like :

export class AppTemplateConstants {

    public static get BASE_TEMPLATE_PATH(): string { return 'YOUR_PATH_HERE'; }

}

To import this :

import { AppTemplateConstants } from '../shared/constants/AppTemplateConstants';

To use this :

templateUrl: AppTemplateConstants.BASE_TEMPLATE_PATH + 'app/path/component.html'

Jason
Guest

You can achieve the desired effect without changing the templateUrl all over your code base by using UrlResolver, available since 2.0.0-alpha.36. import {UrlResolver} from '@angular/compiler'; import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {platformBrowserDynamic} from '@angular/platform-browser-dynamic'; let MyApp: any; @NgModule({ imports: [BrowserModule], providers: [{provide: UrlResolver, useValue: new UrlResolver("http://localhost/app")}], bootstrap: [MyApp] }) class AppModule { } export function main() { platformBrowserDynamic().bootstrapModule(AppModule); } This will bootstrap your application with a custom instance of UrlResolver that has a base url that you specify. You can even have finer control over resolving the paths by extending the UrlResolver class: class MyUrlResolver extends UrlResolver… Read more »

Jason
Guest

I use DependencyInjection to pass around an EnviromentSettings object where I store environment variables such as BASE_TEMPLATE_PATH.

Kind of simple and nice mechanism in my opinion.

I hope it helps

Jason
Guest

You should define a constant in your build environment, using webpack, for example, you can use the webpack.DefinePlugin: Passing environment-dependent variables in webpack

Jason
Guest

you can use one common class/service in which you can store all your global variables and inject that class at the time of bootstrapping by doing so that class is now available to all another classes/components throughout the app and also now you can easily change your variable value by just changing at one place instead of making changes in all components here is example of same – import {Component, Injecable} from 'angular2/core'; @Injecable() export class GlobalService { public BASE_TEMPLATE_PATH: string; constructor() { this.BASE_TEMPLATE_PATH = "Your Path Goes Here"; } } and just register this service class in bootstrap like… Read more »