在Firebase上部署Angular2应用程序

Question

I'm trying to deploy an angular2 application on Firebase. 我正在尝试在Firebase上部署angular2应用程序。 I've followed this guide but when I type firebase open I get an error (see below). 我遵循了本指南，但是当我输入firebase open出现错误（见下文）。

This is the structure of my application 这是我的应用程序的结构

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

I've put all the files inside my app folder (they're .js files, transpiled from .ts ones which are inside dev folder) inside public folder. 我已将所有文件放在我的app文件夹中（它们是.js文件，是从dev文件夹中的.ts文件转译而来），位于公共文件夹中。 I've copied index.html file inside public folder as well. 我也将index.html文件复制到了公共文件夹中。

So now public folder structure is: 因此，现在的公用文件夹结构为：

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

this is 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>

my firebase.json is like this: 我的firebase.json是这样的：

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

The error that google chrome console shows is: (index):24 Uncaught ReferenceError: System is not defined 谷歌浏览器控制台shows is: (index):24 Uncaught ReferenceError: System is not defined的错误shows is: (index):24 Uncaught ReferenceError: System is not defined

Am I going in the right direction? 我朝着正确的方向前进吗？ What is causing this error? 是什么导致此错误？

Answer 1

The root cause of the problem is that the script from index.html wants to call 问题的根本原因是index.html中的脚本要调用

System.config(... System.config（...

but the System object which is defined in 但是在

<script src="node_modules/systemjs/dist/system.src.js"></script>

wasn't loaded because in your firebase.json you have ignore rule for /node_modules/ and the system.src.js is not uploaded on Firebase server. 之所以未加载，是因为在您的firebase.json中，您已经忽略了/ node_modules /的规则，并且system.src.js没有上传到Firebase服务器上。

It wouldn't be practical to upload all the stuff from node_modules, because there are way to many files. 从node_modules上传所有内容是不切实际的，因为有很多方法可以上传文件。

I was able to solve the problem with following steps: 我可以通过以下步骤解决问题：

created Angular 2 application with angular-cli 用angular-cli创建了Angular 2应用程序
built my application with ng build which created dist folder with my app 我内置有NG构建的应用程序，创建DIST文件夹我的应用程序
initialize with firebase init . 用firebase init初始化 。 For question "What directory should be the public root?" 对于问题“公用根目录应该是哪个目录？” give answer dist . 给出的答案DIST。
firebase deploy 火力基地部署

在Firebase上部署Angular2应用程序

问题描述

1 个解决方案

解决方案1
3 2016-05-09 16:21:26

在Firebase上部署Angular2应用程序

问题描述

1 个解决方案

解决方案1 3 2016-05-09 16:21:26

解决方案1
3 2016-05-09 16:21:26