2016-12-13 4 views
0

이 프로젝트를 얻으려고합니다 : https://github.com/stormpath/stormpath-angular2-express-example webpack에서 실행 중입니다. 응용 프로그램이 시작,하지만 첫 번째 페이지가로드 나는이 오류 받고 있어요 때예외 얻기 : 웹팩에서 angle-stormpath와 함께 null의 'getCookie'속성을 읽을 수 없습니다.

TypeError: Cannot read property 'getCookie' of null 
at CookieXSRFStrategy.configureRequest (app.js:51374) 
at XHRBackend.createConnection (app.js:51414) 
at httpRequest (app.js:51752) 
at StormpathHttp.Http.get (app.js:51863) 
at StormpathHttp.get (app.js:78381) 
at Stormpath.getAccount (app.js:49917) 
at new Stormpath (app.js:49906) 
at _View_AppComponent_Host0.createInternal (host.ngfactory.js:20) 
at _View_AppComponent_Host0.AppView.create (app.js:42393) 
at _View_AppComponent_Host0.DebugAppView.create (app.js:42593) 

를 여기 샘플 환매 특약 설정을 가지고 : https://github.com/djkrite/ng2-stormpath-webpack-example

내가 사용하려고했습니다

BrowserDomAdapter.makeCurrent(); 
부트 스트랩 호출 이전에

하지만 예기치 않은 토큰 가져 오기에 대한 다른 오류가 발생합니다.

도움을 주시면 감사하겠습니다.

+0

난 당신의 repo를 복제하고 && NPM의 start'를 설치 NPM'실행하여 문제를 재현하기 위해 노력했다. 이 작업을 수행 할 때 localhost : 4200에서 실행되는 항목은 없지만 localhost : 3000에서 실행되는 것으로 보입니다. localhost : 3000을 열면 콘솔에 다음 오류가 표시됩니다. '오류 : ENOENT : 해당 파일이나 디렉토리가 없습니다.'/Users/mraible/dev/ng2-stormpath-webpack-example/index.html ' at 오류 (기본) ' –

+0

Webpack은 https : // localhost : 4200 (https)에서 실행 중이며 http : // localhost : 3000에서 실행 중입니다. Stormpath 요청은 포트 3000의 고속 서버로 프록시 처리됩니다. https://stormpath.com/blog/angular-2-user-authentication과 같이 작동하지만 "ng serve"대신 webpack을 사용해야합니다. 다음은 스크린 샷입니다. https://drive.google.com/file/d/0B3n94fXDBWwheE1vVmpHbjJQUWM/view?usp=sharing –

+0

아아아, localhost : 4200에서 HTTPS를 놓쳤습니다. 나는 지금 조사 중이다. –

답변

1

좋은 소식! ng2-stormpath-webpack-example 작업을 수행하는 방법을 알아 냈습니다. 문제의 근본 원인은 typescript 구성 (tsconfig.json)이 src 디렉토리에 있었고 webpack이 루트 디렉토리에 있어야한다고 생각합니다.

{ 
    "compilerOptions": { 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": ["es6", "dom"], 
    "mapRoot": "./", 
    "module": "commonjs", 
    "moduleResolution": "node", 
    "outDir": "../dist/out-tsc", 
    "sourceMap": true, 
    "target": "es5", 
    "types": [ 
     "jasmine", 
     "node" 
    ], 
    "exclude": [ 
     "node_modules" 
    ] 
    } 
} 

내가 할 webpack.config.js에 웹팩 로더를 변경 :

module: { 
    loaders: [ 
     { 
     test: /\.ts$/, 
     loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true'], 
     exclude: [/\.(spec|e2e)\.ts$/, /node_modules/] 
     }, 
     /* Embed files. */ 
     { 
     test: /\.(html|css)$/, 
     loader: 'raw-loader', 
     exclude: /\.async\.(html|css)$/ 
     }, 
     /* Async loading. */ 
     { 
     test: /\.async\.(html|css)$/, 
     loaders: ['file?name=[name].[hash].[ext]', 'extract'] 
     } 
    ] 
    } 

가 나는 또한 빈 해결 확장을 제거 여기에 작동 tsconfig.json 파일 (I 루트 디렉토리로 이동, 기억이)입니다 :

resolve: { 
    extensions: ['.js', '.ts'] 
    }, 

마지막으로, package.json에, 나는 각도기에 대한 유형을 추가 웹팩 2.x 또는 3.0로 업그레이드

"devDependencies": { 
    ... 
    "@types/selenium-webdriver": "2.53.33", 
    ... 
    "webpack": "2.2.0-rc.1", 
    "webpack-dev-server": "^1.16.2" 
    } 

다음은 수정과 풀 요청입니다 : https://github.com/djkrite/ng2-stormpath-webpack-example/pull/1