CODEWITHSUNDEEP
angularjsangularsystemjs
virtualsante
virtualsante

Reputation: 203

How to load an Angular2 component from AngularJS more than one time?

I am working on an application which has both AngularJS and Angular. Right now, I am invoking Angular component from a html page using the below line:

System.import('app')

Inside app\app.module.ts file, I have specified a specific parent component to be bootstrapped. This parent component in turn invokes a child component. I put some console.log statements in the constructor of the parent and child component and I see everything works fine for the first time.

But, when I navigate away and comeback to the html page again, I notice that the parent and child components are not getting initialized. The only workaround I have found is to refresh the entire page which is not ideal. I tried to unload the Angular components as soon as the user navigates away but I couldn't find any suitable SystemJS methods.

I know Angular components gets initialized only once which is probably why this is happening but is there a way to get past this issue?

Thanks

Upvotes: 1

Views: 1623

Answers (3)

acekizzy
acekizzy

Reputation: 67

Well, this might be a long shot. But have you tried making your component to implement OnChanges and OnInit. You can call ngOnInit inside ngOnChanges to reinitialize the component again.

//this was my fix for a similar problem In component, say: 

@Component({
    selector: 'app-myapp',
    templateUrl: './myapp.component.html',
    styleUrls: ['./myapp.component.scss']
})
export class MyappComponent implements OnInit, OnChanges {
    ngOnChanges() {
        ngOnInit(){}; //reinitialize when onchanges is called again
    }
}

You should also consider https://angular.io/api/core/OnChanges#usage-notes.

hope it helps

Upvotes: 0

virtualsante
virtualsante

Reputation: 203

I have managed to find an answer to my question. The trick is to use the fully qualified URL when importing and deleting the module like below:

System.import('protocol//domainname:portnumber/modulename/filename')

System.delete('protocol//domainname:portnumber/modulename/filename')

Hope this helps someone.

Upvotes: 2

Arnaud D
Arnaud D

Reputation: 81

Maybe AngularJS bootstrap interfers with angular2.

https://angular.io/guide/upgrade#bootstrapping-hybrid-applications explains how bootstrap hybrid applications.

You can also try to migrate Angular 2 to Angular 5.

Upvotes: 0

Related Questions