Imports not working in Angular 2 application

Question

When I say imports are not working, I'm referring to a specific type of import: that from @types in the format import * as _ from 'lodash' . However, I can get around this by doing: import _ from 'lodash' . Which i have been doing up until now.

This is well documented in this thread: Importing lodash into angular2 + typescript application , in which many different people have posted whether one import works and the other doesn't. This question is about identifying why that is the case.

Up until now, this hasn't been a problem, but now that I'm trying to use the https://github.com/angular/angularfire2 package, it has become a problem because I now have to edit the node package and replace: import * as firebase from 'firebase'; with import firebase from 'firebase' , otherwise it doesn't know 'firebase' is.

If I log the object returns from the firebase end in ./node_modules/angularfire2/auth/firebase_sdk_auth_backend.js I get:

If I switch it to import firebase from 'firebase' the application loads and the log is:

I have been messing around with my tsconfig.json but to no avail. ie by changing es2015 to ES6 and switching flags on and off. The current (faulty) state of it is (and I'm presuming the issue is in here, though I'm not sure):

  {
    "compilerOptions": {
      "allowSyntheticDefaultImports": true,
      "declaration": true,
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "lib": [
        "dom", "es2015"
      ],
      "module": "es2015",
      "moduleResolution": "node",
      "sourceMap": true,
      "target": "es5"
    },
    "include": ["src/**/*.ts"],
    "exclude": ["node_modules"],
    "compileOnSave": false,
    "atom": {
      "rewriteTsconfig": false
    }
  }

npm -v (4.0.2) <=> tsc -v (Version 2.0.10) <=> ionic -v (2.1.13) If there are any other package versions you need I'll post them in the comments below.

It appears that I need to be able to import * as foo from 'bar' => what do I need to do to make that happen?

NB This is also an ionic 2 app (but I don't think that makes too much difference)

Answer 1

From what I can tell, this is due to your @angular/compiler-cli version. If you bump it to 2.1.1 it permits the import * as firebase from 'firebase' type.