问题描述
我想创建一个 Play 应用程序，它在IntelliJ中使用Angular UI。这已经完成（）所以我想这是可能的。
I want to create a Play application which uses Angular UI in IntelliJ. This has been done (https://github.com/lbialy/play-ng2-webpack2) so I suppose it is possible.
首先我在 web 文件夹中使用IntelliJ创建了Play2应用程序
然后我使用Angular创建了一个Angular应用程序CLI中的 ui web 文件夹中的文件夹
然后我运行 ng build 在 ui 文件夹中。这创建了一个 dist 文件夹
我在 web中复制了 dist 文件夹的内容/ public / ui
然后我更改了 index.scala.html 以使用Angular UI。
First I created Play2 App using IntelliJ in web folderThen I created an Angular app using Angular CLI in ui folder inside web folderThen I ran ng build in ui folder. This created a dist folder I copied the contents of dist folder in web/public/uiThen I changed the index.scala.html to follows to use the 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>
但是我没有看到 app-root UI（Angular CLI创建的默认UI）在 localhost：9000 。我看到我的CSS创建的蓝色背景但没有Angular的东西。
But I do not see the app-root UI (the default UI which Angular CLI creates) at localhost:9000. I see the blue background which my css creates but none of the Angular stuff.
如果我运行 ng serve in web / ui 然后我在 localhost：4200 看到Angular的东西。
If I run ng serve in web/ui then I see the Angular stuff at localhost:4200.
我做错了什么？我想如果 js 文件在公共文件夹中可用，那么我应该能够在index.scala.html中访问它们（我想我能够，因为我没有在浏览器开发者控制台中查看任何404消息。）
What am I doing wrong? I suppose that if js files are available in public folder then I should be able to access them in index.scala.html (which I suppose I am able to as I do not see any 404 messages in browser developer console).
更新
虽然我没有看到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)
推荐答案
我是存储库的创建者提到（我可能应该更新到最新的角度和顺便玩）。当然可以整合角度和游戏，你就在正确的轨道上！实际上我的存储库中的胶水代码与您正在做的完全相同 - 我让sbt通过调用ng build来构建angular（以便它产生dist目录），然后告诉它将文件从dist移动到play的公共目录。我的胶水代码所做的第二件事是它将Angular基于量角器的e2e测试线束集成到Play的测试中，以便 sbt test 测试app和后端。我最近没有更新它，因此我的repo的克隆将无法在没有一些修复的情况下构建。
I am the creator of repository you mentioned (which I probably should update to latest angular and play by the way). It surely is possible to integrate angular and play of course and you are on the right track! Actually the glue code in my repository does exactly the same thing you are doing - I let sbt build angular by calling ng build (so that it yields dist directory) and then tell it to move files from dist to play's public directory. Second thing my glue code is doing is that it integrates Angular's protractor-based e2e testing harness into Play's tests, so that sbt test tests ng app along with backend. I haven't updated it lately and as a result clone of my repo won't build without some fixes.
您看到的错误与默认的内容安全策略有关Play Framework使用。从我看到的角度来看，尝试从同一主机以外的来源获取内容，并且 default-src 策略设置为 self 。您可能要么将受信任的内容源列入白名单，要么修改您的构建以将所有内容从Web提取到 dist 目录中，这样您就不必从主机以外的任何主机获取任何内容。你的（这是更安全的解决方案，但你不想在大多数情况下这样做）。
The errors you are seeing are related to default Content Security Policy used by Play Framework. From what I'm seeing angular is trying to fetch content from sources other than the same host and your default-src policy is set to self. You should probably either whitelist trusted content sources or modify your build to pull everything from web and into your dist directory, so that you don't have to fetch anything from hosts other than yours (that's the safer solution, but you don't want to do this in most cases).
这里有一些关于和
这篇关于无法使用IntelliJ在Play应用中运行Angular UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！