Firebase. Authentication and hosting

Question

I am creating a web page. I am using Firebase and Angular. I did it the authentication in the past installing the SDK with:

npm install --save firebase

Then I used the require or import , and config code in a firebase.js :

import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";

var firebaseConfig = {
  apiKey: ...
  authDomain: ...
  projectId: ...
  ...
};

firebase.initializeApp(firebaseConfig);
export const auth = firebase.auth();
export const firestore = firebase.firestore();
export const keep_session = firebase.auth.Auth.Persistence.SESSION;

But now I have use hosting at same time. And here tells it is same way using:

<script src="/__/firebase/7.21.0/firebase-analytics.js"></script>
<script src="/__/firebase/7.21.0/firebase-auth.js"></script>
<script src="/__/firebase/7.21.0/firebase-firestore.js"></script>

With this in body block, looks it same than before. The problem is when I use ng serve, with port 4200, I see in console it doesn't recognise the scripts. When I do firebase serve yes, but it doesn't show my web. Only a example web page. With my firebase libraries yes, but no my content.

So my doubt is how I can make this. Really with this scripts I can install SDK in my app? When I write code, it doesn't recognise. Should I use the other way, installing dependencies?

Also I would know how when I write

firebase serve

with the 5000 port, have the same result than when I use in the 4200

ng serve

In my project, about firebase only I have firebase.json and .firebaserc files. Nothing about it in package.json .

Thank by the help.

---

Edit: Doing ng build and then modifing firebase.json

"hosting": {
    ...
    "public": "dist/app_name",
    ...
}

I finally saw my web with

firebase serve

So the question now is, How I develop if I don't have the module in my package.json? The IDE doesn't recognise when I make the imports

Answer 1

Those specific script includes that you're using that being with two underscores only work when the web site is hosted with Firebase Hosting or its local emulator ( firebase serve ). They won't work otherwise (including ng serve ).

If you're using a bundler (which Angular does), you would not what to use those script includes at all. When the app builds, the relevant code will come from the modules that were installed when you ran npm install .