Angular 6仪表板可在一处容纳多个应用程序

Question

我有3个应用程序在Angular App中作为3条不同的路线运行。

-src
  -app
     --Modules
         --App1
         --App2
         --App3

这三个应用程序完全不同。但是，由于当前的体系结构，这些应用共享主题，资产等。有时，app1中的更改​​会导致app2中出现意外结果。我想避免这种情况。

我要实现的目标：
（1）创建三个不同的应用程序-app1，app2和app3。这很容易。

（2）创建另一个有角度的应用程序（如仪表板），其中app1，app2和app3作为小部件出现，然后单击它们将带您到相应的应用程序。类似于以下内容：

我需要（2）的帮助

这类似于Angular.io中的Tour of Heroes，其中每个块都是不同的应用程序，而不是路由。

https://stackblitz.com/angular/glxqybekpky?file=src%2Fapp%2Fapp-routing.module.ts

http://plnkr.co/edit/PMkIbCWJAAlxLBYgDcTG?p=preview

我到目前为止所做的事情

我创建了一个单独的仪表板应用程序，其中每个应用程序都有小部件。

我还创建了单个应用程序（针对app1，app2和app3）。另外，我为每个应用程序创建了library并将其发布。这就是app1-lib.module.ts的样子。 app2-lib和app3-lib具有相似的结构。

import { NgModule } from '@angular/core';
import { app1LibComponent } from './employee-lib.component';

@NgModule({
  imports: [
  ],
  declarations: [app1LibComponent],
  exports: [app1LibComponent]
})
export class app1LibModule { }

在我的主仪表板应用程序中， application.component.ts 看起来像。

import {Component, OnInit } from '@angular/core';
import {Applications} from './apps.model'; //Class with all app names (app1, app2, app3)

@Component({
  selector: 'app-applications',
  templateUrl: './applications.component.html',
  styleUrls: ['./applications.component.css']
})
export class ApplicationsComponent implements OnInit {
  constructor() { }
  ngOnInit() {
  }
  apps: Applications[] = [
   {id : 1,name :'app1'},
   {id : 2,name :'app2'},
   {id : 3,name :'app3'},
  ]
  }

applications.component.html

<div class="grid grid-pad">
  <a *ngFor="let app of apps" class="col-1-4"
      routerLink="/{{app.name}}">
    <div class="module hero">
      <h4>{{app.name }}</h4>
    </div>
  </a>
</div>

app-routing.module.ts 如下所示。我正在从每个应用程序库中提取组件，并将其分配给仪表板应用程序路径。

    import { NgModule } from '@angular/core';
    import {RouterModule, Routes} from '@angular/router';

    import { ApplicationsComponent } from './applications/applications.component';
    import {app1LibComponent} from 'app1Lib';
    import {app2LibComponent} from 'app2Lib'
    import {app3LibComponent} from 'app3Lib';

    const appRoutes: Routes = [
    {path: 'application', component: ApplicationsComponent},
    {path: 'app1', component: app1LibComponent},
    {path: 'app2', component :app2LibComponent},
    {path: 'app3', component :app3LibComponent},
   ];

    @NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
      ],
      exports: [RouterModule]
    })
    export class AppRoutingModule { }

我不确定这是否是正确的方法。

我正在寻找有关如何创建此体系结构的建议。谢谢大家！