本地主机:3000/traceur SystemJS 与 AngularFire [英] localhost:3000/traceur SystemJS with AngularFire

查看:29
本文介绍了本地主机:3000/traceur SystemJS 与 AngularFire的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我选择了

有什么提示吗?

解决方案

你的配置将 angularfire2 映射到 node_modules/angularfire2/index.js,写的是 es6,所以 SystemJS 尝试使用traceur,找不到.

简单的解决方法是对其进行配置,使其在 angular2/bundles/angularFire2.umd.js 中加载包,而不是 index.js.

所以 angularfire2packages

 angularfire2: {主要:'index.js'

需要改成

 angularfire2: {主要:'bundles/angularFire2.umd.js'

此外,angularFire 依赖于 Firebase,因此,正如@Jonathon Oates 在他的回答中所说,您也需要为 Firebase 提供配置.

I picked the getting started with Angular2 tutorial format and only added in the angularfire2 part.

I installed firebase and angularfire2 using the steps on the angularfire2 docs page

Below is my systemjs.config.js

/**
 * System configuration for Angular 2 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',
      'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
      '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'
      },
      'angular2-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      },
      angularfire2: {
        main: 'index.js',
        defautExtension: 'js'
      }
    }
  });
})(this);

Then I am simply importing it like so:

import { AngularFireModule } from 'angularfire2';

Then I keep getting this error:

Any hint what is going on?

解决方案

Your config maps angularfire2 to node_modules/angularfire2/index.js, which is written is es6, so SystemJS tries to compile it using traceur, and can not find it.

The easy fix would be to configure it so it loads the bundle in angular2/bundles/angularFire2.umd.js, not index.js.

So angularfire2 in packages

  angularfire2: {
    main: 'index.js'

needs to be changed to

  angularfire2: {
    main: 'bundles/angularFire2.umd.js'

Also, angularFire depends on Firebase, so, as @Jonathon Oates said in his answer, you need to provide configuration for Firebase too.

这篇关于本地主机:3000/traceur SystemJS 与 AngularFire的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆