deploy Angular2 application on Firebase

Question

I'm trying to deploy an angular2 application on Firebase. I've followed this guide but when I type firebase open I get an error (see below).

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. I've copied index.html file inside public folder as well.

So now public folder structure is:

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

this is 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": "wetta",
  "public": "public",
  "ignore": [
    "firebase.json",
    "**/.*",
    "**/node_modules/**"
  ]
}

The error that google chrome console shows is: (index):24 Uncaught ReferenceError: System is not defined

Am I going in the right direction? What is causing this error?

Petr Pravda · Accepted Answer · 2016-05-09 16:21:26Z

3

The root cause of the problem is that the script from index.html wants to call

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.

It wouldn't be practical to upload all the stuff from node_modules, because there are way to many files.

I was able to solve the problem with following steps:

created Angular 2 application with angular-cli
built my application with ng build which created dist folder with my app
initialize with firebase init . For question "What directory should be the public root?" give answer dist .
firebase deploy

answered May 9, 2016 at 16:21

Petr Pravda

494 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

deploy Angular2 application on Firebase

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related