Angular 2 Lazy Loading:RangeError:超出最大调用堆栈大小
发布时间:2020-12-17 17:28:31 所属栏目:安全 来源:网络整理
导读:我是Angular 2的新手,正在尝试延迟加载.我收到错误“RangeError:超出最大调用堆栈大
我是Angular 2的新手,正在尝试延迟加载.我收到错误“RangeError:超出最大调用堆栈大小”
我尝试了很多其他类似的问题,但对我没什么用.以下是我的代码供您参考.让我知道这个问题. // App Module import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { HttpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { ROUTER_CONFIG } from './app.routing'; @NgModule({ declarations: [ AppComponent ],imports: [ BrowserModule,FormsModule,HttpModule,ROUTER_CONFIG ],providers: [],bootstrap: [AppComponent] }) export class AppModule { } // App Routing import { RouterModule,Routes } from '@angular/router'; import { AppComponent } from './app.component'; const ROUTER_DATA: Routes = [ { path:'home',component: AppComponent },{ path:'lazy',loadChildren: './lazy/lazy.module#LazyModule' },{ path:'',redirectTo:'home',pathMatch: 'full'} ]; export const ROUTER_CONFIG = RouterModule.forRoot(ROUTER_DATA); //App Component import { Component } from '@angular/core'; @Component({ selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'app works!'; } // Lazy module import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { LazyComponent } from './lazy.component'; import { ROUTER_CONFIG } from './lazy.routing'; @NgModule({ declarations: [ LazyComponent ],imports: [ CommonModule ],bootstrap: [LazyComponent] }) export class LazyModule { } // lazy Routing import { RouterModule,Routes } from '@angular/router'; import { LazyComponent } from './lazy.component'; const ROUTER_DATA: Routes = [ { path:'',component: LazyComponent } ]; export const ROUTER_CONFIG = RouterModule.forRoot(ROUTER_DATA); // lazy component import { Component,OnInit } from '@angular/core'; @Component({ selector: 'app-lazy',templateUrl: './lazy.component.html',styleUrls: ['./lazy.component.css'] }) export class LazyComponent implements OnInit { constructor() { } ngOnInit() { } } <!-- App HTML --> <div [routerLink]="['/home']">Home</div> <div [routerLink]="['/lazy']">Lazy</div> <router-outlet></router-outlet> <!-- lazy html --> <p> lazy works! </p> 解决方法
您忘记配置子路由
lazy.routing.ts export const ROUTER_CONFIG = RouterModule.forRoot(ROUTER_DATA); export const ROUTER_CONFIG = RouterModule.forChild(ROUTER_DATA); lazy.module.ts import { ROUTER_CONFIG } from './lazy.routing'; ... imports: [ ROUTER_CONFIG ] }) export class LazyModule { } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
推荐文章
站长推荐
热点阅读