2017-02-20 11 views
1

게으른로드 모듈이 필요한 앱을 만들고 있습니다. 모든 것이 dev 모드에서 잘 작동합니다. Prod dist를 준비 할 때 게으른로드 된 모듈에 문제가 있습니다. 자극에mgechev angular2-seed를 사용할 때 게으른로드 된 모듈이 prod 모드에서 작동하지 않습니다.

배포 : https://github.com/mgechev/angular-seed :이 각 시드를 사용하려고 해요

  1. .
  2. 파일 seed.config.ts에서 APP_BASE를 변경하십시오. APP_BASE = argv [ 'base'] || '/ 앵귤러 씨앗 - 마스터';
  3. 빌드 명령을 실행 NPM build.prod.aot (build.prod와 비슷한 문제)
  4. 복사 파일은 아파치 - 톰캣-8.5.4합니다 \ 웹 어플리케이션 각도 씨앗 마스터 \

앱 \ 좋은 시작,하지만 난 게으른로드 모듈을 열 때 나는 오류를 다음 얻을 :

__zone_symbol__error 
: 
Error: Uncaught (in promise): TypeError: System.import is not a function TypeError: System.import is not a function at t.loadFactory (http://127.0.0.1:8080/angular-seed-master/js/app.js?1487588806074:15:566) at t.load (http://127.0.0.1:8080/angular-seed-master/js/app.js?1487588806074:15:151) at t.loadModuleFactory (http://127.0.0.1:8080/angular-seed-master/js/app.js?1487588806074:14:8371) at t.load (http://127.0.0.1:8080/angular-seed-master/js/app.js?1487588806074:14:8103) at e.project (http://127.0.0.1:8080/angular-seed-master/js/app.js?1487588806074:12:21324) 

난 그냥 게으른로드 모듈에 씨앗에서 about.module를 변환하여이 문제를 재현 할 수 있었다.

앱 routing.module.ts에 대한-routing.module.ts (변경 경로

@NgModule({ 
    imports: [ 
    RouterModule.forRoot([ 
     { path: 'about', loadChildren: 'app/about/about.module#AboutModule' }, 
     /* define app module routes here, e.g., to lazily load a module 
     (do not place feature module routes here, use an own -routing.module.ts in the feature instead) 
     */ 
    ]) 
    ], 
    exports: [RouterModule] 
}) 
export class AppRoutingModule { } 

(게으른 부하 경로를 추가) : about.module 아래에 나열된 변경을 수행 한 후 dev에 모드에서로드 게으른 에서 '약'에서 ''지금 루트 라우터를 기준으로하기 때문에)

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { AboutComponent } from './about.component'; 

@NgModule({ 
    imports: [ 
    RouterModule.forChild([ 
     { path: '', component: AboutComponent } 
    ]) 
    ], 
    exports: [RouterModule] 
}) 
export class AboutRoutingModule { } 

app.module.ts (AboutModule의 수입을 제거)

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { APP_BASE_HREF } from '@angular/common'; 
import { HttpModule } from '@angular/http'; 
import { AppComponent } from './app.component'; 
import { AppRoutingModule } from './app-routing.module'; 

import { HomeModule } from './home/home.module'; 
import { SharedModule } from './shared/shared.module'; 

@NgModule({ 
    imports: [BrowserModule, HttpModule, AppRoutingModule, HomeModule, SharedModule.forRoot()], 
    declarations: [AppComponent], 
    providers: [{ 
    provide: APP_BASE_HREF, 
    useValue: '<%= APP_BASE %>' 
    }], 
    bootstrap: [AppComponent] 

}) 
export class AppModule { } 
,

지연로드를 작동시키기 위해 시드에 수행해야 할 변경 사항은 무엇입니까?

답변

0

앵귤러 시드 프로덕션 빌드는 이제 응용 프로그램을 commonjs 모듈로 묶습니다. 현재 프로덕션 빌드는 지연로드를 지원하지 않지만 로드맵에 있다고합니다.

당신은 여기에 관련된 게시물을 볼 수

https://github.com/mgechev/angular-seed/issues/864#issue-154456682 나는 내 응용 프로그램과 같은 문제가 발생했습니다. 실제로 그것은 유감스러운 일이며 곧이 지원을 추가하기를 바랍니다.

+0

"게으른"브랜치를 사용해도 여전히 작동하지 않으므로 webpack 씨드를 사용해야합니다. https://github.com/AngularClass/angular2-webpack-starter – mrh

+0

웹팩 시드를 다운로드했는데 좋았습니다. . 이전 응용 프로그램을 아직 포팅 할 기회가 없었습니다. –