Load Angular2 template from external URL

Question

Is it possible to load templates from external URLs? This is what I'm currently trying to do, but Angular seems to be ignoring it without throwing any errors and the page just keeps on loading indefinitely.

@Component(
    selector: 'dashboard-page',
    //templateUrl: '../templates/dashboard-page.html',
    templateUrl: 'http://localhost:9091/html/dashboard-page.html',
    directives: const [],
    pipes: const []
)
class DashboardPage implements AfterContentInit {

http://localhost:9091/html/dashboard-page.html I can access directly and CORS is setup to allow the Dart application on port 8080 to communicate with the Kotlin application on port 9091.

I'm trying to load different HTML templates depending on the account profile - different accounts will see different HTML templates being served by the Kotlin code.

I this something that can be done or is not possible for Angular2 to load external template files?

Why don't you have two different components instead, or an ngSwitch? Serving it from another application seems wildly overcomplicated. — jonrsharpe
– jonrsharpe, Commented Dec 4, 2016 at 20:46

Günter Zöchbauer · Accepted Answer · 2016-12-04 21:20:29Z

2

The templateUrl string has to be a compile time constant and is read when pub build is run. Even if it could read from an HTTP url at build time it wouldn't help a bit for

I'm trying to load different HTML templates depending on the account profile - different accounts will see different HTML templates being served by the Kotlin code.

Use *ngIf or ngSwitch or dynamically added components instead.

answered Dec 4, 2016 at 21:20

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

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

2 Comments

Jan Vladimir Mostert Over a year ago

I was trying to switch templates in the backend (if user is of type x, show template x, otherwise show template y) and if user is not logged in return 404 on that template to protect the html. So i take it, you can't have an external URL in the templateUrl?

Günter Zöchbauer Over a year ago

No, templates are processed at build time by transformers to generate Dart code and that is then translated to JS. You can't do that at runtime.

Collectives™ on Stack Overflow

Load Angular2 template from external URL

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related