Angular2 application only works the first time

Question

I have made a simple Angular2 component much like in the tutorial ( https://angular.io/guide/quickstart )

This Angular2 component runs inside a modal in a larger application.

This is the content of the modal:

<script>
    System.import('my-app')
</script>

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

The application only works when opening the modal for the first time. When I clear the content and run System.import('my-app') again it does nothing (there is no error and the <my-app>Loading... </my-app> stays visible).

It works only after refreshing the page.

How do you start the same Angular2 module a second time?

Answer 1

To answer my own question, the problem is that my-app does not expose any exports. I've had to adjust main.ts from:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import MyAppModule from './my-app.module';

platformBrowserDynamic().bootstrapModule(MyAppModule);

to

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import MyAppModule from './my-app.module';

export default function main() {
    platformBrowserDynamic().bootstrapModule(MyAppModule);
}

And the init code from:

<script>
    System.import('my-app');
</script>

to

<script>
    System.import('my-app')
            .then(function(main) { 
                main.default();
            });
</script>

(promise catch code omitted for brevity)