Angular项目如何允许直接访问路由定义的应用URL（浏览器地址栏访问）

方案1：保留子目录部署的解决方案 #

1. 修正应用基础路径

你把项目放在Wamp子目录/ng-project下，默认配置的根路径为/，会导致资源请求、路由跳转都缺少子目录前缀，出现404。
构建项目时指定子目录作为基础路径，执行命令：

ng build --configuration production --base-href /ng-project/

也可以直接修改项目src/index.html中的base标签：

<base href="/ng-project/">

构建完成后再将dist下的ng-project目录复制到Wamp的www目录即可，此时assets资源的路径会自动补全/ng-project前缀，不会再出现404。

2. 配置Apache重写规则解决刷新404

Angular默认使用HTML5 History模式的前端路由，所有路由都是虚拟路径，Apache默认只会响应真实存在的文件/目录请求，刷新时找不到对应路径就会返回404。
在Wamp的www/ng-project目录下新建.htaccess文件，写入以下规则：

<IfModule mod_rewrite.c>
  RewriteEngine On
  # 匹配当前子目录作为重写基准
  RewriteBase /ng-project/
  # 直接放行index.html请求
  RewriteRule ^index\.html$ - [L]
  # 非真实存在的文件、目录请求，全部转发到index.html交给Angular路由处理
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /ng-project/index.html [L]
</IfModule>

然后开启Apache的rewrite模块：点击Wamp托盘图标，依次选择「Apache」→「Apache模块」，找到并勾选rewrite_module，重启Wamp所有服务后生效。 #

方案2：根目录部署的简化方案 #

如果把构建产物直接放在Wamp的www根目录，无需修改build命令的base-href参数，只需要把上面.htaccess文件里的所有/ng-project/替换为/，放在www根目录，同时开启rewrite模块即可。

内容的提问来源于stack exchange，提问作者davidvera