Angular 4 signle page application embedded inside Another jQuery SPA

[Ravish Tiwari]

Hi All,

I have an Tab based single page application (sort of) built using jQuery. It has it's own routing, that looks something like:

http://<HOST>/appM#!tab/0/active/4
http://<HOST>/appM#!tab/1/active/14

When user clicks on any of the tab, URL is updated, and based on URL, tab content is dynamically loaded, and that particular tab is set to active.

Now, under TAB 1, I have embed an Angular 4 Application, and this Application has it's own route defined, something like:

import { Routes } from "@angular/router";
import { AppRootComponent } from "./app-root.component";
import { FormFieldComponent } from './app.formfield.component';
import { UserListComponent } from "./users/user-list";

export const routes: Routes = [
    { path: '', component: FormFieldComponent, pathMatch: 'full' },
    { path: 'user', component: UserListComponent, pathMatch: 'full' }
];

And the App module is defined something like this:

<imports>

@NgModule({
    imports: [BrowserModule, FormsModule, UserListModule, RouterModule.forRoot(routes, { useHash: false })],
    declarations: [AppComponent, FormFieldComponent, AppRootComponent],
    bootstrap: [AppRootComponent],
    providers: [{ provide: APP_BASE_HREF, useValue: '/appM#!tab/0/active/4' }, ]
})
export class AppModule { }

Angular 4 application is loading properly and it's routes are also working fine, there is not problem there, however, when I try to switch to a different tab ( which is not under Angular, but, the one controlled by jQuery), I get following error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'appM'
Error: Cannot match any routes. URL Segment: 'appM'
    at ApplyRedirects.webpackJsonp.../../../router/@angular/router.es5.js.ApplyRedirects.noMatchError (eval at globalEval (jquery.js:328), <anonymous>:81982:16)

This is because, the route change is going to Angular Router, and there is not matching route for this. Can we use Angular 2/4 the way I am trying to use?
I actually need to embed few Angular 4 applications inside an Existing large Application.


Thanks,

[Lucas Lacroix]

There are so many things that can happen in those embedded apps that would break the host app or each other that I would not suggest this approach.

One approach that may work is to embed your Angular application into an iFrame. That way, nothing within embedded app(s) or within the host app would be able to step on each other. This approach would mean that routing is not shared, but you would have the router in your host application set the location of the iFrame appropriately when it changes. You will still have issues with higher-than-normal memory usage due to all the duplication of libraries within each application.

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

Advanced Technology Division, MEDITECH

781-774-2293