IntelliJ中集成Angular UI的Play应用无法运行问题排查

我帮你分析一下，你遇到的问题核心是**Content Security Policy (CSP)**的配置限制，导致Angular无法正常初始化运行。那些控制台里的CSP报错就是直接原因：

问题根源拆解 #

• 内联样式被拒绝：Angular在运行过程中会生成一些内联样式，而默认的CSP规则default-src 'self'禁止了内联资源加载；
• Data URI字体被拒绝：Angular的默认样式可能包含Data URI格式的字体资源，CSP未配置font-src允许这类资源；
• unsafe-eval被禁止：开发模式下的Angular编译器需要执行字符串形式的JavaScript，而CSP默认禁用了unsafe-eval，直接阻止了Angular核心代码的执行。

这些限制叠加起来，就导致Angular无法完成初始化，自然无法渲染<app-root>里的内容，而你的自定义CSS不受影响是因为它是通过合法的资源路径加载的。

具体解决步骤 #

1. 调整Play框架的CSP配置

修改Play项目的application.conf配置文件，添加符合Angular运行需求的CSP规则：

# 开发环境CSP配置（注意：生产环境建议替换为nonce/hash，提升安全性）
play.filters.headers.contentSecurityPolicy = "default-src 'self' 'unsafe-eval' 'unsafe-inline'; font-src 'self' data:;"

• 'unsafe-eval'：允许Angular开发模式下的编译器执行动态代码；
• 'unsafe-inline'：允许内联样式和脚本（开发环境临时使用，生产环境推荐用nonce或哈希值替代）；
• font-src 'self' data:：允许加载本地字体和Data URI格式的字体资源。

2. 验证资源路径配置

虽然控制台没有404报错，但还是要确认以下两点：

• 确保Angular构建后的dist文件夹内容已经完整复制到web/public/ui目录；
• 检查Play的路由配置routes文件中是否存在Assets路由：

  GET     /assets/*file               controllers.Assets.versioned(path="/public", file: Asset)
  

  这个路由是@routes.Assets.versioned()能正确解析资源路径的前提。

3. 重启Play服务

修改配置后，重启Play应用，重新访问localhost:9000，Angular应该就能正常渲染<app-root>的内容了。

生产环境优化提示 #

如果后续要部署到生产环境，建议：

• 构建Angular时使用ng build --prod，生产模式下Angular会减少对unsafe-eval的依赖；
• 把CSP中的'unsafe-inline'替换为nonce或哈希值，具体可以参考Play官方文档中CSP的安全配置方案，避免直接使用unsafe前缀带来的安全风险。

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