I build a test application in Angular2 (RC4) with Angular Cli.
The application is really simple with 3 components and 3 routes.
I build the application in prod with Angular Cli.
Now I want to integrate this app into existing site (for example on about page) in a way that it wouldn't effect the router of my site.
The idea is to have this Angular2 App like a feature/plugin on my site.
More less the effect which I want to achieve is similar to Angular2 application written in Fiddler, Plunker and etc. (you can see the app in result window and changing the state is not changing the url of the browser tab). example
Definitely I don't want to use <iframe> for this.
I was looking for some information in Google but I couldn't find anything.
The nearest suggestion which I found was:
... <!--Existing site -->
<section class="here"></section>
<script>$('.here').load('angular2App/index.html'); //the index.html of build anguar2 app</script>
This is not working and require a lot of modification of all href, src and etc
My router(app.routes.ts) looks like this:
import { provideRouter, RouterConfig } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
const routes: RouterConfig = [
{
path: '',
component: HomeComponent
},
{
path: 'about',
component: AboutComponent,
}
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(routes)
];
How can I integrate a Angular2 app into existing site?