Angular 为什么<；应用程序根>；呈现另一个<；应用程序根>；其中，哪个包含我的路由组件？_Angular_Typescript_Router Outlet

Angular 为什么<；应用程序根>；呈现另一个<；应用程序根>；其中，哪个包含我的路由组件？

angular typescript

Angular 为什么<；应用程序根>；呈现另一个<；应用程序根>；其中，哪个包含我的路由组件？,angular,typescript,router-outlet,Angular,Typescript,Router Outlet,我有一个延迟加载的多模块Angular 7.2.2应用程序，它似乎在自己内部创建一个主AppComponent模板的副本，然后在其中呈现路由组件这里是我试图在一个完整但简洁的序言（我不能复制在一个plunkr）。请务必询问我遗漏的任何细节序言我有一个包含普通html的index.html文件，在它的中有一个元素。这是项目中唯一出现app root标记的位置。此文件在angular.json的projects.app.architect.build.options.index属性中引用主A

我有一个延迟加载的多模块Angular 7.2.2应用程序，它似乎在自己内部创建一个主

AppComponent

模板的副本，然后在其中呈现路由组件

这里是我试图在一个完整但简洁的序言（我不能复制在一个plunkr）。请务必询问我遗漏的任何细节

序言我有一个包含普通html的

index.html

文件，在它的

中有一个

元素。这是项目中唯一出现

app root

标记的位置。此文件在

angular.json

的

projects.app.architect.build.options.index

属性中引用

主

AppComponent

声明为

@Component({
  selector: 'app-root',
  template: `
    <router-outlet></router-outlet>
    <message-banner [show]="showMessage" [message]="message"></message-banner>
  `,
  providers: [AuthenticationService, AuthenticationGuard, MessagingService]
})

从以下

AppModule

@NgModule({
  imports: [
    appRoutes,
    BrowserAnimationsModule,
    BrowserModule,
    CommonModule,
    FormsModule,
    HttpClientModule,
    HttpClientXsrfModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
    SharedGenericModule
  ],
  declarations: [
    AppComponent,
    MessageBannerComponent
  ],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' },
    appRoutingProviders,
    ChoosePasswordGuard,
    LoadingBarService,
    Title,
    UserService
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  bootstrap: [AppComponent]
})

export class AppModule {}

使用这些

应用程序路径

（小摘录）

问题应用程序稳定后，生成的DOM如下所示：

<body>
  <app-root ng-version="7.2.2">

    <router-outlet></router-outlet>

    <app-root>
      <router-outlet></router-outlet>
      <default-routed-component _nghost-c0>...</default-routed-component>
      <message-banner ng-reflect-show="true" ng-reflect-message="[object Object]">...</message-banner>
    </app-root>

    <message-banner ng-reflect-show="true" ng-reflect-message="[object Object]">...</message-banner>

  </app-root>
</body>


...
...
...

请注意，内部

没有使用

ng版本装饰
此外，我只能通过编程方式与内部的
通信，而外部的似乎是断开连接的。但在加载第一条路由之前（在应用程序稳定之前）生成的消息将发送到消息横幅的两个实例
问题
为什么我的应用程序要用两个
实例化两个
，但只使用其中一个。我如何防止它这样做
我需要保留一个应用程序范围的
，但我显然想要一个。如果不是因为该组件的重复，这可能只是一个神秘的不便——否则该应用程序在各个方面都能很好地工作。
回想起来，答案是非常明显的
主AppComponent（包含应用程序唯一的
和我希望在整个应用程序中使用的通用代码）从主AppModule启动，并由路由器第二次实例化为默认路由组件，然后将功能模块作为子路由加载
修复方法只是删除AppComponent和子路由；因此，要更改app.routes.ts的
const routes: Routes = [
  {
    path: '',
    redirectTo: 'shop',
    pathMatch: 'full'
  },
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: 'shop',
        data: { key: 'shop' },
        loadChildren: "./modules/shop.module#ShopModule",
        pathMatch: 'full'
      },
  ...
  }
]

到
更新：我没有完全理解“创建一个真实的、不同的主组件。不要为你的主页重用根组件”的含义。我用ng new
创建了一个新的、现代的应用程序，这正是示例应用程序所做的：主应用程序组件选择index.html的
，并且是主页，使用一个甚至不包含
的模板。你能用它创建一个吗？@Igor我会尽力；我们的应用是巨大的。请等待（我将删除此评论并在完成后更新）。我可以看到您在AppModule导入中声明的批准吗？@emkay绝对可以！添加了一个样本的模式，我们已经，以及他们的方式包括<代码>工单
具有完全在另一个模块中处理的子路由（即，工单/零件/：id
，工单/车间/：id）。为了简洁起见，我省略了它们。
<body>
  <app-root ng-version="7.2.2">

    <router-outlet></router-outlet>

    <app-root>
      <router-outlet></router-outlet>
      <default-routed-component _nghost-c0>...</default-routed-component>
      <message-banner ng-reflect-show="true" ng-reflect-message="[object Object]">...</message-banner>
    </app-root>

    <message-banner ng-reflect-show="true" ng-reflect-message="[object Object]">...</message-banner>

  </app-root>
</body>

const routes: Routes = [
  {
    path: '',
    redirectTo: 'shop',
    pathMatch: 'full'
  },
  {
    path: '',
    component: AppComponent,
    children: [
      {
        path: 'shop',
        data: { key: 'shop' },
        loadChildren: "./modules/shop.module#ShopModule",
        pathMatch: 'full'
      },
  ...
  }
]

const routes: Routes = [
  {
    path: '',
    redirectTo: 'shop',
    pathMatch: 'full'
  },
  {
    path: 'shop',
    data: { key: 'shop' },
    loadChildren: "./modules/shop.module#ShopModule",
    pathMatch: 'full'
  },
  ...
]