在 Firebase 上部署 Angular2 应用程序答案

【问题标题】：deploy Angular2 application on Firebase在 Firebase 上部署 Angular2 应用程序
【发布时间】：2016-04-25 20:29:21
【问题描述】：

我正在尝试在 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 中的 .ts 文件转译，位于 dev 文件夹中）。我也在 public 文件夹中复制了 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的错误

我的方向正确吗？是什么导致了这个错误？

【问题讨论】：

标签： javascript firebase angular firebase-hosting

【解决方案1】：

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

System.config(...

但是在

中定义的System对象

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

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

从 node_modules 上传所有东西是不切实际的，因为有很多文件。

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

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

【讨论】：