我看了一些其他主题,比如:
How to embed a self-contained Angular 2 application inside of an Angular 1 application
但是,我有一个不同的用例,我想在另一个应用程序中嵌入Angular 2应用程序,在前端使用jQuery,我不想使用iFrames嵌入Angular应用程序。
关于申请:
我在前端使用jQuery存在一个基于.Net MVC的应用程序。应用程序的前端是基于选项卡的应用程序,并具有自己的前端路由。类似的东西:
的https:///#APPM B /统计/
的https:///#APPM米/用户/
等等。当用户单击应用程序中的任何一个或多个链接时,将动态加载该特定屏幕的内容(HTML +数据),使用收到的内容更新视图,并将该选项卡标记为活动。
Angular 2/4:
现在,我有几个小的Angular 2/4应用程序,我想嵌入到这些选项卡中的每一个。这些Angular 4应用程序有自己的路由。类似的东西:
export const routes: Routes = [
{ path: '', component: DefaultHomeComponent, pathMatch: 'full' },
{ path: 'list', component: UserListComponent, pathMatch: 'full' }
];
而且,这就是我用它的路线编写模块的方式:
@NgModule({
imports: [BrowserModule, FormsModule, UserListModule, RouterModule.forRoot(routes, { useHash: false })],
declarations: [AppComponent, DefaultHomeComponent, AppRootComponent],
bootstrap: [AppRootComponent],
providers: [{ provide: APP_BASE_HREF, useValue: '/appM#!b/stats/?' }, ]
})
export class AppModule { }
我能够在给定标签中引导Angular应用程序,它工作正常,直到我点击角度应用程序之外的任何链接。每当我点击这样一个链接时,我就会得到很长的JS错误:
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)
at CatchSubscriber.eval [as selector] (eval at globalEval (jquery.js:328), <anonymous>:81957:29)
at CatchSubscriber.webpackJsonp.../../../../rxjs/operator/catch.js.CatchSubscriber.error (eval at globalEval (jquery.js:328), <anonymous>:8378:31)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (eval at globalEval (jquery.js:328), <anonymous>:1448:26)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (eval at globalEval (jquery.js:328), <anonymous>:1422:18)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (eval at globalEval (jquery.js:328), <anonymous>:1448:26)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (eval at globalEval (jquery.js:328), <anonymous>:1422:18)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (eval at globalEval (jquery.js:328), <anonymous>:1448:26)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (eval at globalEval (jquery.js:328), <anonymous>:1422:18)
at LastSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (eval at globalEval (jquery.js:328), <anonymous>:1448:26)
at ApplyRedirects.webpackJsonp.../../../router/@angular/router.es5.js.ApplyRedirects.noMatchError (eval at globalEval (jquery.js:328), <anonymous>:81982:16)
at CatchSubscriber.eval [as selector] (eval at globalEval (jquery.js:328), <anonymous>:81957:29)
at CatchSubscriber.webpackJsonp.../../../../rxjs/operator/catch.js.CatchSubscriber.error (eval at globalEval (jquery.js:328), <anonymous>:8378:31)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (eval at globalEval (jquery.js:328), <anonymous>:1448:26)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (eval at globalEval (jquery.js:328), <anonymous>:1422:18)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (eval at globalEval (jquery.js:328), <anonymous>:1448:26)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (eval at globalEval (jquery.js:328), <anonymous>:1422:18)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (eval at globalEval (jquery.js:328), <anonymous>:1448:26)
at MapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.error (eval at globalEval (jquery.js:328), <anonymous>:1422:18)
at LastSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._error (eval at globalEval (jquery.js:328), <anonymous>:1448:26)
at resolvePromise (eval at globalEval (jquery.js:328), <anonymous>:8885:31)
at resolvePromise (eval at globalEval (jquery.js:328), <anonymous>:8856:17)
at eval (eval at globalEval (jquery.js:328), <anonymous>:8933:17)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (eval at globalEval (jquery.js:328), <anonymous>:8526:31)
at Object.onInvokeTask (eval at globalEval (jquery.js:328), <anonymous>:56494:33)
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (eval at globalEval (jquery.js:328), <anonymous>:8525:36)
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (eval at globalEval (jquery.js:328), <anonymous>:8293:47)
at drainMicroTaskQueue (eval at globalEval (jquery.js:328), <anonymous>:8697:35)
at webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask (eval at globalEval (jquery.js:328), <anonymous>:8604:21)
at ZoneTask.invoke (eval at globalEval (jquery.js:328), <anonymous>:8589:48)
只有当我的Angular应用程序拥有自己的路由时,这才是问题。在这些情况下,Angular路由与Site路由冲突。
可以通过这种方式使用Angular 2/4应用程序并配置Angular 2路由,如果路由不属于其辖区,它会忽略路由更改事件,而是抛出错误?