Getting EXCEPTION: Cannot read property 'getCookie' of null with angular-stormpath on webpack

Question

I'm trying to get this project: https://github.com/stormpath/stormpath-angular2-express-example running on webpack. The application starts up, but when the first page loads I'm getting this error:

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)

I have a sample repo setup here: https://github.com/djkrite/ng2-stormpath-webpack-example

I've tried to use:

BrowserDomAdapter.makeCurrent();

before the bootstrap call, but that ends up throwing another error about unexpected token import.

Any help would be appreciated.

Answer 1

Good news! I figured out how to make ng2-stormpath-webpack-example work. I think the root cause of the problem is the typescript configuration (tsconfig.json) was in the src directory and webpack expects it in the root directory. Here's the tsconfig.json file that works (remember, I moved it to the root directory):

{
  "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"
    ]
  }
}

I changed the webpack loaders in webpack.config.js to be:

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']
      }
    ]
  }

I also removed the empty resolve extension:

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

Finally, in package.json, I added types for Protractor and upgraded to Webpack 2.x.

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

Here's a pull request with the fix: https://github.com/djkrite/ng2-stormpath-webpack-example/pull/1