角2 - 错误：（SystemJS）最大调用堆栈大小超过了（...）

Question

我有一个小问题：

错误：（SystemJS）最大调用堆栈大小超过了（...）

我有一个分量在这里我导入另一个模块： 这里是videos.module.ts：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { VideosComponent } from './videos.component'; 
import { EditorModule, SharedModule, ButtonModule } from 'primeng/primeng'; 
import { GalleryModule } from '../../components/gallery/gallery.module'; 


@NgModule({ 
    imports: [CommonModule, SharedModule, EditorModule, SharedModule, ButtonModule, GalleryModule], 
    declarations: [VideosComponent], 
    exports: [VideosComponent], 
    providers: [] 
}) 
export class VideosModule { } 

正如你可以看到我导入库模块。如果我删除这个，那么错误就会消失。 让我们继续下去兔子洞。

这里是画廊gallery.module.ts：

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 

import { ViewerComponent } from '../viewer/viewer.component'; 
import { GalleryComponent } from './gallery.component'; 

@NgModule({ 
    imports: [BrowserModule, FormsModule, HttpModule], 
    declarations: [GalleryComponent, ViewerComponent], 
    exports: [GalleryModule], 
    providers: [] 
}) 
export class GalleryModule { } 

这里是gallery.component.ts

import {Component, NgZone, ViewChild, ElementRef} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 
import { ViewerComponent } from '../viewer/viewer.component'; 
import 'rxjs/Rx'; 


interface IImage { 
    url: string; 
    thumbnail: string; 
    date: string; 
    width: number; 
    height: number; 
} 


@Component({ 
    selector: 'sd-gallery', 
    templateUrl: 'gallery.component.html', 
    styleUrls: ['gallery.component.css'] 
}) 
export class GalleryComponent { 

    @ViewChild('galleryContainer') galleryContainer: ElementRef; 
    @ViewChild('asyncLoadingContainer') asyncLoadingContainer: ElementRef; 

    thumbnailBasePath = 'assets/img/gallery/preview_xxs/'; 
    currentIdx: number = 0; 
    galleryBasePath: string = 'assets/img/gallery/'; 
    showBig: boolean = false; 
    images: any[] = [{ url: '' }]; 
    gallery: any[] = []; 
    imgIterations = 1; 
    allImagesLoaded = false; 


    // TypeScript public modifiers 
    constructor(private _ngZone: NgZone, private http: Http) { 

    } 


    private ngAfterContentInit() { 
    this.fetchDataAndRender(); 
    } 

    private fetchDataAndRender() { 
    this.http.get(this.galleryBasePath + 'data.json') 
     .map((res: Response) => res.json()) 
     .subscribe(
     data => { 
     this.images = data; 
     this.render(); 
     }, 
     err => console.error(err), 
    () => undefined); 
    } 

    private render() { 
    let tempRow = [this.images[0]]; 
    let rowIndex = 0; 
    let i = 0; 

    for (i; i < this.imgIterations && i < this.images.length; i++) { 
     while (this.images[i + 1] && this.shouldAddCandidate(tempRow, this.images[i + 1])) { 
     i++; 
     } 
     if (this.images[i + 1]) { 
     tempRow.pop(); 
     } 
     this.gallery[rowIndex++] = tempRow; 

     tempRow = [this.images[i + 1]]; 
    } 

    this.scaleGallery(); 

    if (i >= this.images.length) { 
     this.allImagesLoaded = true; 
    } else { 
     this.checkForAsyncReload(); 
    } 
    } 

    private shouldAddCandidate(imgRow: IImage[], candidate: IImage): boolean { 
    let oldDifference = this.calcIdealHeight() - this.calcRowHeight(imgRow); 
    imgRow.push(candidate); 
    let newDifference = this.calcIdealHeight() - this.calcRowHeight(imgRow); 

    return Math.abs(oldDifference) > Math.abs(newDifference); 
    } 

    private calcRowHeight(imgRow: IImage[]) { 
    let xsum = this.calcOriginalRowWidth(imgRow); 

    let ratio = this.getGalleryWidth()/xsum; 
    let rowHeight = imgRow[0].height * ratio; 

    return rowHeight; 
    } 

    private scaleGallery() { 
    this.gallery.forEach((imgRow) => { 
     let xsum = this.calcOriginalRowWidth(imgRow); 

     if (imgRow !== this.gallery[this.gallery.length - 1]) { 
     let ratio = this.getGalleryWidth()/xsum; 

     imgRow.forEach((img: any) => { 
      img.width = img.width * ratio; 
      img.height = img.height * ratio; 
     }) 
     } 
    }) 
    } 

    private calcOriginalRowWidth(imgRow: IImage[]) { 
    let xsum = 0; 
    imgRow.forEach((img) => { 
     let individualRatio = this.calcIdealHeight()/img.height; 
     img.width = img.width * individualRatio; 
     img.height = this.calcIdealHeight(); 
     xsum += img.width + 1; 
    }); 

    return xsum; 
    } 

    private calcIdealHeight() { 
     return (this.getGalleryWidth()/8) + 70; 
    } 

    private openImageViewer(img: any) { 
    this.showBig = undefined; 
    this.showBig = true; 
    this.currentIdx = this.images.indexOf(img); 
    } 

    private getGalleryWidth() { 
    if (this.galleryContainer.nativeElement.clientWidth === 0) { 
     // IE11 
     return this.galleryContainer.nativeElement.scrollWidth; 
    } 
    return this.galleryContainer.nativeElement.clientWidth; 
    } 

    private checkForAsyncReload() { 
    if (!this.allImagesLoaded) { 
     var loadingDiv: any = this.asyncLoadingContainer.nativeElement; 

     var elmTop = loadingDiv.getBoundingClientRect().top; 
     var elmBottom = loadingDiv.getBoundingClientRect().bottom; 

     var isVisible = (elmTop >= 0) && (elmBottom <= window.innerHeight); 

     if (isVisible) { 
     this.imgIterations += 5; 
     this.fetchDataAndRender(); 
     } 
    } 
    } 

    private onClose() { 
    this.showBig = false; 
    } 

    private onResize() { 
    this.render(); 
    } 


} 

我不会观察部包括因为即使我将其删除从画廊的HTML /模块我仍然得到同样的问题。

谢谢大家！

• 以下是完整的例外的图像： https://postimg.org/image/fmf7qzksn/

Answer 1

我看到你GalleryModule，其中一人可能是造成你所得到的错误了两个错误。

首先

BrowserModule只应根模块中导入。 （通常这是AppModule）您应该导入CommonModule，因为这可能是您在GalleryModule中需要的全部内容。 （CommonModule包含像*ngIf和*ngFor共同指令）

二

删除GalleryModule从出口：

exports: [GalleryModule] 

为什么你会从GalleryModule本身出口GalleryModule？这条线已经在做所有的工作：

export class GalleryModule { } 

如果让我下注，我会说这是什么造成的错误。

Answer 2

当我得到这个错误时，它是由我的网页上包含prototype.js库引起的。我删除原型后，我的Angular 2应用程序加载成功。