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 3
Christopher GoreEnterprise Solutions ArchitectAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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 GoreEnterprise Solutions 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
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Christopher GoreEnterprise Solutions 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 GoreEnterprise Solutions 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 GoreEnterprise Solutions 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 GoreEnterprise Solutions 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 GoreEnterprise Solutions 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 GoreEnterprise Solutions 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 GoreEnterprise Solutions 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 GoreEnterprise Solutions 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 GoreEnterprise Solutions 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 GoreEnterprise Solutions 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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Christopher GoreEnterprise Solutions 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 GoreEnterprise Solutions ArchitectAuthor Commented:
There was an issue with the routing.  I fixed that.  Thanks.
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.