在 Angular 8 中延迟加载共享组件

Question

我就是找不到这个问题的答案。我正在做一个带有导航栏的简单主页，但我将导航栏添加为共享组件，因此我可以在其他组件中重用它。

问题是，当我尝试使用导航栏转到延迟加载的新路线时，导航栏就是无法加载路线。

这是我的代码：

吴--版本：

Angular CLI: 8.2.2
Node: 10.13.0
OS: win32 x64
Angular: 8.2.8
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.802.2
@angular-devkit/build-angular     0.802.2
@angular-devkit/build-optimizer   0.802.2
@angular-devkit/build-webpack     0.802.2
@angular-devkit/core              8.2.2
@angular-devkit/schematics        8.2.2
@angular/cli                      8.2.2
@ngtools/webpack                  8.2.2
@schematics/angular               8.2.2
@schematics/update                0.802.2
rxjs                              6.4.0
typescript                        3.5.3
webpack                           4.38.0

app.html:

<router-outlet></router-outlet>

app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'dashboard-syngenta';
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用-routing.module.ts

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


const routes: Routes = [
  { path: '', loadChildren: './login/login.module#LoginModule'}
];

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

login.component.html

<div class="loginContainer">


            <div class="row">
                <div class="col-12 text-center">
                    <button class="btn btn-submit" type="button" routerLink="home">Ingresar</button>
                </div>
            </div>

</div>

login.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

login.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LoginComponent } from './login.component';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'home', loadChildren: '../home/home.module#HomeModule' }
];

@NgModule({
  declarations: [LoginComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ]
})
export class LoginModule { }

首页HTML：

<div class="homeContainer">
    <!-- Sidebar  -->
    <div class="navbar">
        <app-navbar></app-navbar>

    </div>

    <!-- Page Content  -->
    <div id="content">

        <router-outlet></router-outlet>

    </div>

</div>

HomeComponent.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {


  constructor() { }

  ngOnInit() {
  }

}

HomeModule.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';
import { Routes, RouterModule } from '@angular/router';
import { SharedModule } from '../shared/shared.module';

const routes: Routes = [
  { path: '', component: HomeComponent }
];

@NgModule({
  declarations: [HomeComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    SharedModule
  ]
})
export class HomeModule { }

navbar.component.html

<div class="wrapper">
    <!-- Sidebar  -->
    <nav id="sidebar" [ngClass]="{'active': toggleActive}">
        <div class="sidebar-header">
            <h3>Syngenta Admin</h3>
            <strong>SA</strong>
        </div>

        <ul class="list-unstyled components">
            <li routerLink="home" routerLinkActive="active">
                <a href="#homeSubmenu">
                    <i class="fa fa-home"></i>
                    Home
                </a>
            </li>
            <li routerLink="usuarios" routerLinkActive="active">
                <a href="#">
                    <i class="fa fa-user" aria-hidden="true"></i>
                    Usuarios
                </a>
            </li>
            <li routerLink="productos" routerLinkActive="active">
                <a href="#pageSubmenu">
                    <i class="fa fa-truck"></i>
                    Productos
                </a>
            </li>

        </ul>

    </nav>
</div>

navbar.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  toggleActive = true;

  constructor() { }

  ngOnInit() {
  }

  activeSidebar() {
    this.toggleActive = !this.toggleActive;
  }

}

shared.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from './navbar/navbar.component';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'home', loadChildren: '../home/home.module#HomeModule' }
];

@NgModule({
  declarations: [NavbarComponent],
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  exports: [NavbarComponent]
})
export class SharedModule { }

然后在我单击导航栏内的 routeLink 后，路由显示为 /#homeSubmenu。

然后：

我不确定我是否正确地实现了延迟加载。我真的很感激任何建议。

Answer 1

你不应该在你的共享模块中延迟加载。您需要在 AppRoutingModule:

中移动所有惰性路由声明

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


const routes: Routes = [
  { path: '', loadChildren: './login/login.module#LoginModule'},
  { path: 'home', loadChildren: '../home/home.module#HomeModule' },
  etc...
];

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

Answer 2

您的延迟加载架构不正确，我建议您不要为您的边栏使用共享模块，而是将其放在您的主页组件中并将其原始路由更改为默认路由。所以它是你的全局父组件。然后使用延迟加载的子组件。

要使用您的登录模块，请使用守卫将其重定向到主页延迟加载路由。

编辑 1：顺便说一句，你的锚点有问题，你的每个链接中都有一个 href

 <li routerLink="home" routerLinkActive="active">
    <!-- Here is your error for the submenu -->
   <a href="#homeSubmenu">
     <i class="fa fa-home"></i>
        Home
    </a>
 </li>

检查一下。

在 Angular 8 中延迟加载共享组件

Lazy Loading with shared component in Angular 8

html

typescript

angular-routing

angular