无法使用IntelliJ在Play应用中运行Angular UI

Question

I want to create a Play application which uses Angular UI in IntelliJ. 我想创建一个在IntelliJ中使用Angular UI的Play应用程序。 This has been done ( https://github.com/lbialy/play-ng2-webpack2 ) so I suppose it is possible. 这已经完成了（ https://github.com/lbialy/play-ng2-webpack2 ），所以我想这是可能的。

First I created Play2 App using IntelliJ in web folder Then I created an Angular app using Angular CLI in ui folder inside web folder Then I ran ng build in ui folder. 首先，我创建了Play2应用程序使用的IntelliJ web文件夹，然后我采用了棱角分明CLI创建了一个角应用ui文件夹内的web文件夹，然后我跑ng build在ui文件夹中。 This created a dist folder I copied the contents of dist folder in web/public/ui Then I changed the index.scala.html to follows to use the Angular UI. 这创造了一个dist我复制文件夹的内容dist文件夹中web/public/ui然后，我改变了index.scala.html以如下方式使用角度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>

But I do not see the app-root UI (the default UI which Angular CLI creates) at localhost:9000 . 但是我在localhost:9000上看不到app-root用户界面（Angular CLI创建的默认用户界面）。 I see the blue background which my css creates but none of the Angular stuff. 我看到CSS创建的蓝色背景，但是没有Angular的东西。

If I run ng serve in web/ui then I see the Angular stuff at localhost:4200 . 如果我在web/ui运行ng serve ，那么我可以在localhost:4200看到Angular的东西。

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). 我想如果公共文件夹中有js文件，那么我应该能够在index.scala.html中访问它们（我想能够这样做，因为在浏览器开发人员控制台中看不到任何404消息）。

Update Though I dont see 404 errors,I see following errors in developer console but I am not sure if they are Angular related (there are loads of font errors!). 更新尽管我没有看到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)

Answer 1

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. 实际上，我的存储库中的粘合代码所做的事情与您所做的完全相同-我通过调用ng build（使它生成dist目录）让sbt构建angular（然后生成dist目录），然后告诉它将文件从dist移动到play的公共目录。 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. 我的粘合代码要做的第二件事是，它将Angular基于量角器的e2e测试工具集成到Play的测试中，以便sbt test ng和后端一起测试ng app。 I haven't updated it lately and as a result clone of my repo won't build without some fixes. 我最近没有更新它，因此，如果没有一些修复，我的存储库克隆将无法建立。

The errors you are seeing are related to default Content Security Policy used by Play Framework. 您看到的错误与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 . 从我看到的角度来看，angular试图从同一主机以外的其他来源获取内容，并且您的default-src策略设置为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). 您可能应该将受信任的内容源列入白名单，或者修改您的构建以将所有内容从Web提取到dist目录，这样就不必从主机以外的任何主机中获取任何东西（这是更安全的解决方案，但您不想在大多数情况下可以做到这一点）。

Here's some reading about CSP and Play's CSP configuration 这是有关CSP和Play的CSP配置的一些阅读资料

无法使用IntelliJ在Play应用中运行Angular UI

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-01-22 08:03:11

无法使用IntelliJ在Play应用中运行Angular UI

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-01-22 08:03:11

解决方案1
1 已采纳 2018-01-22 08:03:11