Angular : Running production app and deploy to Firebase

Question

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 :

Any ideas to run my production app ??

can you try serving app from http server and not from disk? What is the path in your browser when you open index.html? I would expect same path for inline.bundle.js etc. — Martin Nuc
– Martin Nuc, Commented Sep 18, 2017 at 12:48

Martin Nuc · Accepted Answer · 2017-09-18 13:03:12Z

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
  }
}

Collectives™ on Stack Overflow

Angular : Running production app and deploy to Firebase

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related