How to tell Angular2 to ignore an embedded Angular1 app?

Question

I've got an Angular1 app bootstrapped inside an Angular2 component.

Template:

<div #ng1Hook></div>
<input type="text" ng-model="vm.filters.date" />

Component:

@ViewChild('ng1Hook') div; 
ngAfterViewInit() {
    angular.bootstrap(this.div.nativeElement, ['ng1Module']);
}

The problem is that NG2 is trying to parse the NG1 code inside of its template. For example, further down the template there's code like this: ng-model="vm.filters.date" and ofcourse NG2 can't handle this.

Right now, my NG2 component is complaining it cannot read property 'xyz' of undefined which is something I'm using in the NG1 component template ng-model=vm.xyz

How can I tel NG2 to ignore the NG1 code inside of its template? Or are there other ways of properly embedding NG1 inside NG2?

Angular2 wouldn't try to handle ng-model="vm.filters.date". Can you please provide more details about what the problem is exactly? — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 17, 2016 at 10:00
Actually I doubt it's caused by ng-model=vm.xyz. This snippet doesn't contain anything that would Angular2 cause to process it. I rather think you have something like {{vm.xyz}} in your HTML which would be processed by Angular2. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 17, 2016 at 10:10
I might be wrongly implementing ng1 inside ng2, basically I've got the full ng1 module inside the ng2 component, which might not be able to work at all. I do get logs from the ng1 module through though, so it's alive. I'm just looking to find the right place to put the ng1 module html — RobSeg
– RobSeg, Commented Jun 17, 2016 at 10:15
You might consider an iframe. There is also ngUpgrade/ngDowngrade in Angular2 to make Angular1 code work in Angular2 but I don't know Angular1 and haven't tried them myself. — Günter Zöchbauer
– Günter Zöchbauer, Commented Jun 17, 2016 at 10:22

Günter Zöchbauer · Accepted Answer · 2016-06-17 10:03:53Z

2

You can add the attribute ngNonBindable to prevent Angular2 to process bindings or instantiate directives or or components.

If the HTML is added dynamically Angular2 also won't process it

<div [innerHTML]="someHtml">

The content of someHtml would be added to the DOM and not processed by Angular2 in any way.

answered Jun 17, 2016 at 10:03

Günter Zöchbauer

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

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

Collectives™ on Stack Overflow

How to tell Angular2 to ignore an embedded Angular1 app?

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related