Question

我是角度2的新手，所以请耐心等待！

我试图将Angular2和Firebase放在一起，以便拥有一个实时应用来更新页面上的信息。通过查看Firebase github for Angular2，他们会说注入Firebase并为整个应用定义基础url，如下所示：

import {FIREBASE_PROVIDERS, defaultFirebase} from 'angularfire2';

bootstrap(App, [
  FIREBASE_PROVIDERS,
  defaultFirebase('https://my.firebaseio.com')
]);

问题是，我也使用bootstrap上定义的AngularRouter。当我尝试启动这样的应用程序时：

import {ROUTER_PROVIDERS} from 'angular2/router'
import {FIREBASE_PROVIDERS, defaultFirebase} from 'angularfire2'

bootstrap(AppComponent, [ROUTER_PROVIDERS,
    FIREBASE_PROVIDERS,
    defaultFirebase('https://my.firebaseio.com') //In my code I'm using my own url
]);

我收到此错误：

angular2-polyfills.js：1243 SyntaxError：意外的令牌＆lt;（...）

我的结构是这样的：

app.component.ts
boot.ts
--home/home.component.ts
--user/user.component.ts
--post/post.component.ts

firebase将在用户上使用并发布component（至少在此测试中）。

我知道，基于Angular doc我们应该在根级别上避免这种类型的声明，因为它将创建每个独立的实例。但在这种情况下，是否有必要在此声明它？

发生了什么，我该如何解决这个问题？

编辑：

根据要求，这是我的html文件：

<head>
    <base href="/">
    <title>Angular 2 Firebase</title>

    <link rel="stylesheet" href="assets/stylesheets/bootstrap.min.css" />

    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="node_modules/angular2/bundles/router.dev.js"></script>
    <script src="node_modules/angular2/bundles/http.dev.js"></script>

    <script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script>

    <script>
        System.config({
            packages: {        
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
           }
        });
        System.import('app/boot').then(null, console.error.bind(console));
    </script>

</head>

<body>
    <my-app>Loading...</my-app>
</body>

注意：只有在firebase中插入默认boot.ts的代码时，才会显示错误。在我这样做之前，应用程序工作正常！

Answer 1

您需要在SystemJS配置中将 angularfire2 包含在HTML文件中：

System.config({
  map: {
    firebase: '/node_modules/firebase/lib/firebase-web.js',
    angularfire2: ' node_modules/angularfire2'
  },
  packages: {      
    angularfire2: {
      main: 'angularfire2.js',
      defaultExtension: 'js'
    },app: {
      format: 'register',
      defaultExtension: 'js'
    }
  },
});

能够从此库中注入元素。

您还需要在HTML页面的script中删除Firebase的head元素：

<!-- script src="https://cdn.firebase.com/js/client/2.4.1/firebase.js"></script -->

需要使用npm install firebase安装库，并从SytemJS配置中引用。

请参阅以下HTML页面作为参考：

https://github.com/angular/angularfire2/blob/master/test/e2e/firebase_list/index.html

以角度2定义Firebase默认值

编辑：

1 个答案: