无法使用WAMP服务器中的dist文件夹部署Angular 5 [英] Unable to deploy Angular 5 using dist folder in WAMP server

问题描述

我无法在WAMP服务器中使我的angular 5应用程序正常工作。我已经阅读了许多其他堆栈溢出文章并尝试了一些选项。

I am unable to make my angular 5 app work in WAMP server. I have read many other stack overflow posts and tried a few options.

生成dist文件夹的步骤：

Steps to produce dist folder :

步骤1-ng build --prod --base-href / dist/\"。

step 1 - ng build --prod --base-href "/dist/".

步骤2：将dist / *文件复制到DOCUMENT_ROOT。

step 2 : Copy the dist/* files to DOCUMENT_ROOT.

根文件夹中的目录

在此处输入图像描述

步骤3-重新启动WAMP服务器

step 3 - restarted WAMP server

步骤4-本地主机。 dist文件夹显示在WAMP中

Step 4 - localhost . dist folder shows in WAMP

输入图片在这里说明

第5步：localhost / dist和localhost / dist / index.html-无效

step 5 :localhost/dist and localhost/dist/index.html - nothing works

步骤6：我将基本href更改为 / dist /并重新启动WAMP-此打开的索引文件
完成工作

step 6: I changed base href to "/dist/" and restarted WAMP - This opened index file Dint work

第7步-基于角度站点中给出的部署方法- https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml

step 7 - based on deployment method given in angular site -https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml

我创建了.htaccess文件并复制了以下代码，并将该文件放入dist文件夹
在此处输入图片描述

i created .htaccess file and copied the following code and have put the file in the dist folder enter image description here

在此处输入图片描述

仍然无法进行路由。请帮忙。在最近的3天中一直在为此苦苦挣扎！

Still routing not working . Please please help. struggling with this for last 3 days !

推荐答案

我只是尝试了同样的事情，但仍然有效。这是我所做的。
首先，我将Angular CLI升级到最新版本。

I just tried same thing on my end and it worked. Here is what I did. First I upgraded the Angular CLI to the latest one.

npm uninstall -g @angular/cli
npm cache verify
# if npm version is < 5 then use `npm cache clean`
npm install -g @angular/cli@latest

然后，我可以使用自定义的baseHref进行构建，您还可以指定deploy-url（此选项仅适用于CLI生成的文件，不适用于资产中包含的文件）。为了避免在索引文件中包含静态文件时出现任何问题，最好的选择就是这样做（您添加./文件的开头）

Then i was able to make a build with a custom baseHref and you can also specify a deploy-url( this option will only work for the files generated by the CLI not the files you have included on you assets). By the way to avoid any issue when you want to include a static file in your index file the best option will be doing this way (you add ./ front of the file)

<script src="./assets/bower_components/underscore/underscore-min.js" type="text/javascript"></script>

最后，我用来构建的选项是：

Finaly the option I have used to make the build is this :

ng build --prod --base-href /dist --deploy-url ./

当我进行构建并将其放入MAMP / WAMP / XAMP时，它可以工作文件

When I make the build and put it inside my MAMP/WAMP/XAMP it works file

这篇关于无法使用WAMP服务器中的dist文件夹部署Angular 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！