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.

On Tue, Aug 8, 2017 at 12:02 PM Ravish Tiwari <tiwari.ravis...@gmail.com>
wrote:

> 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,
>
>
> --
> 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+unsubscr...@googlegroups.com.
> To post to this group, send email to angular@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 <http://ehr.meditech.com/>
781-774-2293

-- 
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+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Reply via email to