Angular2中的TypeScript和Firebase應用程序未編譯

Question

更新：

我修復了啟動時崩潰應用程序的模糊錯誤。 這與TypeScript不編譯無關。 在Git repo的main.ts文件中，我只需更改該行：

platformBrowserDynamic().platform.bootstrapModule(AppModule);

至：

platformBrowserDynamic().bootstrapModule(AppModule);

現在，當應用程序啟動時，它可以運行而沒有任何錯誤。

但是，TypeScript仍然無法編譯 - 我收到以下錯誤：

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='.

我的tsconfig.json文件如下所示：

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

---

我有一個Angular應用程序，它使用Firebase（AngularFire2）作為auth和數據庫。

我剛剛使用AngularFire2庫時一切正常但我需要使用Firebase的ServerValue.TIMESTAMP ，根據我的閱讀，我需要導入Firebase以及AngularFire2。

來自網絡上的各種來源，包括答案，我們相信我現在正在將Firebase正確導入我的應用程序。

這需要將"files": [ "typings/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" ],
    "listFiles": true
  },
  "include": [ "../app/**/*.ts" ],
  "exclude": [ "../node_modules" ],
  "files": [ "typings/index.d.ts" ]
}

並根據此問題在我的systems.config.js文件中引用Firebase。

這解決了TypeScript編譯器抱怨的很多重復錯誤，但......

該應用程序現在崩潰，只是模糊的錯誤：

[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)

我還認為app dir中的我的TypeScript文件沒有編譯。 當我記錄哪些文件編譯時，我在終端中得到以下內容：

[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

我已經設置了我的Git倉庫的一個分支供您在這里查看 。

希望有人熟悉這個問題，可以提供幫助！

Answer 1

因此，根據更新，模糊錯誤得以解決。

我仍然有error TS2300: Duplicate identifier問題。

我卸載了Firebase全局類型，因此我的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"
  }
}

我調整了我的systemjs.config.js來引用systemjs.config.js中的Firebase，如：

(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);

請注意map的Firebase參考。

然后我import * as firebase from 'firebase';添加了import * as firebase from 'firebase'; 到我想要使用它的組件[根據此記錄的問題]並且重要的是將它添加到angularfire2.d.ts文件的頂部。 1 。

完整的固定代碼可以在這個Git分支中找到 。