Question

我正在从事个人学习项目，我想在玩游戏框架中使用angular2，但我现在已经面临一些问题超过一周了。

我一直在尝试设置angular2，但我无法让它工作。

我尝试从angular2网页实现示例，但它不起作用。

这是我的工作存储库：https://github.com/viniolli/borrow-a-book

基本要求是：scala 2.11.7，npm和gulp。

如果您要我粘贴某些文件，请告诉它（我会粘贴更重要的文件）。

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

应用程序/视图/ main.scala.html

@(title: String)(content: Html)

<!DOCTYPE html>

<html lang="en">
    <head>
        <title>@title</title>
        <link rel="stylesheet" media="screen" href='@routes.Assets.versioned("stylesheets/main.css")'>
        <link rel='stylesheet' media="screen" href='@routes.Assets.versioned("stylesheets/materialize.css")'>
        <link rel="shortcut icon" type="image/png" href='@routes.Assets.versioned("images/favicon.png")'>
        <script src='@routes.Assets.versioned("javascripts/lib/es6-shim.js")'></script>
        <script src='@routes.Assets.versioned("javascripts/lib/angular2-polyfills.js")'></script>
        <script src='@routes.Assets.versioned("javascripts/lib/es6-module-loader.js")'></script>
        <script src='@routes.Assets.versioned("javascripts/lib/typescript.js")'></script>
        <script src='@routes.Assets.versioned("javascripts/lib/require.js")'></script>
        <script src='@routes.Assets.versioned("javascripts/lib/angular2.dev.js")'></script>
        <script src='@routes.Assets.versioned("javascripts/lib/system.js")'></script>
    </head>
    <body>
        <script>
          System.config({
            transpiler: 'typescript',
            typescriptOptions: { emitDecoratorMetadata: true },
            packages: {'assets/javascripts': {defaultExtension: 'ts'}}
          });
          System.import('assets/javascripts/app/components/first')
                .then(null, console.error.bind(console));
        </script>
        <my-app></my-app>
        @content
    </body>
</html>

公共/ Javascript角/应用/组件/ first.ts

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

的package.json

{
  "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"
  }
}

gulpfile.js

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"));
});

conf.routes

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 - 正在加载http://localhost:9000/angular2/core

404 - 正在加载http://localhost:9000/angular2/platform/browser

和Uncaught TypeError：System.register不是函数（Js控制台）

Answer 1

看起来有很多人，包括我，正在研究使用Angular2 + Play。以下链接帮助我启动并运行。

从Lightbend（以前的Typesafe）看看这个模板： lightbend post，github

这是与play框架集成的角度教程中的英雄示例应用程序：lightbend blog post，github

使用angular2播放框架

1 个答案: