在另一个基于jQuery的应用程序中嵌入Angular 4 SPA

时间:2017-08-09 11:39:55

标签: angular asp.net-mvc-4

我看了一些其他主题,比如:

How to embed two different Angular 2 applications inside another Angular 2 application without using IFrame

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路由,如果路由不属于其辖区,它会忽略路由更改事件,而是抛出错误?

0 个答案:

没有答案