0
Я пытаюсь получить PrimeNG расписание, чтобы работать, и это то, что я получил:Angular2 Primeng график не делает
package.json:
{
"name": "angular2-seed",
"version": "1.0.0",
"scripts": {
"lite": "lite-server",
"postinstall": "typings install",
"gulp": "gulp",
"start": "concurrently \"npm run gulp\" \"npm run lite\" ",
"typings": "typings"
},
"license": "MIT",
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/http": "2.0.0-rc.1",
"@angular/platform-browser": "2.0.0-rc.1",
"@angular/platform-browser-dynamic": "2.0.0-rc.1",
"@angular/router": "2.0.0-rc.1",
"@angular/router-deprecated": "2.0.0-rc.1",
"@angular/upgrade": "2.0.0-rc.1",
"es6-shim": "^0.35.0",
"primeng": "^1.0.0-beta.8",
"primeui": "^4.1.12",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-clean-css": "^2.0.6",
"gulp-sass": "^2.3.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-typescript": "^2.10.0",
"lite-server": "^2.1.0",
"systemjs-builder": "^0.15.16",
"typings": "^0.8.1",
"fullcalendar": "^2.7.2",
"jquery": "^2.2.4",
"jquery-ui": "^1.10.5"
}
}
systemjs.config.js:
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'rxjs': 'node_modules/rxjs',
'@angular': 'node_modules/@angular',
'primeng': 'node_modules/primeng'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'primeng': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/testing',
'@angular/upgrade'
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
vendor.js: (Не уверен, что если мне нужен этот файл):
import 'script!jquery/dist/jquery.min.js';
import 'script!moment/moment.js';
import 'script!fullcalendar/dist/fullcalendar.js';
index.html:
<!doctype>
<html>
<head>
<base href="/">
<title>Angular 2 Boilerplate</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<link rel="stylesheet" href="src/css/app.css">
</head>
<body>
<my-app>Loading...</my-app>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<!--<script src="app/bundle.js"></script>-->
</body>
</html>
app.component.ts:
import {Component, ngOnInit} from '@angular/core';
import {Schedule} from 'primeng/primeng';
@Component({
selector: 'my-app',
template: `
<p-schedule [events]="events"></p-schedule>
`,
directives: [Schedule],
})
export class AppComponent {
events: any[];
headerConfig: any;
ngOnInit() {
this.headerConfig = {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
};
}
ngOnInit() {
this.events = [
{
"title": "All Day Event",
"start": "2016-01-01"
},
{
"title": "Long Event",
"start": "2016-01-07",
"end": "2016-01-10"
},
{
"title": "Repeating Event",
"start": "2016-01-09T16:00:00"
},
{
"title": "Repeating Event",
"start": "2016-01-16T16:00:00"
},
{
"title": "Conference",
"start": "2016-01-11",
"end": "2016-01-13"
}
];
}
}
Я не подвожу никаких ошибок в консоли, но нет календаря либо, не то, что я мне хватает или что не так?
вы можете https://plnkr.co/ это? –