asked on 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?
JavaScriptAngular
Last Comment
Julian Hansen
ASKER
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.
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?
ASKER
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
ASKER
BTW - I am using GitHub Desktop to commit and push. I could just as easily use the terminal too, but that should not matter.
The sources are only the indexIn the source of the index file should be script references to the bundled scripts - do you see those?
ASKER
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,
Can you post your index.html
or a link to your deployed applicatoin
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.
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.
ASKER
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.
When I build your app I get this
That last line is what your online version is missing.
<!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>
That last line is what your online version is missing.
ASKER
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?
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?
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.
ASKER
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.
ASKER
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.
ASKER
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
ASKER
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/
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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.
ASKER
There was an issue with the routing. I fixed that. Thanks.
You are welcome.
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.