Angular 5切换至XAMPP后app-root组件无法加载问题求助

作为Angular新手遇到这种无报错但页面空白的情况确实挺挠头的，我帮你梳理几个核心排查方向，你可以逐一验证：

1. 先检查base href的路径匹配 #

你的index.html里写了<base href="/Crapo/">，这个标签决定了Angular加载资源的基准路径：

• 如果你把项目放在XAMPP的htdocs/Crapo文件夹下，访问地址应该是localhost/Crapo，这时候<base href="/Crapo/">是对的，但你可以试试改成相对路径<base href="./">，有时候绝对路径在本地部署时会出问题；
• 另外注意你favicon的地址是http://localhost:4200/favicon.ico，这是ng serve的默认端口，在XAMPP环境下应该改成相对路径./favicon.ico，虽然这个不会直接导致空白，但也是配置不一致的细节。

2. 确认编译输出是否正确部署 #

你用npm start编译项目后，Angular默认会把可部署的静态文件生成在dist文件夹里：

• 你是不是直接把整个Angular项目文件夹放到了htdocs里？正确的做法应该是执行ng build（或npm run build，看你package.json的脚本），把dist文件夹里的所有内容复制到htdocs/Crapo目录下，再访问localhost/Crapo；
• 如果直接放项目根目录，XAMPP找不到编译后的js/css文件，自然无法渲染Angular应用，但你说控制台没报错，这点可以打开浏览器的「网络」面板，看看所有js文件的加载状态，是不是有404的情况。

3. 检查Apache的rewrite模块 #

Angular的单页应用依赖Apache的rewrite模块来处理路由，虽然你现在连app-root都没渲染，但还是可以排查下：

• 打开XAMPP的Apache配置文件（httpd.conf），找到#LoadModule rewrite_module modules/mod_rewrite.so，去掉前面的#注释，然后重启Apache服务；
• 另外可以在项目根目录（htdocs/Crapo）下新建一个.htaccess文件，写入以下内容，确保路由重写正常：

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /Crapo/
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /Crapo/index.html [L]
</IfModule>

4. 排除浏览器缓存干扰 #

有时候浏览器会缓存旧的资源，导致新编译的内容没加载：

• 按Ctrl+Shift+R强制刷新页面，或者用浏览器的无痕模式访问，看看是否能正常渲染。

关于XAMPP的额外配置 #

大部分情况下，XAMPP的默认配置就能运行Angular的静态编译文件，不需要特殊设置，主要就是上面提到的路径匹配、编译输出部署、rewrite模块这几个关键点。

另外你提到已经有好心人给了另一种解决办法，如果方便的话可以分享下，说不定能帮我们更精准地定位你之前的问题根源～

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