Unable to run an Angular UI in Play app using Inte

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.

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. 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.

@(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. I see the blue background which my css creates but none of the Angular stuff.

If I run ng serve in web/ui then I see the Angular stuff at localhost:4200.

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).

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!).

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)

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.

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).

Here's some reading about CSP and Play's CSP configuration