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