Question

Traceur 404（未找到）无法加载transpiler以转换angularfire2.js http://localhost:3000/node_modules/angularfire2/angularfire2.js

我有一个角度种子应用程序，我试图添加angularfire2。我确实在配置或版本中遗漏了一些东西。

以下所有配置。

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

Answer 1

经过大量的在线挖掘和尝试各种设置后终于弄明白了。下面是最终有效的配置。

<强>的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"
    ] 
  }
}

添加到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"

添加到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'
  }

添加到tsconfig.json

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

对typings.json的补充

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

无法加载转换器以转换AngularFire2

1 个答案: