角延迟加载不导航

时间:2018-11-25 09:56:59

标签: angular lazy-loading

我想在我的应用程序中实现Angular延迟加载。

我读了很多书,看来这是正常的作法,也许我错过了一些重要的事情,已经两天了。

https://github.com/kondasMajid/angula-lazy-loading

App-routing-Module.ts

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

const routes: Routes = [
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  },

  {
    path: 'home',
    loadChildren: './home/home.module#HomeModule'
  },
  {
    path: 'view',
    loadChildren: 'app/view/view.module#ViewModule'
  }
];

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

app.component.html

<button routerLink="/view">view</button>

<router-outlet></router-outlet>

view.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ViewRoutingModule } from './view-routing.module';
import { RouterModule, Routes } from '@angular/router';
import { ViewComponent } from './view.component';

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

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

view.component.ts

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

@Component({
  selector: 'view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.css']
}) 
export class ViewComponent implements OnInit {
  constructor() {}

  ngOnInit() {}
}

2 个答案:

答案 0 :(得分:1)

您当前的实现似乎有很多问题:

  1. 您在AppRoutingModule中使用的是forChild而不是forRoot
  2. 在您的ViewModule中,您在做什么,我不知道。理想情况下,Routes应该在ViewRoutingModule中定义,然后RouterModule应该从那里导出并导入到ViewModule中。
  3. AppRoutingModule的''配置中的空路由(Routes)可能最终成为无限循环。因此,在这种情况下,您可能想重定向到其他地方。

解决这两个问题应使其起作用:

AppRoutingModule

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

const routes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },

  {
    path: 'home',
    loadChildren: './home/home.module#HomeModule'
  },
  {
    path: 'view',
    loadChildren: 'app/view/view.module#ViewModule'
  }
];

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

ViewRoutingModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { RouterModule, Routes } from '@angular/router';
import { ViewComponent } from './view/view.component';

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

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

ViewModule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { ViewRoutingModule } from './view-routing.module';
import { RouterModule, Routes } from '@angular/router';
import { ViewComponent } from './view/view.component';

@NgModule({
  declarations: [ViewComponent],
  imports: [
    CommonModule,
    ViewRoutingModule
  ]
})
export class ViewModule { }

这是您推荐的Sample StackBlitz

答案 1 :(得分:1)

您的app.routing.ts应该是这样,这将是第一个更改

imports[RouterModule.forRoot(routes)],

第二个变化是,当您的路线为空时,您需要redirectTo纠正路径

尝试这样的事情

{
    path: '',
    redirectTo: '/view',
    pathMatch: 'full'
}

希望这些更改会起作用-编码愉快:)

更新

我认为您错过了这里的主要遗漏-我看不到您的AppRoutingModule内已导入AppModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule //This will do the trick
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

尝试上述更改并将您的路由导入模块中-希望它能起作用