Я работаю над личным учебным проектом, и я хочу использовать angular2 с платформой для игр, но я больше столкнулся с некоторыми проблемами уже более недели.Play framework with angular2
Я пытался настроить angular2, но я не могу заставить его работать.
Я попытался реализовать пример с веб-страницы angular2, но это не срабатывало.
Вот мой рабочий репозиторий: https://github.com/viniolli/borrow-a-book
Basic requiremant являются: 2.11.7 Scala, НПМ и глотком.
Если вы хотите, чтобы я вставлял определенные файлы, сообщите об этом (я собираюсь вставить только более важные).
Если у вас есть какие-либо советы или внешняя статья, не стесняйтесь публиковать его.
приложение/просмотров/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>
общественных/JavaScripts/приложения/компоненты/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)
Обычный Для начала вам нужно найти шаблон активатора для ваших фреймворков. Вы видели https://www.lightbend.com/activator/template/play-angular2-typescript? Может быть, это помогает. –