The question is on the same lines as this one, however the other way around.
I want to embed an Angular 1.x app inside an Angular 2 app. More specifically this app. I understand that there are ways to upgrade elements individually, however this being a large project, I simply want to embed this in one of my tabs on the Angular 2 app.
I tried a very naive approach where I copied the dist folder in one of my components and I am trying to use the same index.html with
<div ng-app="app">
<div ng-view="">
</div></div>
Now I am trying to load all the minifed javascript (which includes angular 1.x library as well as some app specific javascript files and css) into my main angular 2 app in its own index.html . Then I load the index.html from the dist directory through my component. The problem seems that Angular 1 library doesnt seem to load.
I have a few questions;
- Would it help if the libraries(js) files are loaded as ts. I assume that it is possible to load Angular 1 and 2 libraries simultaneously.
- If it would, is there an easy way to get the
jsfiles converted to.tsfiles.
EDIT
I got this to work by using the angular.boostrap call as shown below.
Following is my code snippet for my component
import {Component, AfterViewInit, OnInit} from 'angular2/core';
declare var angular:any;
@Component({
selector: 'server-monitor',
templateUrl: 'app/components/server-monitor/dist/index.html',
styleUrls: ['app/components/server-monitor/dist/styles/vendor-c0a35f80.css',
'app/components/server-monitor/dist/styles/main-0c4cc0e5.css',
],
})
export class ServerMonitorComponent implements AfterViewInit, OnInit{
ngOnInit(){
angular.bootstrap(document, ['app']);
}
}
However, now I have run into a different problem. The original project makes a lot of http calls very frequently(2 sec by default) to get live stats about the system.
When I run this embedded into my app, I can see the calls are made but my page keeps refreshing and doesn't show anything on the graph. I understand I have to modify something where it makes the http calls, but no sure where.