无法使用 IntelliJ 在 Play 应用中 运行 Angular UI
Unable to run an Angular UI in Play app using IntelliJ
我想在 IntelliJ 中创建一个使用 Angular UI 的 Play 应用程序。这已经完成 (https://github.com/lbialy/play-ng2-webpack2) 所以我想这是可能的。
首先，我在 web 文件夹中使用 IntelliJ 创建了 Play2 应用程序
然后我在 web 文件夹内的 ui 文件夹中使用 Angular CLI 创建了一个 Angular 应用程序
然后我在ui文件夹中运行ng build。这创建了一个 dist 文件夹
我将 dist 文件夹的内容复制到 web/public/ui
然后我将 index.scala.html 更改为使用 Angular UI。
@(message: String)
<!DOCTYPE html>
<html>
<head>
<title>@message</title>
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/common/css-reset.css")">
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/common/common-styles.css")">
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/common/vendor/bootstrap/bootstrap.css")">
</head>
<body class="body-common-styles">
<div class="css-grid-container-common-styles">
<app-root></app-root>
</div>
<script type="text/javascript" src="@routes.Assets.versioned("ui/inline.bundle.js")"></script>
<script type="text/javascript" src="@routes.Assets.versioned("ui/polyfills.bundle.js")"></script>
<script type="text/javascript" src="@routes.Assets.versioned("ui/styles.bundle.js")"></script>
<script type="text/javascript" src="@routes.Assets.versioned("ui/vendor.bundle.js")"></script>
<script type="text/javascript" src="@routes.Assets.versioned("ui/main.bundle.js")"></script>
<script src="@routes.Assets.versioned("javascripts/common/vendor/jquery/jquery-3.2.1.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("javascripts/common/vendor/bootstrap/bootstrap.js")" type="text/javascript"></script>
</body>
</html>
但我没有在 localhost:9000 看到 app-root UI（Angular CLI 创建的默认 UI）。我看到我的 css 创建的蓝色背景，但是 Angular 的东西 none。
如果我在 web/ui 中 运行 ng serve，那么我会在 localhost:4200 中看到 Angular 内容。
我做错了什么？我想如果 js 文件在 public 文件夹中可用，那么我应该能够在 index.scala.html 中访问它们（我想我能够访问它们，因为我没有看到任何 404 消息浏览器开发人员控制台）。
更新
虽然我没有看到 404 错误，但我在开发人员控制台中看到了以下错误，但我不确定它们是否与 Angular 相关（有大量 font 错误！）。
addStyles.js:115 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
insertStyleElement @ addStyles.js:115
createStyleElement @ addStyles.js:132
addStyle @ addStyles.js:165
addStylesToDom @ addStyles.js:77
webpackJsonp.../../../../style-loader/addStyles.js.module.exports @ addStyles.js:37
../../../../../src/styles.css @ styles.css?043a:7
__webpack_require__ @ bootstrap 339cf76f3ca05ce50b1e:54
2 @ addStyles.js:246
__webpack_require__ @ bootstrap 339cf76f3ca05ce50b1e:54
webpackJsonpCallback @ bootstrap 339cf76f3ca05ce50b1e:25
(anonymous) @ styles.bundle.js:1
addStyles.js:225 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-xylbkVtqJQuRDTD/O50Zkbb0PJR006+vxsulnu5EOD4='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
applyToTag @ addStyles.js:225
addStyle @ addStyles.js:172
addStylesToDom @ addStyles.js:77
webpackJsonp.../../../../style-loader/addStyles.js.module.exports @ addStyles.js:37
../../../../../src/styles.css @ styles.css?043a:7
__webpack_require__ @ bootstrap 339cf76f3ca05ce50b1e:54
2 @ addStyles.js:246
__webpack_require__ @ bootstrap 339cf76f3ca05ce50b1e:54
webpackJsonpCallback @ bootstrap 339cf76f3ca05ce50b1e:25
(anonymous) @ styles.bundle.js:1
localhost/:1 Refused to load the font '
localhost/:1 Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAIw4ABEAAAABQcAAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAABgAAACU8AABMOD1XXMEdTVUIAAArQAAAAUwAAAHCOOI56T1MvMgAACyQAAABbAAAAYNrnrZBjbWFwAAALgAAAAIEAAAC0jBiQAGN2dCAAAAwEAAAAKgAAAC4HyBmgZnBnbQAADDAAAAOBAAAG5XJackBnYXNwAAAPtAAAAAwAAAAMAA0AGGdseWYAAA/AAABViQAAvQzAr6AGaGVhZAAAZUwAAAA2AAAANvzd8kdoaGVhAABlhAAAAB8AAAAkD/YHpGhtdHgAAGWkAAACFAAAA26BW0HVa2VybgAAZ7gAAB/3AABeRKoEucNsb2NhAACHsAAAAb4AAAG+1eip6m1heHAAAIlwAAAAIAAAACAByAf2bmFtZQAAiZAAAADEAAABYBoFNRJwb3N0AACKVAAAAZYAAAJBVvgNXnByZ...KKKqa4EkoqpbQyyiqnvAoqqqSyKqqqproaaqqltjrqqqe+BhpqpLEmmmqmuRZaaqW1Ntpqp70OOuqksy66BhE2m2Gms1Z5Z5ZF5ltrpy1BpHlemm65H35aaLU5Lnvru3V2+e2XPzbZ66br9ummuyV6uK2nG26574677nmvl0ceeGi/3r5Z6qnHnujjo8/m6qev/gYaYJANBhtqiGGGG2mEUUb7YIxxxhpvoglO2GiySaaY6pMvTnnmgIOee+OFQw475rgrjjjqqtnOOe9MEOWrCy4G0UFMEBvEBfFB+N9Y/EJ9fNhL8zINDBwNoLQLi2tpUT5XelFiWapecmJxKm9KZmpRanFmMZjHlZhcWgKR4E/OLEouzU3LSa0A8zmLMvPSIYpKMnNSIIoAYXqDQQAAuQgACABjILABI0QgsAMjcLAURSAgsChgZiCKVViwAiVhsAFFYyNisAIjRLMJCgMCK7MLEAMCK7MRFgMCK1myBCgGRVJEswsQBAIrAA==' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.
compiler.js:34062 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'".
at new Function (<anonymous>)
at evalExpression (compiler.js:34062)
at jitStatements (compiler.js:34080)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._interpretOrJit (compiler.js:34663)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34591)
at compiler.js:34490
at Set.forEach (<anonymous>)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34490)
at compiler.js:34360
at Object.then (compiler.js:474)
我是你提到的存储库的创建者（我可能应该更新到最新的 angular 顺便玩一下）。肯定可以集成 angular 并当然可以玩，而且您走在正确的轨道上！实际上，我存储库中的胶水代码与您所做的完全相同 - 我让 sbt build angular 通过调用 ng build （以便它产生 dist 目录）然后告诉它将文件从 dist 移动到 play 的 public 目录。我的胶水代码做的第二件事是它将 Angular 基于量角器的 e2e 测试工具集成到 Play 的测试中，以便 sbt test 测试 ng 应用程序和后端。我最近没有更新它，因此如果没有一些修复，我的存储库的克隆将无法构建。
您看到的错误与 Play Framework 使用的默认内容安全策略有关。据我所见，angular 正在尝试从同一主机以外的来源获取内容，并且您的 default-src 策略设置为 self。您可能应该将受信任的内容源列入白名单或修改您的构建以将所有内容从 Web 拉到您的 dist 目录中，这样您就不必从您以外的主机获取任何内容（这是更安全的解决方案，但您在大多数情况下不想这样做）。
这里是一些关于 CSP and Play's CSP configuration
的读物
我想在 IntelliJ 中创建一个使用 Angular UI 的 Play 应用程序。这已经完成 (https://github.com/lbialy/play-ng2-webpack2) 所以我想这是可能的。
首先，我在 web 文件夹中使用 IntelliJ 创建了 Play2 应用程序
然后我在 web 文件夹内的 ui 文件夹中使用 Angular CLI 创建了一个 Angular 应用程序
然后我在ui文件夹中运行ng build。这创建了一个 dist 文件夹
我将 dist 文件夹的内容复制到 web/public/ui
然后我将 index.scala.html 更改为使用 Angular UI。
@(message: String)
<!DOCTYPE html>
<html>
<head>
<title>@message</title>
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/common/css-reset.css")">
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/common/common-styles.css")">
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/common/vendor/bootstrap/bootstrap.css")">
</head>
<body class="body-common-styles">
<div class="css-grid-container-common-styles">
<app-root></app-root>
</div>
<script type="text/javascript" src="@routes.Assets.versioned("ui/inline.bundle.js")"></script>
<script type="text/javascript" src="@routes.Assets.versioned("ui/polyfills.bundle.js")"></script>
<script type="text/javascript" src="@routes.Assets.versioned("ui/styles.bundle.js")"></script>
<script type="text/javascript" src="@routes.Assets.versioned("ui/vendor.bundle.js")"></script>
<script type="text/javascript" src="@routes.Assets.versioned("ui/main.bundle.js")"></script>
<script src="@routes.Assets.versioned("javascripts/common/vendor/jquery/jquery-3.2.1.js")" type="text/javascript"></script>
<script src="@routes.Assets.versioned("javascripts/common/vendor/bootstrap/bootstrap.js")" type="text/javascript"></script>
</body>
</html>
但我没有在 localhost:9000 看到 app-root UI（Angular CLI 创建的默认 UI）。我看到我的 css 创建的蓝色背景，但是 Angular 的东西 none。
如果我在 web/ui 中 运行 ng serve，那么我会在 localhost:4200 中看到 Angular 内容。
我做错了什么？我想如果 js 文件在 public 文件夹中可用，那么我应该能够在 index.scala.html 中访问它们（我想我能够访问它们，因为我没有看到任何 404 消息浏览器开发人员控制台）。
更新
虽然我没有看到 404 错误，但我在开发人员控制台中看到了以下错误，但我不确定它们是否与 Angular 相关（有大量 font 错误！）。
addStyles.js:115 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
insertStyleElement @ addStyles.js:115
createStyleElement @ addStyles.js:132
addStyle @ addStyles.js:165
addStylesToDom @ addStyles.js:77
webpackJsonp.../../../../style-loader/addStyles.js.module.exports @ addStyles.js:37
../../../../../src/styles.css @ styles.css?043a:7
__webpack_require__ @ bootstrap 339cf76f3ca05ce50b1e:54
2 @ addStyles.js:246
__webpack_require__ @ bootstrap 339cf76f3ca05ce50b1e:54
webpackJsonpCallback @ bootstrap 339cf76f3ca05ce50b1e:25
(anonymous) @ styles.bundle.js:1
addStyles.js:225 Refused to apply inline style because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-xylbkVtqJQuRDTD/O50Zkbb0PJR006+vxsulnu5EOD4='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.
applyToTag @ addStyles.js:225
addStyle @ addStyles.js:172
addStylesToDom @ addStyles.js:77
webpackJsonp.../../../../style-loader/addStyles.js.module.exports @ addStyles.js:37
../../../../../src/styles.css @ styles.css?043a:7
__webpack_require__ @ bootstrap 339cf76f3ca05ce50b1e:54
2 @ addStyles.js:246
__webpack_require__ @ bootstrap 339cf76f3ca05ce50b1e:54
webpackJsonpCallback @ bootstrap 339cf76f3ca05ce50b1e:25
(anonymous) @ styles.bundle.js:1
localhost/:1 Refused to load the font '
localhost/:1 Refused to load the font 'data:font/woff;base64,d09GRgABAAAAAIw4ABEAAAABQcAAAQABAAAAAAAAAAAAAAAAAAAAAAAAAABHUE9TAAABgAAACU8AABMOD1XXMEdTVUIAAArQAAAAUwAAAHCOOI56T1MvMgAACyQAAABbAAAAYNrnrZBjbWFwAAALgAAAAIEAAAC0jBiQAGN2dCAAAAwEAAAAKgAAAC4HyBmgZnBnbQAADDAAAAOBAAAG5XJackBnYXNwAAAPtAAAAAwAAAAMAA0AGGdseWYAAA/AAABViQAAvQzAr6AGaGVhZAAAZUwAAAA2AAAANvzd8kdoaGVhAABlhAAAAB8AAAAkD/YHpGhtdHgAAGWkAAACFAAAA26BW0HVa2VybgAAZ7gAAB/3AABeRKoEucNsb2NhAACHsAAAAb4AAAG+1eip6m1heHAAAIlwAAAAIAAAACAByAf2bmFtZQAAiZAAAADEAAABYBoFNRJwb3N0AACKVAAAAZYAAAJBVvgNXnByZ...KKKqa4EkoqpbQyyiqnvAoqqqSyKqqqproaaqqltjrqqqe+BhpqpLEmmmqmuRZaaqW1Ntpqp70OOuqksy66BhE2m2Gms1Z5Z5ZF5ltrpy1BpHlemm65H35aaLU5Lnvru3V2+e2XPzbZ66br9ummuyV6uK2nG26574677nmvl0ceeGi/3r5Z6qnHnujjo8/m6qev/gYaYJANBhtqiGGGG2mEUUb7YIxxxhpvoglO2GiySaaY6pMvTnnmgIOee+OFQw475rgrjjjqqtnOOe9MEOWrCy4G0UFMEBvEBfFB+N9Y/EJ9fNhL8zINDBwNoLQLi2tpUT5XelFiWapecmJxKm9KZmpRanFmMZjHlZhcWgKR4E/OLEouzU3LSa0A8zmLMvPSIYpKMnNSIIoAYXqDQQAAuQgACABjILABI0QgsAMjcLAURSAgsChgZiCKVViwAiVhsAFFYyNisAIjRLMJCgMCK7MLEAMCK7MRFgMCK1myBCgGRVJEswsQBAIrAA==' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.
compiler.js:34062 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'".
at new Function (<anonymous>)
at evalExpression (compiler.js:34062)
at jitStatements (compiler.js:34080)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._interpretOrJit (compiler.js:34663)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileTemplate (compiler.js:34591)
at compiler.js:34490
at Set.forEach (<anonymous>)
at JitCompiler.webpackJsonp.../../../compiler/esm5/compiler.js.JitCompiler._compileComponents (compiler.js:34490)
at compiler.js:34360
at Object.then (compiler.js:474)
我是你提到的存储库的创建者（我可能应该更新到最新的 angular 顺便玩一下）。肯定可以集成 angular 并当然可以玩，而且您走在正确的轨道上！实际上，我存储库中的胶水代码与您所做的完全相同 - 我让 sbt build angular 通过调用 ng build （以便它产生 dist 目录）然后告诉它将文件从 dist 移动到 play 的 public 目录。我的胶水代码做的第二件事是它将 Angular 基于量角器的 e2e 测试工具集成到 Play 的测试中，以便 sbt test 测试 ng 应用程序和后端。我最近没有更新它，因此如果没有一些修复，我的存储库的克隆将无法构建。
您看到的错误与 Play Framework 使用的默认内容安全策略有关。据我所见，angular 正在尝试从同一主机以外的来源获取内容，并且您的 default-src 策略设置为 self。您可能应该将受信任的内容源列入白名单或修改您的构建以将所有内容从 Web 拉到您的 dist 目录中，这样您就不必从您以外的主机获取任何内容（这是更安全的解决方案，但您在大多数情况下不想这样做）。
这里是一些关于 CSP and Play's CSP configuration
的读物