CODEWITHSUNDEEP
javascriptangularfirebasedeploymentbuild
firasKoubaa
firasKoubaa

Reputation: 6857

Angular : Running production app and deploy to Firebase

I'm intending to deploy my project to production within firebase :

i've done this :

1. Running : firebase login

2. Running : firebase init ( i set Hoisting project )

3. Login to firebase

4. Running : ng build --env=prod

( since running ng build --prod fails throwing this error :

ERROR in ./src/main.ts Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory' in '/home/firas/Bureau/Miraldev-Angular-test/src' @ ./src/main.ts 4:0-74 @ multi ./src/main.ts

)

the resulting dist/ folder contains the index.html which is supposed to run locally my app:

index.html :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MiraldevAngularTest</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
<body>
  <app-root></app-root>
  <script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "AIzaSyC0m1wWVYokXRUrAQmFKwukdvAw3aowEnY",
      authDomain: "miraldev-test.firebaseapp.com",
      databaseURL: "https://miraldev-test.firebaseio.com",
      projectId: "miraldev-test",
      storageBucket: "miraldev-test.appspot.com",
      messagingSenderId: "821288466474"
    };
    firebase.initializeApp(config);
  </script>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

but when i run it under chrome it throws errors indicating the absence of those files : inline.bundle.js , main.bundle.js , polyfills.bundle.js... ) even they are all present in the dist/ folder , but it seems not seeing or running them.

Snapshot of the console of index.html under chrome : enter image description here

Any ideas to run my production app ??

Upvotes: 0

Views: 299

Answers (1)

Martin Nuc
Martin Nuc

Reputation: 5764

I use script in package.json:

"scripts": {
    "deploy:test": "ng build --prod && firebase deploy --project test"
    "deploy:prod": "ng build --prod && firebase deploy --project prod"
}

It builds app (as yours) and uploads to firebase hosting. I have production and staging environments. To setup firebase hosting use firebase.json and firebaserc configs:

firebaserc:

{
  "projects": {
    "prod": "myproject-prod",
    "test": "myproject-test"
  }
}

firebase.json:

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "headers": [
      {
        ... various security headers
      }
    ],
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}

In database.rules.json I have my security rules for database:

{
  "rules": {
    ".read":true,
    ".write":true
  }
}

Upvotes: 0

Related Questions