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.
  • [AngularJS] Angular 4... Ravish Tiwari

Reply via email to