i don't understand why, my angular web app works perfectly in local but when i deploy it to firebase hosting it only shows me a blank page.
In my root folder of the app in the console i write:
我不明白为什么,我的angular web应用程序在本地工作得很好,但当我将其部署到firebase托管时,它只显示一个空白页面。在控制台中的应用程序的根文件夹中,我写道:
ng build --prod
And it creates a carpet called "dist" and inside dist another called myproject with all the files in it
它创建了一个名为“dist”的地毯,并在dist内部创建了一个名为myproject的地毯,其中包含所有文件
Now, in the terminal i execute
现在,在我执行的终端中
firebase init
Then, i select Hosting and Database and then my project in firebase and then it asks me what file of database rules i want to use i let the default and then What i want to use as public directory and i write dist/myproject bc the files are inside myproject folder inside dist as i said earlier.
然后,我选择托管和数据库,然后在Firebase中选择我的项目,然后它会问我想要使用哪个数据库规则文件,我让默认设置,然后我想要用作公共目录,然后我写入dist/myproject BC这些文件位于dist内的myproject文件夹中,就像我前面说的那样。
Then, as it is an angular app, when it asks me Do you want to configure as single-page app i say yes (i tried whit no and it doesn't work either).
然后,因为它是一个棱角分明的应用程序,当它问我是否想要配置为单页面应用程序时,我回答是(我尝试了Wit no,但它也不起作用)。
Finally, when it ask do you want to overwrite the index.html i say no and it finishes.
最后,当它询问是否要覆盖index.html时,我说不,它就结束了。
The firebase.json looks like this:
Firebase.json如下所示:
{
"hosting": {
"public": "dist/myproject",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Finally i do
我终于做到了
firebase deploy
And happen what i say, it deploy "successfully" my app but when i enter it's only a white page. I don't know what it could be, can anyone help me?
果然如我所说,它成功地部署了我的应用程序,但当我进入时,它只是一个白色页面。我不知道会是什么,有人能帮我吗?
Cheers!
干杯!
更多回答
优秀答案推荐
I've hosted a few Angular SPAs on Firebase Hosting and you just need to do what's called "Ahead-of-Time" compilation to make it work. But first check:
我已经在Firebase Hosting上托管了一些Angular SPA,你只需要做所谓的“提前”编译就可以让它工作。但首先检查:
- Are there are any error messages in your browser's console?
- When you view the page source is it blank or is your app's index.html there?
If you answered "No" and "Yes" try compiling with AOT and redeploying:
ng build --prod --aot
如果您的回答是“否”和“是”,请尝试使用AOT进行编译并重新部署:ng build --prod --aot
for me, it worked after I changed
对我来说,它在我改变后奏效了
"hosting": {
"public": "dist/project-name"}
in firebase.json. The point it to also add the project name folder after the build folder, which is "dist" in my case.
在Firebase.json中。指向它还在Build文件夹之后添加项目名称文件夹,在我的例子中是“dist”。
更多回答
You're right, when i compile it with tha --aot flag it shows me a strange error, that's why it didn't work! But i still don't understand the error, it says this: node_modules/@angular/fire/angularfire2.d.ts:50:96 - error TS2344: Type 'T[K]' does not satisfy the constraint '(...args: any) => any'.
您是对的,当我用THA--AOT标志编译它时,它显示了一个奇怪的错误,这就是它不工作的原因!但是我仍然不理解这个错误,它是这样写的:node_modules/@angular/fire/angularfire2.d.ts:50:96-Error TS2344:类型‘T[K]’不满足约束‘(...args:any)=>any’。
I solved it adding "skipLibCheck": true in the tsconfig.json and it compiled but the web still in blank and it shows this error: TypeError: sg(...).auth is not a function
我解决了这个问题,在tsfig.json中添加了“skipLibCheck”:True,它被编译了,但是Web仍然是空白的,并且它显示这个错误:TypeError:SG(...).auth不是一个函数
That's a different problem, please mark this as solved since it resolved the first issue. For the second error you'd need to post your code because it's most likely you're missing a provider or declaration file.
这是一个不同的问题,请标记为已解决,因为它解决了第一个问题。对于第二个错误,您需要发布代码,因为很可能缺少提供程序或声明文件。
我是一名优秀的程序员,十分优秀!