1

I have a specific use case where the component's html template can load from multiple places.

For example, 

@Component({
  selector: 'app-home',
  template: require('http://xyz/home.component.html'),  **// This can be from local or any other server** 
  styleUrls: [require('http://xyz/home.component.css')],
})

Need help in understanding how can I go about this or what are my alternatives.

Thanks

Dhaval Maniar
  • 11
  • 1
  • 2
    You can't. The template is supposed to be precompiled to JavaScript and the result bundled in the application itself. Not loaded dynamically at runtime. – JB Nizet Mar 31 '17 at 13:29
  • I was wondering if there is any lazy loading of a component ( like we have it for Module ) ? – Dhaval Maniar Mar 31 '17 at 14:10
  • @DhavalManiar Component factories are compiled on demand (of course, if you haven't declared component in `entryComponents` section of `@NgModule` - in this case, they will always be compiled when module is defined), but component code is always present inside module bundle. To have best experience for module loading, use one module per one feature convention (see https://angular.io/docs/ts/latest/guide/ngmodule.html#!#feature-modules). – metamaker Mar 31 '17 at 14:45
  • @metamaker : I do have SubModules being lazy loaded as per the routes & i did notice the module is bundled with all its components (including html). Issue started when i started exploring ways to avoid html being part of the bundle. Post couple of hours of futile search, I had to ask it to larger audience. Looks like i ll need to do some dynamic loading of component as you pointed out.. – Dhaval Maniar Mar 31 '17 at 14:57

1 Answers1

0

You can't provide template url to component that points not to local path and you can't require not from local path, but still you can achieve what you want by creating component dynamically from template content.

As downside, you will have to always depend on Angular JIT compiler instead of AoT compiler (see more here https://angular.io/docs/ts/latest/cookbook/aot-compiler.html). Also you will need to have CORS requests enabled on your server.

You can do what you want like next:

  1. Use http (https://angular.io/docs/ts/latest/guide/server-communication.html) to fetch your template content from other server.
  2. Compile template like it is recommended in How can I use/create dynamic template to compile dynamic Component with Angular 2.0?.
  3. Write selector of your dynamic component somewhere inside application in template where you want to include it (i.e. something like <dynamic-detail></dynamic-detail>).

See this Plunker for example implementation (can be cleaned and improved further): http://plnkr.co/edit/ZLYGBRl41SlTNoX8xQeD

Remember, this is not intended way of how Angular2 should be used, so beware using this in production.

Community
  • 1
  • 1
metamaker
  • 2,307
  • 2
  • 19
  • 18
  • Totally get your point & couldnt agree more that the requirement clearly violates the intent of using angular app. I can manage to deploy the solution on same server with different virtual directory ( which would eliminate the CORS issues ). But it still involves making http calls.. :( – Dhaval Maniar Mar 31 '17 at 14:44
  • We also have architecture of app at my actual work that involves providing templates for angular2 forms from API server, so this is working solution. For angular4 way of component compilation NgComponentOutlet is present (https://angular.io/docs/ts/latest/api/common/index/NgComponentOutlet-directive.html). – metamaker Mar 31 '17 at 14:56
  • i am already getting a hard time upgrading from angular 2RC4 ( Yeah it was a trap ) to 2.4.. Hope 4.0 doesn't trouble me as much. On other note, I will be looking at the sample youve provided ( good to hear i wasnt the only one with this usecase ).. I am already exhausted for today trying to find solutions. – Dhaval Maniar Mar 31 '17 at 15:04
  • @DhavalManiar Agree, this dynamic components generation is not perfect, DIC can behave unexpectedly, (Reactive) Forms API documentation sucks for cases more complex than "drop several textedits on form and wrap everything into formGroup". Still, I pretty like Angular2, and when you learn how to use it properly (particularly how to use RxJS properly), it becomes racing car. Server-side rendering, one app - many platforms ideology, Ionic2, AoT and many other bonuses included just for free beat the question about use it or not. Plus community is really cool. Good times are coming, hopefully. – metamaker Mar 31 '17 at 15:40