Angular 5集成Cordova项目模拟器启动报错：白屏且出现TypeError

嘿，我之前在把Angular 5和Cordova整合的时候也碰到过一模一样的白屏+compiler.js报错问题！不用慌，这基本都是路径配置或者兼容性的锅，给你几个亲测有效的解决办法：

Cordova打包后，你的Angular应用是在file:///android_asset/www/这个本地路径下运行的，而Angular默认的<base href="/">会让资源加载路径完全错误，这是白屏的头号原因。

• 要么在构建Angular的时候直接指定base href：

  ng build --prod --base-href ./
  

• 要么直接修改src/index.html里的base标签：把<base href="/">改成<base href="./">，再重新构建。

这一步很容易被忽略，确保你的config.xml里的关键配置没写错：

• 确认<content src="index.html" />指向的是Angular构建后输出到www目录的index.html（默认就是这个，别改成别的路径）。
• 调试阶段先放开文件访问权限，避免路径拦截：

  <access origin="*" />
  <allow-navigation href="*" />
  

  （等应用跑通了，再根据实际需求收紧权限）

Angular 5是比较老的版本了，和太新的Cordova版本容易不兼容：

• 建议把Cordova降到8.x或者9.x版本（我当时用的是Cordova 8.1.0，和Angular 5完美适配）。
• 检查你的polyfills.ts文件，确保必要的polyfill都开启了，比如：

  import 'core-js/es6/reflect';
  import 'core-js/es7/reflect';
  

  旧版Angular依赖这些polyfill来支持移动端的JS环境。

如果上面的方法都没解决，那就得揪出具体的报错点：

• 打开Cordova项目下的platforms/android/assets/www目录，看看Angular构建后的文件有没有缺失，或者路径是否正确。
• 用Chrome远程调试：打开Chrome输入chrome://inspect/#devices，连接你的模拟器，就能看到控制台的详细错误信息，比如到底是哪个变量undefined，这样就能精准修复了。

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