Angular 6.0 firebase托管部署无法正常工作

Question

我正在寻找关于如何firebase-tools在我的角度6.0项目上正确设置托管的教程,我发现的总是这样.

- firebase init 
- then select the Hosting
- What do you want to use as your public directory? dist
- Configure as a single-page app (rewrite all urls to /index.html)? Yes
- Overwrite? No
- ng build --prod
- firebase deploy

但在这之后,这总是我所拥有的.

Answer 1

我发现ng build --prod将dist在项目位置下创建一个和另一个子文件夹.

dist
|--TheProject_Folder
|  |--assets|index.html - This index html is not using.
|--index.html - This is the html generated in the firebase init

所以我所做的就是再次初始化firebase init ,改变公共目录从dist到dist/TheProject_Folder:

- What do you want to use as your public directory? dist/TheProject_Folder
- Configure as a single-page app (rewrite all urls to /index.html)? Yes
- Overwrite? No

Answer 2

下面是在firebase上托管angular6.0 app的一步一步的过程

1] npm install -g firebase-tool 安装firebase工具

2] firebase login使用CLI工具登录Firebase.

连接到我们的帐户/ Gmail帐户后,我们将在浏览器中获取firebase CLI Login Successfull消息

3] firebase init

以下是Firebase工具提出的问题的答案:

？你准备好了吗？对
吗？您要为此文件夹设置哪些Firebase CLI功能？按Space键选择功能,然后按Enter确认您的选择.托管:配置和部署Firebase托管站点

？你想用什么作为你的公共目录？DIST (This is important! Angular creates the dist folder.)

？配置为单页应用程序(将所有URL重写为/ index.html)？是

4] ng build --prod

这将在我们的项目中创建一个全新的dist /文件夹,其中包含启动我们的应用程序所需的文件.

5]在部署应用程序之前,转到firebase.json文件并指定项目公共字段,如下所示

"public": "dist/your_project_name",

6]现在使用下面的命令在firebase中部署项目

firebase部署

在推算后,您将收到以下消息

• 部署完成!

项目控制台:https://************[您将获得实际的网址名称,而不是星标]

托管网址:https://*************[您将获得实际网址名称而不是星标]

您可以通过托管URL中提供的URL访问该网站

Answer 3

我删除缓存并刷新浏览器后，它对我有用，谢谢。