firebase hosting js bundles

I am hosting an app in Firebase hosting.  When I run it locally on localhost:4200, The .js bundles are loaded into my index.html.  When I build and deploy to firebase hosting, it just gets the index.html file but does not get the sources (the .js bundles) Am I missing a step?
LVL 1
Christopher GoreSolutions ArchitectAsked:
Who is Participating?
 
Julian HansenCommented:
I am not seeing where you have defined your routing but in your auth.guard.ts you have

this.router.navigate(['/login']);

Open in new window


Suggesting that the app is trying to route but with no routing defined it is erroring.
0
 
Julian HansenCommented:
Look at the source of your deployed app - where is it pointing to.

I am guessing you have a base href in there that is configured on your local machine to a path that is not available on the live site. Simply edit your index.html before deployment and make sure that reference points to the right place.
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
Base points to / but that's not the issue.  The right index is showing up.  The problem is that when the index loads it should load with the bundles.js which is the compiled code. It does that on my local host but when I️ push it to the firebase server, the complied .js does not come with it.
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
Julian HansenCommented:
The right index is showing up.
The index will show - it is the supplementary resources that won't load if the base href is wrong.

Are you saying that the compiled .js is not being copied to the server or it is and it is not loading?

What are you using to push to the server?
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
It is not being pushed to the server as I can see. I can load the index page and view sources. The sources are only the index.  However, when I do the same and load it into the browser in my dev environment under localhost:4200 , I can see the same index.html.  The difference being that when I view sources, I see the compiled .js links and of course I have all the files on my dev server but the point is the .js links show in the browser as referenced on the dev in the browser. On the live web, the references are not there.  I have a .git if it helps.  https://github.com/chrisgore/LoanApp
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
BTW - I am using GitHub Desktop to commit and push.  I could just as easily use the terminal too, but that should not matter.
0
 
Julian HansenCommented:
The sources are only the index
In the source of the index file should be script references to the bundled scripts - do you see those?
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
The script references are dynamically added at runtime.  So I do see them when index runs on the dev, but they do not add at runtime for live.  In the static index file,
0
 
Julian HansenCommented:
Can you post your index.html
0
 
Julian HansenCommented:
or a link to your deployed applicatoin
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
0
 
Julian HansenCommented:
Ok I see what you mean - and that is what came out of the ng build process?

But you say it works locally so what does your local index.html file look like - does not make sense that your local would work if it looks like the deployed one.
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
local is the same.  There is not another index so that is it.  At one time there was another index in another folder but, that did not get deployed.  That was also verified by changing the title on each of the index files. They were different. So I know it's the right one.  It is showing the app.component.html file in the index.html (as expected).  There are two components in the app folder.  One is user-profile and the other is core .  The user-profile has the HTML in it that needs to be displayed.  Since the .js files are not there, it's not loading the nested component.  Also, even if it did, since the .js files are not there, nothing would work anyway. It's like it's deploying but not adding the files to be presented at runtime on the live server.  I tried to even put in the url  .../app.js to see if it shows the .js file.  It just directs to the index view so I could not test that theory.
0
 
Julian HansenCommented:
When I build your app I get this
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LoanApp1</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 type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.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>

Open in new window


That last line is what your online version is missing.
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
That is correct.  And it does run correctly on my dev. When I deploy, it does not come over like that.  

Are you saying, when you build it, then open the index.html in something like visual studio code, it has that line in it? Or, only in the browser?
0
 
Julian HansenCommented:
Are you saying, when you build it, then open the index.html in something like visual studio code, it has that line in it? Or, only in the browser?
1. Clone repository
2. npm install
3. ng build
4. Browse to dist folder
5. Open index.html with code editor - exactly as I posted above

View source on this page
https://loanapp-0001.firebaseapp.com/

And the  <script> line is missing.

Which means
1. Your deploy process is doing something wierd
2. The line is being removed on the host

I would try and copy that index.html file to the server manually overwriting what is there and test to see if app works.
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
That is exactly the process.  And something weird is going on. That's why I thought my deploy package must be doing something wrong or I configured something wrong.  I will copy it manually and see what happens.
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
I think I figured it out.  I have a new project and it's using Node.js 9.1.0.  GRPC version is 1.7.1.  Firebase is looking for GRPC 1.4.1.  I guess I need to remove Node and NPM completely and rebuild my app.  I'll post a followup.
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
it's working.  The public:  was pointed to the wrong folder.  I changed it to public: "dist" .  Now the only issue is making my user-profile controller to show up
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
so the .js bundles are there now.  The issue now seems to be with a router of some nature.  You can see the error from the app here:  https://loanapp-0001.firebaseapp.com/
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
You are correct.  I pieced together two projects and that router was in there.  I am re-working it now.  I have everything going using firebase, but I'm now working to switch it over to firestore.
0
 
Christopher GoreSolutions ArchitectAuthor Commented:
There was an issue with the routing.  I fixed that.  Thanks.
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.