How to load Angular2 root component Dynamically

Question

I have a requirement where I have to load the root component in angular2 dynamically/using setTimeout(). Is is possible and how. eg

<body>
 <hello-world>Loading...</hello-world>
</body>

I want the ' hello-world ' append after few second of page load. As I can't have custom component in the page load.

A plnkr will be helpful.

Answer 1

You can add event on index page and listen this event in main.ts angular file.

index.html:

...  
<body>
    <my-app>Loading...</my-app>

    <script>
      setTimeout(function() {
          document.dispatchEvent(new Event('startNgLoad'))
      }, 5000)
    </script>
  </body>
...

main.ts:

document.addEventListener('startNgLoad', () => {
  platform.bootstrapModule(AppModule);
})

Answer 2

You can load the root module inside the setTimeout in main.ts

setTimeout(function() {
  platformBrowserDynamic().bootstrapModule(AppModule);
},1000)

How to load Angular2 root component Dynamically

Question

2 answers

solution1
1 ACCPTED 2016-09-22 11:50:15

solution2
0 2016-09-22 12:06:52

How to load Angular2 root component Dynamically

Question

2 answers

solution1 1 ACCPTED 2016-09-22 11:50:15

solution2 0 2016-09-22 12:06:52

solution1
1 ACCPTED 2016-09-22 11:50:15

solution2
0 2016-09-22 12:06:52