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

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

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

一切正常，而我只是使用 AngularFire2 库，但我需要使用 Firebase 的 ServerValue.TIMESTAMP，根据我的阅读，它需要导入 Firebase 以及 Angular火2.

来自 Web 上的各种来源，包括 SO 上的答案我相信我现在正在正确地将 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 目录中的 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.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 以在 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.

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

TypeScript in Angular2 and Firebase App Not Compiling

angularjs

firebase

typescript

angularfire2

更新：