TypeScript in Angular2 and Firebase App Not Compiling

Question

Update:

I have fixed the vague error that crashed the app upon launch. This was not related to the TypeScript not compiling. In the main.ts file in the Git repo I just needed to change the line:

platformBrowserDynamic().platform.bootstrapModule(AppModule);

To:

platformBrowserDynamic().bootstrapModule(AppModule);

Now when the app does launch, it can run without any errors.

However, the TypeScript still does not compile — I get the following errors:

node_modules/firebase/firebase.d.ts(391,3): error TS2300: Duplicate identifier 'export='.
typings/globals/firebase/index.d.ts(323,2): error TS2300: Duplicate identifier 'export='.

My tsconfig.json file looks like:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": [ "../node_modules/@types" ],
    "listFiles": true
  },
  "files": [ "typings/index.d.ts" ],
  "include": [ "app/**/*" ]
}

---

I have an Angular app that uses Firebase (AngularFire2) for it's auth and database.

Everything worked fine while I was just using the AngularFire2 library but I need to use Firebase's ServerValue.TIMESTAMP which from what I've read requires Firebase to be imported as well as AngularFire2.

From various sources on the Web, including answers here on SO I believe I am now importing Firebase into my app properly.

This required adding "files": [ "typings/index.d.ts" ] to my tsconfig.json file eg

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": [ "../node_modules/@types" ],
    "listFiles": true
  },
  "include": [ "../app/**/*.ts" ],
  "exclude": [ "../node_modules" ],
  "files": [ "typings/index.d.ts" ]
}

And a referencing Firebase in my systems.config.js file as per this question .

This fixed a LOT of duplication errors that the TypeScript compiler was complaining about, but...

The app now crashes upon launch with just the vague error:

[Error] Error: 

    eval code
    eval@[native code]
    run@http://localhost:3000/node_modules/zone.js/dist/zone.js:96:49
    http://localhost:3000/node_modules/zone.js/dist/zone.js:462:60
    invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:236:42
    runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:136:57
    drainMicroTaskQueue@http://localhost:3000/node_modules/zone.js/dist/zone.js:368:42
    invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:308:44
    Evaluating http://localhost:3000/app/main.js
    Error loading http://localhost:3000/app/main.js — system.src.js:123:88
    (anonymous function) (localhost:16)
    run (zone.js:96)
    (anonymous function) (zone.js:462)
    invokeTask (zone.js:236)
    runTask (zone.js:136)
    drainMicroTaskQueue (zone.js:368)
    invoke (zone.js:308)

I also think that my TypeScript files in the app dir are not compiling. When I log which files compile I get the following in the Terminal:

[0] /Users/jonathonoates/Sites/my-app/node_modules/typescript/lib/lib.d.ts
[0] /Users/jonathonoates/Sites/my-app/typings/globals/core-js/index.d.ts
[0] /Users/jonathonoates/Sites/my-app/typings/globals/firebase/index.d.ts
[0] /Users/jonathonoates/Sites/my-app/typings/globals/jasmine/index.d.ts
[0] /Users/jonathonoates/Sites/my-app/typings/globals/node/index.d.ts
[0] /Users/jonathonoates/Sites/my-app/typings/index.d.ts

I have set up a branch of my Git repo for you to examine here .

Hopefully someone is familiar with the problem and can help!

Answer 1

So, as per the update the vague error was solved.

I still had a error TS2300: Duplicate identifier issue.

I uninstalled the Firebase global typings so my typings.json file looks like:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160725163759",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#6.0.0+20160909174046"
  }
}

I adjusted my systemjs.config.js to reference the Firebase within AngularFire2 like:

(function (global) {
  System.config({
    map: {
      app: 'app',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
      angularfire2: 'npm:angularfire2',
      firebase: 'npm:angularfire2/node_modules/firebase',
      rxjs: 'npm:rxjs'
    },
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      },
      angularfire2: {
        main: './bundles/angularFire2.umd.js',
        defaultExtension: 'js'
      },
      firebase: {
        main: './firebase.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    },
    paths: { 'npm:': './node_modules/' }
  });
})(this);

Pay attention to the Firebase reference in the map .

Then I added import * as firebase from 'firebase'; to the component where I wanted to use it [as per this logged issue] AND importantly added it to the top of the angularfire2.d.ts file. 1 .

The complete fixed code can be found in this Git branch .