angularfirebaseangularfire2angular-seed

Unable to load transpiler to transpile AngularFire2


Traceur 404 (Not Found) Unable to load transpiler to transpile angularfire2.js http://localhost:3000/node_modules/angularfire2/angularfire2.js

I have an angular-seed app to which I'm trying to add angularfire2. It does seems I'm missing something in the config or version.

All configs below.

CONSOLE ERROR IMAGE

package.json

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "~2.1.0",
    "@angular/compiler": "~2.1.0",
    "@angular/core": "~2.1.0",
    "@angular/forms": "~2.1.0",
    "@angular/http": "~2.1.0",
    "@angular/platform-browser": "~2.1.0",
    "@angular/platform-browser-dynamic": "~2.1.0",
    "@angular/router": "~3.1.0",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "~2.1.0",
    "angular-in-memory-web-api": "~0.1.5",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.39",
    "zone.js": "^0.6.25",
    "gulp": "~3.9.1",
    "gulp-uglify":"~2.0.0",
    "sw-precache":"~4.1.0",
    "angularfire2":"~2.0.0-beta.5",
    "firebase":"3.4.0",
    "@types/firebase":"~2.4.30",
    "@types/request":"0.0.31"
  },
  "devDependencies": {
    "concurrently": "^3.0.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.3",
    "typings":"^1.4.0"
  }
}

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.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/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
      'firebase' : 'npm:firebase',
      'angularfire2' : 'npm:angularfire2'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      },
      'angularfire2': {
        main: 'angularfire2.js',
        defaultExtension: 'js'
      },
      'firebase': {
        main: 'firebase.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

typings.json

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

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "types": [
      "firebase"
    ] 
  },
    "files":[
      "app/main.ts",
      "node_modules/angularfire2/node_modules/firebase/firebase.d.ts"
    ]
}

Solution

  • Finally figured out after doing a lot of online digging and trying out a variety of settings. Below is the config that finally worked.

    Package.json

    {
      "name": "angular2-quickstart",
      "version": "1.0.0",
      "scripts": {
        "start": "concurrently \"npm run tsc:w\" \"npm run lite\" ",
        "lite": "lite-server",
        "postinstall": "typings install",
        "tsc": "tsc",
        "tsc:w": "tsc -w",
        "typings": "typings"
      },
      "license": "ISC",
      "dependencies": {
        "@angular/common": "~2.1.0",
        "@angular/compiler": "~2.1.0",
        "@angular/core": "~2.1.0",
        "@angular/forms": "~2.1.0",
        "@angular/http": "~2.1.0",
        "@angular/platform-browser": "~2.1.0",
        "@angular/platform-browser-dynamic": "~2.1.0",
        "@angular/router": "~3.1.0",
        "@angular/router-deprecated": "2.0.0-rc.2",
        "@angular/upgrade": "~2.1.0",
        "@types/firebase": "~2.4.30",
        "@types/request": "0.0.31",
        "angular-in-memory-web-api": "~0.1.5",
        "angularfire2": "^2.0.0-beta.5",
        "bootstrap": "^3.3.7",
        "core-js": "^2.4.1",
        "firebase": "3.4.0",
        "gulp": "~3.9.1",
        "gulp-uglify": "~2.0.0",
        "reflect-metadata": "^0.1.8",
        "rxjs": "5.0.0-beta.12",
        "sw-precache": "~4.1.0",
        "systemjs": "0.19.39",
        "zone.js": "^0.6.25",
        "traceur": "^0.0.96"
      },
      "devDependencies": {
        "concurrently": "^3.0.0",
        "lite-server": "^2.2.2",
        "typescript": "^2.0.3",
        "typings": "^1.4.0"
      }
    }

    Systemjs

       /**
     * System configuration for Angular samples
     * Adjust as necessary for your application needs.
     */
    (function (global) {
      System.config({
        paths: {
          // paths serve as alias
          'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
          // our app is within the app folder
          app: 'app',
          // angular bundles
          '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
          '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
          '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.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/http': 'npm:@angular/http/bundles/http.umd.js',
          '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
          '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
          // other libraries
          'rxjs':                      'npm:rxjs',
          'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
          'firebase' : 'npm:firebase',
          'angularfire2' : 'npm:angularfire2',
          'traceur':'npm:traceur/bin'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
          app: {
            main: './main.js',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
          },
          'angular-in-memory-web-api': {
            main: './index.js',
            defaultExtension: 'js'
          },
          angularfire2: {
            main: 'index.js',
            format: 'esm',
            defaultExtension: 'js'
          },
          firebase: {
            main: 'firebase.js',
            defaultExtension: 'js'
          },
          traceur:{
            main: 'traceur'
          }
        }
      });
    })(this);

    typings.json

    {
      "globalDependencies": {
        "core-js": "registry:dt/core-js#0.0.0+20160725163759",
        "firebase": "registry:dt/firebase#2.4.1+20160412125105",
        "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
        "node": "registry:dt/node#6.0.0+20160909174046"
      },
      "dependencies": {
        "index": "file:node_modules/angularfire2/auth/index.d.ts"
      }
    }

    tsconfig.json

    {
      "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "typeRoots": [
          "./node_modules/@types"
        ],
        "types": [
          "firebase",
          "angularfire2"
        ] 
      }
    }

    Additions to package.json

    "@types/firebase": "~2.4.30",
    "@types/request": "0.0.31",
    "angularfire2": "^2.0.0-beta.5",
    "firebase": "3.4.0",
    "traceur": "^0.0.96"

    Additions to systemjs 'firebase' : 'npm:firebase',

      'angularfire2' : 'npm:angularfire2',
      'traceur':'npm:traceur/bin'
    
    
      angularfire2: {
        main: 'index.js',
        format: 'esm',
        defaultExtension: 'js'
      },
      firebase: {
        main: 'firebase.js',
        defaultExtension: 'js'
      },
      traceur:{
        main: 'traceur'
      }
    

    additions to tsconfig.json

    "typeRoots": [
          "./node_modules/@types"
        ],
        "types": [
          "firebase",
          "angularfire2"
        ] 

    additions to typings.json

    "firebase": "registry:dt/firebase#2.4.1+20160412125105",
    
    "dependencies": {
        "index": "file:node_modules/angularfire2/auth/index.d.ts"
      }