在Firebase

时间:2016-04-25 20:29:22

标签: javascript firebase angular firebase-hosting

我尝试在Firebase上部署angular2应用程序。我已经关注this指南但是当我输入firebase open时出现错误(见下文)。

这是我的应用程序的结构

\root
    \ app
    \ assets
    \ dev
    \ node_modules
    \ public
    \ src
    \ typings
    index.html
    firebase.json
    gulpfile.js
    package.json
    tsconfig.json
    typings.json

我已将所有文件放在我的app文件夹中(他们的.js个文件,这些文件来自.ts文件夹内的dev文件夹)在公共文件夹内。我也在公共文件夹中复制了index.html文件。

所以现在公用文件夹结构是:

\public
    \app
       |-> app.component.js
       |-> boot.js
       |-> other .js files
    index.html

这是index.html:

<html>
<head>
    <base href="/">
    <title>Angular 2 Boilerplate</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Load libraries -->
    <!-- IE required polyfills, in this exact order -->
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <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.js"></script>


    <link rel="stylesheet" href="src/css/app.css">
</head>
<body>
<my-app>Loading...</my-app>

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

我的firebase.json是这样的:

{
  "firebase": "wetta",
  "public": "public",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

Google Chrome控制台shows is: (index):24 Uncaught ReferenceError: System is not defined

的错误

我是朝着正确的方向前进的吗?导致此错误的原因是什么?

1 个答案:

答案 0 :(得分:3)

问题的根本原因是index.html的脚本想要调用

<强> System.config(...

但是在

中定义的System对象
<script src="node_modules/systemjs/dist/system.src.js"></script>

未加载,因为在您的firebase.json中,您忽略了 / node_modules / 的规则,并且系统.src.js未上传到Firebase服务器上。

从node_modules上传所有内容是不切实际的,因为有很多文件可以使用。

我能够通过以下步骤解决问题:

  • 使用 angular-cli
  • 创建了Angular 2应用程序
  • 使用 ng build 构建我的应用程序,并使用我的应用程序
  • 创建了 dist 文件夹
  • 使用 firebase init 进行初始化。对于问题“什么目录应该是公共根目录?”给出答案 dist
  • firebase部署