This is a problem I have come across as well.
Unfortunately, I did not find a simple solution for this.
With a angular.directive() I was injecting a url's service. With angular.component() you can no longer do this.
You can use a plain JS object. Or maybe a singleton.
I use Typescript and ended up using a class with static properties to do this.
Edit:
Just want to extend this answer with a small update.
Because we can no longer use AngularJS's dependency injection mechanism, the order in which files are loaded is important if you want to use some extra piece of code to generate URL.
In the following Typescript code, the class MyRoutes needs to be loaded before any angular code for this to work.
class NgMyComponent implements ng.IComponentOptions {
templateUrl = MyRoutes.templateBase + 'my-component.html';
controller = MyComponent;
controllerAs = 'vm';
}
class MyComponent {
}
angular
.module('MyModule')
.component('myComponent', new NgMyComponent);
A simple way to mitigate this a bit is to use a function for the template Url, so the the URL is built only when the component is actually created, like so:
templateUrl = () => MyRoutes.templateBase + 'my-component.html';