Angular2应用程序在Play框架中不工作

下面，角度相关代码来自Joost'g代码。我想Joost用了活化剂。由于我在使用IntelliJ，我不得不做一些更改。总之，我的Angular2应用程序不能在IntelliJ和Play framework 2.6.x上运行

步骤：

• 我已经从Play的网站（2.6.x版本）下载了Scala启动的项目

• 我提取了zip并执行了sbt运行

  C:\...\play-scala-starter-example>sbt run
  

• 我验证了应用程序在localhost:9000上运行正常

• 然后我在IntelliJ中导入了这个项目。我收到一条消息，消息是

  Info:play framework 2.x的SBT编译在默认情况下被禁用

  问题1-我不明白它意味着什么

• 我在IntelliJ中构建并运行了该项目，以检查该项目是否仍在正常运行（选择编辑配置选项作为Play2应用程序）。是的

• 我在

  app

  文件夹中添加了一个

  assets

  文件夹，其中包含以下Angular2相关文件（大多数文件来自joost de vries项目。我对它们进行了一些修改以编译代码）

1） assets\app文件夹，其中包含3个文件-app.component.ts、app.module.ts、main.ts

app.component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'my-root',
    template: `
    <h1>{{title}}</h1>
      `
})
export class AppComponent {
    title = 'Tour of Heroes';
}

梅因酒店

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

2） assets\systemjs.config.js文件

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'assets/lib/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            'app': 'assets/app',

            // angular bundles
            '@angular/core': 'npm:angular__core/bundles/core.umd.js',
            '@angular/common': 'npm:angular__common/bundles/common.umd.js',
            '@angular/compiler': 'npm:angular__compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:angular__platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:angular__platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:angular__http/bundles/http.umd.js',
            '@angular/router': 'npm:angular__router/bundles/router.umd.js',
            '@angular/forms': 'npm:angular__forms/bundles/forms.umd.js',

            // other libraries
            'rxjs':                      'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                defaultExtension: 'js',
                meta: {
                    './*.js': {
                        loader: 'assets/systemjs-angular-loader.js'
                    }
                }
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

3） assets\systemjs-angular-loader.js文件

var templateUrlRegex = /templateUrl\s*:(\s*['"`](.*?)['"`]\s*)/gm;
var stylesRegex = /styleUrls *:(\s*\[[^\]]*?\])/g;
var stringRegex = /(['`"])((?:[^\\]\\\1|.)*?)\1/g;

module.exports.translate = function(load){
    if (load.source.indexOf('moduleId') != -1) return load;

    var url = document.createElement('a');
    url.href = load.address;

    var basePathParts = url.pathname.split('/');

    basePathParts.pop();
    var basePath = basePathParts.join('/');

    var baseHref = document.createElement('a');
    baseHref.href = this.baseURL;
    baseHref = baseHref.pathname;

    if (!baseHref.startsWith('/base/')) { // it is not karma
        basePath = basePath.replace(baseHref, '');
    }

    load.source = load.source
        .replace(templateUrlRegex, function(match, quote, url){
            var resolvedUrl = url;

            if (url.startsWith('.')) {
                resolvedUrl = basePath + url.substr(1);
            }

            return 'templateUrl: "' + resolvedUrl + '"';
        })
        .replace(stylesRegex, function(match, relativeUrls) {
            var urls = [];

            while ((match = stringRegex.exec(relativeUrls)) !== null) {
                if (match[2].startsWith('.')) {
                    urls.push('"' + basePath + match[2].substr(1) + '"');
                } else {
                    urls.push('"' + match[2] + '"');
                }
            }

            return "styleUrls: [" + urls.join(', ') + "]";
        });

    return load;
};

将build.sbt更改为以下内容（再次归功于Joost）

添加了tsconfig.json

{
  /* the configuration of the typescript compiler. See docs https://github.com/Microsoft/TypeScript/wiki/Compiler-Options
  The settings outDir and rootDir are managed by sbt-typescript.
  */
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    /* the following two settings are required for angular2 annotations to work*/
    "emitDecoratorMetadata": true,
    "experimentalDecorators":true,
    /* for reading your ts source while debugging from a browser */
    "sourceMap": true,
    "mapRoot": "/assets",
    "sourceRoot": "/assets",
    "rootDirs": ["app/assets","test/assets"],
    "baseUrl": ".",
    "paths": {
      "*": [
        "*",
        "target/web/node-modules/main/webjars/*",
        "target/web/node-modules/test/webjars/*"
      ]
    },
    /* noImplicitAny when you want your typescript to be fully typed */
    "strict":true,
    "strictNullChecks":false, //doesn't work yet with @angular RC4
    "outDir": "./target/ts",
    "lib": ["es6", "dom"],
    "typeRoots": ["target/web/node-modules/main/webjars/@types","target/web/node-modules/test/webjars/@types"]
  }
  /* the information below is not used by sbt-typescript. but you can use it if you want to run tsc -p .*/

}

添加了tslint.json

{
  "lintOptions": {
    "fix": true
  },
  "rules": {
    "no-console": false,

    "callable-types": true,
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "eofline": true,
    "forin": true,
    "import-blacklist": [true, "rxjs"],
    "import-spacing": true,
    "indent": [
      true,
      "spaces"
    ],
    "interface-over-type-literal": true,
    "label-position": true,
    "max-line-length": [
      true,
      140
    ],
    "member-access": false,
    "member-ordering": [
      true,
      "static-before-instance",
      "variables-before-functions"
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-variable": true,
    "no-empty": false,
    "no-empty-interface": true,
    "no-eval": true,
    "no-inferrable-types": [true, "ignore-params"],
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-string-throw": true,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": true,
    "no-unused-expression": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "prefer-const": true,
    "quotemark": [
      true,
      "single"
    ],
    "radix": true,
    "semicolon": [
      "always"
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "typeof-compare": true,
    "unified-signatures": true,
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ],


//    "directive-selector": [true, "attribute", "my", "camelCase"],
//    "component-selector": [true, "element", "my", "kebab-case"],
//    "use-input-property-decorator": true,
//    "use-output-property-decorator": true,
//    "use-host-property-decorator": true,
//    "no-input-rename": true,
//    "no-output-rename": true,
//    "use-life-cycle-interface": true,
//    "use-pipe-transform-interface": true,
//    "component-class-suffix": true,
//    "directive-class-suffix": true,
//    "no-access-missing-member": true,
//    "templates-use-public": true,
//    "invoke-injectable": true,


    "no-empty": true

  }
}

然后，我添加了在编辑配置中编译Typescript的选项（我修改了先前使用的Play2应用程序编辑配置）

然后我添加了Application.scala控制器（creditjoost）

然后我添加了index1.scala.html

@()
<!doctype html>
<html lang="en" data-framework="angular2">
    <head>
        <base href="/" />
        @* In this version of the application the typescript compilation is done by the play framework.
        The browser downloads .js files. *@
        <meta charset="utf-8">
        <title>Angular Tour of Heroes</title>
        <script type='text/javascript' src='@routes.Assets.versioned("lib/core-js/client/shim.min.js")'></script>
        <script type='text/javascript' src='@routes.Assets.versioned("lib/zone.js/dist/zone.js")'></script>
        <script type='text/javascript' src='@routes.Assets.versioned("lib/systemjs/dist/system.src.js")'></script>

        <script type='text/javascript' src='@routes.Assets.versioned("systemjs.config.js")'></script>
        <script type='text/javascript' src='@routes.Assets.versioned("assets/app/main.js")'></script>

        <!--script>
                System.import('assets/app/main.js').catch(function(err){ console.error(err); });
        </script-->
    </head>
    <body>
        <my-root>Loading....</my-root>
    </body>
</html>

应用程序不工作。我看到

正在加载..

。浏览器控制台上的错误是找不到

http://localhost:9000/assets/assets/app/main.js

---

我可以看到.js文件正在target\ts\app\assets\app文件夹中创建问题2-我做错了什么？

更新-我在公用文件夹下手动创建了一个应用程序文件夹，并复制了该文件夹中的.js文件（app.component.js、app.module.js和main.js）。现在出现错误（找不到main.js）我在浏览器窗口中看到了很多错误-

拒绝加载字体'data:font/woff；base64，elo4GbkcWhizkkaqqkeggcehw5hfkm2vrzjflyerb2mp5v3cdsu5gjwwwU9xg1hqxafamkzu='因为它违反了以下内容安全策略指令：“default src'self'”。请注意，未明确设置“字体src”，因此使用“默认src”作为备用方案。

将独立应用程序合并为从属应用程序通常不是一个好主意。您的客户端和服务器架构应尽可能分开。启动客户端应用程序并在仅客户端的静态项目中运行，一旦解决了它，它将是ea我想把它放到

index.scala.html

中。谢谢，但你的回答对我目前的情况没有帮助。这不是回答，而是评论。我建议你重新考虑你的方法。初学者工具包非常诱人，可以让你快速启动和运行，但它们往往会留下大量的技术债务，并可能导致失败在一个代码库中，它的维护人员不太了解。我想让客户端使用Angular2。服务器是play framework和scala。我不知道如何分别开发它们。更新-我在公用文件夹下手动创建了一个应用文件夹，并复制了该文件夹中的.js文件（app.component.js、app.module.js和main.js）。现在，错误出现了（找不到main.js）已消失，但我仍然看不到Angular应用程序。我在浏览器窗口中看到很多错误-

拒绝加载字体“data:font/woff；base64，elo4GBKCWhizKAQQKEGGCEHW5HFKM2VRZJFLYEBR2MP5V3CDSU5GJWWUDW9XG1HQXAFAMKZU=”，因为它违反了以下内容安全策略指令：“默认src‘self’”。请注意，未明确设置“字体src”，因此使用“默认src”作为备用方案。

将独立应用程序合并为从属应用程序通常不是一个好主意。您的客户端和服务器架构应尽可能分开。启动客户端应用程序并在仅客户端的静态项目中运行，一旦解决了它，它将是ea我想把它放到

index.scala.html

中。谢谢，但你的回答对我目前的情况没有帮助。这不是回答，而是评论。我建议你重新考虑你的方法。初学者工具包非常诱人，可以让你快速启动和运行，但它们往往会留下大量的技术债务，并可能导致失败在一个代码库中，它的维护人员并没有很好地理解。我想让客户端使用Angular2。服务器是play framework和scala。我不知道如何分别开发它们。

{
  "lintOptions": {
    "fix": true
  },
  "rules": {
    "no-console": false,

    "callable-types": true,
    "class-name": true,
    "comment-format": [
      true,
      "check-space"
    ],
    "curly": true,
    "eofline": true,
    "forin": true,
    "import-blacklist": [true, "rxjs"],
    "import-spacing": true,
    "indent": [
      true,
      "spaces"
    ],
    "interface-over-type-literal": true,
    "label-position": true,
    "max-line-length": [
      true,
      140
    ],
    "member-access": false,
    "member-ordering": [
      true,
      "static-before-instance",
      "variables-before-functions"
    ],
    "no-arg": true,
    "no-bitwise": true,
    "no-console": [
      true,
      "debug",
      "info",
      "time",
      "timeEnd",
      "trace"
    ],
    "no-construct": true,
    "no-debugger": true,
    "no-duplicate-variable": true,
    "no-empty": false,
    "no-empty-interface": true,
    "no-eval": true,
    "no-inferrable-types": [true, "ignore-params"],
    "no-shadowed-variable": true,
    "no-string-literal": false,
    "no-string-throw": true,
    "no-switch-case-fall-through": true,
    "no-trailing-whitespace": true,
    "no-unused-expression": true,
    "no-use-before-declare": true,
    "no-var-keyword": true,
    "object-literal-sort-keys": false,
    "one-line": [
      true,
      "check-open-brace",
      "check-catch",
      "check-else",
      "check-whitespace"
    ],
    "prefer-const": true,
    "quotemark": [
      true,
      "single"
    ],
    "radix": true,
    "semicolon": [
      "always"
    ],
    "triple-equals": [
      true,
      "allow-null-check"
    ],
    "typedef-whitespace": [
      true,
      {
        "call-signature": "nospace",
        "index-signature": "nospace",
        "parameter": "nospace",
        "property-declaration": "nospace",
        "variable-declaration": "nospace"
      }
    ],
    "typeof-compare": true,
    "unified-signatures": true,
    "variable-name": false,
    "whitespace": [
      true,
      "check-branch",
      "check-decl",
      "check-operator",
      "check-separator",
      "check-type"
    ],


//    "directive-selector": [true, "attribute", "my", "camelCase"],
//    "component-selector": [true, "element", "my", "kebab-case"],
//    "use-input-property-decorator": true,
//    "use-output-property-decorator": true,
//    "use-host-property-decorator": true,
//    "no-input-rename": true,
//    "no-output-rename": true,
//    "use-life-cycle-interface": true,
//    "use-pipe-transform-interface": true,
//    "component-class-suffix": true,
//    "directive-class-suffix": true,
//    "no-access-missing-member": true,
//    "templates-use-public": true,
//    "invoke-injectable": true,


    "no-empty": true

  }
}

package controllers

import play.api._
import play.api.mvc._

class Application extends InjectedController {

  def index = Action {

    Ok(views.html.index1())
  }
}

@()
<!doctype html>
<html lang="en" data-framework="angular2">
    <head>
        <base href="/" />
        @* In this version of the application the typescript compilation is done by the play framework.
        The browser downloads .js files. *@
        <meta charset="utf-8">
        <title>Angular Tour of Heroes</title>
        <script type='text/javascript' src='@routes.Assets.versioned("lib/core-js/client/shim.min.js")'></script>
        <script type='text/javascript' src='@routes.Assets.versioned("lib/zone.js/dist/zone.js")'></script>
        <script type='text/javascript' src='@routes.Assets.versioned("lib/systemjs/dist/system.src.js")'></script>

        <script type='text/javascript' src='@routes.Assets.versioned("systemjs.config.js")'></script>
        <script type='text/javascript' src='@routes.Assets.versioned("assets/app/main.js")'></script>

        <!--script>
                System.import('assets/app/main.js').catch(function(err){ console.error(err); });
        </script-->
    </head>
    <body>
        <my-root>Loading....</my-root>
    </body>
</html>

<script>
                System.import('assets/app/main.js').catch(function(err){ console.error(err); });
</script>

GET     /                           controllers.Application.index