Javascript Angular 4路由怪异行为：除非页面刷新，否则不呈现子模块

我一直在寻找解决这种奇怪行为的办法，但运气不佳

• angular 4控制台或javascript控制台中没有错误
  • 使用Angular CLI（Angular 4）

我在角形路由器上表现得非常怪异。我试图从父AppModule加载一个子路由，它有自己的模块。路线是/产品

在/products模块（products.module.ts）：我有3条路线：

/产品/概述

/产品/介绍[重定向到发件人/产品]

/产品/产品/：产品

产品模块应该在全局AppModule的导航栏下有自己的导航栏，导航栏位于products.component.html组件模板中路由器出口的上方

主要问题：当我将页面（不使用角度路由器链接）加载到/products时：

• 两个导航栏都可见
• 加载的页面（ex/intro）的导航栏可见，但子组件（IntroComponent）不可见
• 但是，当我导航到/products模块routes（ex/overview或/product/：product）中的任何其他子例程时，它的渲染效果很好。因此，在整个页面刷新中加载的任何路由都是不可见的

最奇怪的部分：当我在非/products（ex/home）的路径上加载页面（刷新），然后使用主导航栏导航到/products:

• 导航栏不可见
• 子组件（ex/intro组件）可见

在过去的几天里，这给我带来了很多麻烦

现在，一些代码：

app.module.ts[主AppModule]

    @NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        LoginComponent,
        SignupComponent,
        NotFoundComponent,
        LogoutComponent,
        ErrorComponent,
        AboutComponent,
        ApiComponent,
        StatusComponent,
        SupportComponent,
        CustomersComponent,
        JobsComponent,
        TosComponent
    ],
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        SharedModule,
        //ProductsModule,
        AppRoutingModule
    ],
    providers: [
        UserService,
        AuthGuard,
        ErrorService,
        NavbarService,
        MailerService,
        IOService,
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

shared.module.ts——这有我的ViewAppComponent（它只是一个带有全局导航栏的路由器出口）和其他全局组件（如应在所有路由上显示的导航栏和页脚）

应用程序路由.module.ts

const routes: Routes = [
    {
        path: '',
        component: ViewAppComponent,
        children: [
            {path: 'products', loadChildren: () => ProductsModule}, // where im trying to load my products module from the main module
            {path: 'home', component: HomeComponent},
            {path: 'about', component: AboutComponent},
            {path: 'api', component: ApiComponent},
            {path: 'status', component: StatusComponent},
            {path: 'support', component: SupportComponent},
            {path: 'customers', component: CustomersComponent},
            {path: 'jobs', component: JobsComponent},
            {path: 'tos', component: TosComponent},
            {path: 'signup', component: SignupComponent, canActivate: [AuthGuard]},
            {path: 'logout', component: LogoutComponent, canActivate: [AuthGuard]},
            {path: 'login', component: LoginComponent},
            {path: 'error', component: ErrorComponent, canActivate: [ErrorService]},
            {path: "404", component: NotFoundComponent},
            {path: '', redirectTo: '/home', pathMatch: 'full'},
        ]
    },
    {path: "admin", loadChildren: "./admin/admin.module#AdminModule"},
    {path: '**', redirectTo: '/404'}
];

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

products.module.ts[我试图加载子例程的主产品模块]

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        SharedModule,
        RouterModule,
        ProductsRoutingModule
    ],
    declarations: [ProductsComponent, OverviewComponent, IntroComponent, NavigationComponent, ProductComponent],
    exports: [
        ProductsComponent, OverviewComponent, IntroComponent, NavigationComponent, ProductComponent, RouterModule, ProductsRoutingModule
    ]
})
export class ProductsModule {
}

产品路由.module.ts[产品路由器子模块]

export const productRoutes: Routes = [
    {
        path: '',
        component: ProductsComponent,
        children: [
            {
                path: 'overview',
                component: OverviewComponent,
            },
            {
                path: 'intro',
                component: IntroComponent
            },
            {
                path: 'product/:product',
                component: ProductComponent
            },
            {
                path: '',
                redirectTo: '/products/intro',
                pathMatch: 'full'
            },
            {
                path: '**',
                redirectTo: '/404',
                pathMatch: 'full'
            }
        ]
    }
];

@NgModule({
    imports: [RouterModule.forChild(productRoutes)],
    exports: [RouterModule]
})
export class ProductsRoutingModule {}

products.component.html[产品模板，含产品中子组件的出口]

<h1>Products</h1>
<br/>
<app-product-navigation></app-product-navigation>
<br/>
<router-outlet></router-outlet>

这是我在stackoverflow上的第一篇“寻找帮助”帖子，所以如果有什么我可以改进的，请告诉我

我试图研究各种形式和教程，并参考了

编辑：添加一些图片以进一步澄清情况

主页：

产品[/Products/intro]（导航到使用routerLink）：（缺少产品导航栏） 刷新时，导航栏变为可见，但简介组件消失：

但是，当我单击产品导航中的另一个组件时，它工作正常：

如果刷新，组件将消失，导航将保留： 现在，不管出于什么原因，如果我回到简介，它工作正常：

---

因此，基本上，无论页面最初加载时加载了什么路由，它都有一个问题[组件不可见]。如果最初装载的路线不是/产品；产品导航栏不可见。

对于这种相当奇怪的情况，我能够通过使用Angular cli生成一个新的Angular 4应用程序来修复这种奇怪的行为：ng new

我猜这和我当时运行的Angular版本有关

对于我的新项目，@angular版本设置为**^4.0.0*

在旧项目中，版本设置为4.3.1

我猜这与v4.3.1的错误修复中的一个变化有关：

• 路由器：canDeactivate防护装置应自下而上（1ac78bf）， 截止日期：15657
• 路由器：配置时应导航到同一url 更改（4340bea），关闭#15535
• 路由器：应为路由器运行解析程序 同一路线（ec89f37）同时关闭#14279
• 路由器：终端 自定义匹配器中的路由（5d275e9）

TL；DR

---

使用最新稳定版本的ng4

并没有完成所有这一切，但仅在刷新后渲染通常是一个异步问题。我想这可能会有帮助。可观察到的和http调用以及依赖于它们的可能原因。@Z.Bagley产品模块中的任何组件中都没有可观察到的或异步/http调用。事实上，组件的.ts文件都是angular cli生成的默认存根。我用图片更新了帖子。你有任何控制台错误吗？@Everest一点也没有，正如我在帖子顶部所说。你可以做的一件事是在你的

路由器中添加
.catch
。浏览
电话，看看路线是否真的在改变。它也可能与您的AuthGuard有关
<h1>Products</h1>
<br/>
<app-product-navigation></app-product-navigation>
<br/>
<router-outlet></router-outlet>

<nav class="navbar navbar-info" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#products-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="products-navbar-collapse">
      <ul class="nav navbar-nav">
        <li routerLinkActive="active"><a routerLink="/products/intro">Intro</a></li>
        <li routerLinkActive="active"><a routerLink="/products/overview">Overview</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products <b class="caret"></b></a>
          <ul class="dropdown-menu">
            <li routerLinkActive="active"><a routerLink="/products/product/reflex">Reflex</a></li>
            <li routerLinkActive="active"><a routerLink="/products/product/override">Project Override</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</nav>
<br/>

  "dependencies": {
    "@agm/core": "1.0.0-beta.0",
    "@angular/animations": "4.3.1",
    "@angular/cdk": "2.0.0-beta.10",
    "@angular/common": "4.3.1",
    "@angular/compiler": "4.3.1",
    "@angular/core": "4.3.1",
    "@angular/forms": "4.3.1",
    "@angular/http": "4.3.1",
    "@angular/material": "2.0.0-beta.10",
    "@angular/platform-browser": "4.3.1",
    "@angular/platform-browser-dynamic": "4.3.1",
    "@angular/platform-server": "4.3.1",
    "@angular/router": "4.3.1",
    "angular2-material-datepicker": "0.5.0",
    "animate.css": "3.5.2",
    "arrive": "2.3.1",
    "bootstrap": "3.3.5",
    "bootstrap-material-design": "0.5.10",
    "bootstrap-notify": "3.1.3",
    "bootstrap-select": "1.12.2",
    "bootstrap-tagsinput": "0.7.1",
    "chartist": "0.9.4",
    "chartist-plugin-zoom": "0.4.0",
    "core-js": "2.4.1",
    "datatables": "1.10.12",
    "datatables.net-bs": "1.10.12",
    "datatables.net-responsive": "2.1.1",
    "eonasdan-bootstrap-datetimepicker": "4.17.47",
    "fullcalendar": "3.4.0",
    "googleapis": "19.0.0",
    "jasny-bootstrap": "3.1.3",
    "jquery": "1.12.4",
    "moment": "2.18.1",
    "moment-timezone": "0.4.0",
    "ng2-nouislider": "1.6.1",
    "ng2-select": "1.2.0",
    "ngx-chips": "1.4.6",
    "nouislider": "9.2.0",
    "rxjs": "^5.4.2",
    "twitter-bootstrap-wizard": "1.2.0",
    "typescript": "2.3.4",
    "validate": "3.0.1",
    "web-animations-js": "2.2.2",
    "zone.js": "0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.4.2",
    "@angular/compiler-cli": "4.3.1",
    "@types/bootstrap": "3.3.32",
    "@types/chartist": "0.9.34",
    "@types/jasmine": "2.5.38",
    "@types/jquery": "1.10.31",
    "@types/node": "6.0.73",
    "codelyzer": "2.0.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "3.2.0",
    "karma": "1.4.1",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-coverage-istanbul-reporter": "0.2.0",
    "karma-jasmine": "1.1.0",
    "karma-jasmine-html-reporter": "0.2.2",
    "node-sass": "^4.5.3",
    "protractor": "5.1.0",
    "ts-node": "2.0.0",
    "tslint": "4.5.0",
    "typescript": "2.3.4"
  }
}