Angular 路由选择器 "app-home" 不匹配元素

Question

我想防止我的初始组件被加载两次。我正在尝试使用 default/empty 组件来避免 AppComponent 与 AppComponent 一起加载空组件将是起点，其他组件将在用户命令中加载。

我仍在研究 Angular 路由，但据我所知，路由器插座动态加载到模块中，默认情况下总是从 AppComponent 开始？

我认为设置一个空的 Homecomponent 会破坏 AppComponent 循环

我做错了什么？这是所有与问题相关的代码吗？

我的Index.html

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />          
      <base href="/" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />   
    </head>
    <body>
      <app-root>
         Loading...
      </app-root>
    </body>
</html>

我的app.component.html

<app-nav-menu></app-nav-menu>    //navigation that is always shown
<router-outlet></router-outlet>

应用路线：

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes),
    HomeModule,  
    AccountModule,
    OtherModules
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我的 home.html 只是一个空的 html-file

我的主页模块

@NgModule({
  declarations: [    
  ],
  imports: [
    CommonModule,     
    RouterModule.forChild([  
       { path: 'feed', loadChildren: () => import('./../home/feed/feed.module')
                                .then(x => x.FeedModule)},

       { path: 'search', loadChildren: () => import('./../home/searchresults/search.module')
                                .then(x => x.SearchModule)}  

    ]),
    SharedModule,
    OtherModules    
  ],
  exports: [
    CommonModule,
    RouterModule,    
    SharedModule,
    OtherModules     
  ],
  providers: [
    LoginService
  ]
})
export class HomeModule { }

应用模块：

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,     
    FirstLoadedComponent,    
    AuthCallbackComponent    
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
    AppRoutingModule,
    SharedModule,
    HttpClientModule,
    ReactiveFormsModule,
    FormsModule,
    CoreModule,
    OtherModules
  ],
  exports: [
  ...
  ],
  providers: [
  ...
  ],
  bootstrap: [
    //HomeComponent //gives error
    //FirstLoadedComponent //gives error
    AppComponent //triggers a <app-root>-inception resulting in double load of first component
  ],
  entryComponents: [
  ...
  ]
})
export class AppModule {

}

当我 bootstrap AppModule 中的 AppComponent 时，它会触发第二个 AppModule，因此第一个加载的组件会显示两次。

当我想 bootstrap HomeComponent（空 html）或第一个加载的组件时，我得到错误：

The selector "app-home" did not match any elements at DefaultDomRenderer2.selectRootElement 
(platform-browser.js:661)

当我在根 AppModule 中声明 HomeComponent（使用选择器 app-home）时，这怎么可能？我是否在某个地方用错误的逻辑覆盖了好的逻辑？级联可能有点混乱。

*编辑：我没有同时 bootstrap 所有 3 个组件，只是一个一个地在评论中添加了行为是什么。

感谢输入

Answer 1

让我们从声明开始

I'm still figuring out Angular Routing, but as I understand the router-outlet loads in modules dynamically, always starting at the AppComponent by default?

部分正确。在你的 AppModule 中你有各种数组

declarations—this application's lone component.

imports—import BrowserModule to have browser specific services such as DOM rendering, sanitization, and location.

providers—the service providers.

bootstrap—the root component that Angular creates and inserts into the index.html host web page.

基本上你在bootstrap数组中加载的任何组件都会被加载，

接下来您需要注意的是，只要您不在 declarations 数组中声明组件，angular 就无法知道组件并将抛出错误

因此，为了解决多重加载问题，请从 boostrap 数组

中移除额外的组件

bootstrap: [AppComponent],

现在，如果您不需要加载 HomeComponent，您还需要将其作为模块延迟加载

const routes: Routes = [
  {  
     path: 'home', 
     loadChildren: () => import('home/home.module.ts').then(
     m => m.HomeModule
    ) 
  },
  { path: '', redirectTo: 'home', pathMatch: 'full' }
];

现在您需要从 AppModule 的声明数组中删除 HomeComponent 并将其添加到 HomeModule

的声明数组中

Angular 路由选择器 "app-home" 不匹配元素

Angular Routing selector "app-home" did not match element

angular

angular-routing

angular-module