CODEWITHSUNDEEP
javascriptfirebaseangularfirebase-hosting
splunk
splunk

Reputation: 6779

deploy Angular2 application on Firebase

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?

Upvotes: 2

Views: 1535

Answers (1)

Petr Pravda
Petr Pravda

Reputation: 49

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

Upvotes: 3

Related Questions