1

I'm trying to find a way to refer to a file by using an unique name instead of a folder path. With absolute and relative path, if I move the components folder I have to refactor all the link. That is quite annoying also because by using gulp all the javascript file are moved to another directory.

In Angular 1 we just refer to the ID of the ng-template.

Is there a way to do a similar thing in Angular 2?

Additional information:

Code I'm currently using

(function(app) {
    app.AppComponent =
        ng.core.Component({
            selector: 'my-app-test',
            templateUrl: '/assets/base/components/comp-test-app/test-template.html'
        })
            .Class({
                constructor: function() {}
            });
})(window.app || (window.app = {}));
Simoyw
  • 545
  • 8
  • 21

1 Answers1

1

You can reference the template by relative urls by setting the moduleId of the component.

(function(app) {
    app.AppComponent =
        ng.core.Component({
            moduleId: module.id,
            selector: 'my-app-test',
            templateUrl: 'test-template.html'
        })
        .Class({
            constructor: function() {}
        });
})(window.app || (window.app = {}));

Source: https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html

Brandyn Bayes
  • 106
  • 4
  • This works if I will change the folder position of this script? – Simoyw Jul 21 '16 at 10:06
  • As long as the script and the html file have the same relative path, yes, you can move them wherever you like. – Brandyn Bayes Jul 21 '16 at 14:47
  • No they don't have the same relative path because the script will be moved in the index.html file concatenated with all the other components with gulp. The html file will be instead in `src/app/components/test/template.html`. – Simoyw Jul 21 '16 at 16:17
  • The use of moduleId is compatible with both systemjs and webpack, which means that as long as a loader is used that knows to obey the moduleId setting, you should not need to reconfigure your URLs. – Brandyn Bayes Jul 21 '16 at 18:25