Playframework 使用angular2播放框架

我正在进行个人学习项目，我想使用angular2和play框架，但我已经面临一些问题一个多星期了

我一直在尝试设置angular2，但我无法使其工作

我曾尝试从angular2网页实现这个示例，但并没有成功

这是我的工作存储库：

基本要求是：scala 2.11.7、npm和gulp

如果你想让我粘贴某些文件，请告诉我（我只粘贴更重要的文件）

如果您有任何建议或外部文章，请随时发布

app/views/main.scala.html

gulpfile.js

形态路线

GET     /                               controllers.Application.index
GET     /materialize                    controllers.Application.materializeDemo
GET     /registration.html              controllers.Application.registrationGet

GET     /assets/*file                   controllers.Assets.versioned(path="/public", file: Asset)

启动应用程序后，我遇到一些问题：

404-装载

404-装载

---

还有未捕获的TypeError:System.register不是一个函数（Js控制台）

看起来有相当多的人，包括我在内，正在考虑使用Angular2+Play。下面的链接帮助我站起来跑步

请查看Lightbend（以前是Typesafe）的此模板： 莱特本德

---

这是angular教程中与play framework:lightbend集成的heroes示例应用程序。

通常的入门方法是为您的框架找到激活器模板。你看到了吗？也许有帮助。

import {Component} from "angular2/core";
import {bootstrap} from "angular2/platform/browser";

@Component({
    selector: "my-app",
    template: "<h1>My First Angular 2 App</h1>"
})
export default class AppComponent { }

bootstrap(AppComponent);

{
  "dependencies": {
    "angular2": "2.0.0-beta.9",
    "del": "^2.2.0",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.35.0",
    "gulp": "^3.9.1",
    "gulp-typescript": "^2.12.1",
    "materialize-css": "0.97.5",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "systemjs": "0.19.24",
    "zone.js": "0.5.15"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.1.0",
    "typescript": "^1.8.7",
    "typings": "^0.7.5"
  }
}

const gulp = require('gulp');
const del = require('del');
const ts = require('gulp-typescript');
const tscConfig = require('./tsconfig.json');


// clean the contents of the distribution directory
gulp.task('clean', function () {
  return del('dist/**/*');
});

gulp.task('libs-js', function () {
    return gulp.src([
          "node_modules/angular2/bundles/angular2.dev.js",
          "node_modules/angular2/bundles/angular2-polyfills.min.js",
          "node_modules/angular2/core.js",
          "node_modules/angular2/platform/browser.js",
          "node_modules/traceur/bin/traceur-runtime.js",
          "node_modules/es6-module-loader/dist/es6-module-loader.js",
          "node_modules/systemjs/dist/system.js",
          "node_modules/es6-shim/es6-shim.js",
          "node_modules/rxjs/Rx.js",
          "node_modules/typescript/lib/typescript.js",
          "node_modules/materialize-css/dist/js/materialize.js",
          "node_modules/requirejs/require.js"
        ])
      .pipe(gulp.dest('public/javascripts/lib'));
});

gulp.task('libs-css', function(){
    return gulp.src([
        "node_modules/materialize-css/dist/css/materialize.css"
    ])
    .pipe(gulp.dest("public/stylesheets"));
});

GET     /                               controllers.Application.index
GET     /materialize                    controllers.Application.materializeDemo
GET     /registration.html              controllers.Application.registrationGet

GET     /assets/*file                   controllers.Assets.versioned(path="/public", file: Asset)