Angular2 中的 TypeScript 和 Firebase 应用程序未编译

Question

更新：

我已经修复了在启动时导致应用程序崩溃的模糊错误。这与未编译的 TypeScript 无关。 In the main.ts file in the Git repo我只需要换行：

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

---

我有一个使用 Firebase (AngularFire2) 作为身份验证和数据库的 Angular 应用。

当我只使用 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 文件as per this question 中引用的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 目录中的 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 repo for you to examine here的一个分支。

希望有人熟悉这个问题并可以提供帮助！

Answer 1

所以，根据更新，模糊的错误得到了解决。

我还有一个error TS2300: Duplicate identifier 问题。

我卸载了 Firebase 全局类型，所以我的 typings.jsonfile 看起来像：

{
  "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 以引用 AngularFire2 中的 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'; 添加到我想使用它的组件中[根据此记录的问题]，重要的是，将它添加到angularfire2.d.ts 文件的顶部。 1.

完整的fixed code can be found in this Git branch。