我正在学习角度，我尝试制作一个调度程序应用程序。 我在这里找到了一个完美的模块：
https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/Overview/Angular/Light/
我创建了calendrierComponent，以及我所做的事情：
calendrier.component.css
/deep/ .options {
padding: 20px;
background-color: #f5f5f5;
margin-top: 20px;
}
/deep/ .caption {
font-size: 18px;
font-weight: 500;
}
/deep/ .option {
margin-top: 10px;
display: inline-block;
width: 19%;
}
/deep/ .switcher-mode {
width: 100%;
}
/deep/ .option > span {
margin-right: 10px;
}
/deep/ .option > .dx-selectbox {
display: inline-block;
vertical-align: middle;
}
calendrier.component.html
<dx-scheduler
style="height: 1000px; width: 1500px; display: block"
[dataSource]="appointments"
[currentDate]="currentDate"
startDateExpr="StartDate"
endDateExpr="EndDate"
textExpr="Text"
[views]="['agenda','month','workWeek']"
currentView="week"
[firstDayOfWeek]="1"
[startDayHour]="8"
[endDayHour]="19"
[resources]="resources"
></dx-scheduler>
calendrier.component.ts
import {NgModule, Component, enableProdMode } from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {Appointment, Resource, Service} from './calendrier.service';
import {DxSchedulerModule, DxCheckBoxModule, DxSelectBoxModule} from 'devextreme-angular';
if(!/localhost/.test(document.location.host)) {
enableProdMode();
}
@Component({
selector: 'calendrier',
templateUrl: 'calendrier/calendrier.component.html',
styleUrls: ['calendrier/calendrier.component.css'],
providers: [Service]
})
export class calendrierComponent {
appointmentsData: Appointment[];
currentDate: Date = new Date(2015, 4, 25);
resourcesData: Resource[];
switchModeNames: string[];
constructor(service: Service) {
this.switchModeNames = ["Tabs", "Drop-Down Menu"];
this.appointmentsData = service.getAppointments();
this.resourcesData = service.getResources();
}
}
@NgModule({
imports: [
BrowserModule,
DxSchedulerModule,
DxCheckBoxModule,
DxSelectBoxModule
],
declarations: [calendrierComponent],
bootstrap: [calendrierComponent]
})
export class calendrierModule {}
platformBrowserDynamic().bootstrapModule(calendrierModule)
calendrier.service.ts
import { Injectable } from "@angular/core";
export class Appointment {
text: string;
ownerId: number[];
startDate: Date;
endDate: Date;
}
export class Resource {
text: string;
id: number;
color: string;
}
let appointments: Appointment[] = [
{
text: "Website Re-Design Plan",
ownerId: [4],
startDate: new Date(2015, 4, 25, 9, 30),
endDate: new Date(2015, 4, 25, 11, 30)
}, {
text: "Stand-up meeting",
ownerId: [1, 2, 3, 4],
startDate: new Date(2015, 4, 25, 9, 0),
endDate: new Date(2015, 4, 25, 9, 15),
}
];
let resources: Resource[] = [
{
text: "Samantha Bright",
id: 1,
color: "#cb6bb2"
}, {
text: "John Heart",
id: 2,
color: "#56ca85"
}, {
text: "Todd Hoffman",
id: 3,
color: "#1e90ff"
}, {
text: "Sandra Johnson",
id: 4,
color: "#ff9747"
}
];
@Injectable()
export class Service {
getAppointments(): Appointment[] {
return appointments;
}
getResources(): Resource[] {
return resources;
}
}
这里也是我的 package.json
{
"name": "CroissantBoard",
"version": "0.0.1",
"license": "GFY",
"repository": {
"type": "git",
"url": "www.lol.com"
},
"scripts": {
"start": "webpack-dev-server --inline --colors --watch --display-error-details --display-cached --port 3001 --hot",
"test": "karma start"
},
"dependencies": {
"@angular/common": "2.0.0-rc.1",
"@angular/compiler": "2.0.0-rc.1",
"@angular/core": "2.0.0-rc.1",
"@angular/platform-browser": "^2.2.1",
"@angular/platform-browser-dynamic": "^2.2.1",
"@angular/router": "2.0.0-rc.1",
"devextreme": "^17.1.4",
"devextreme-angular": "^17.1.4",
"es6-shim": "^0.35.0",
"fullcalendar": "^3.4.0",
"primeng": "^4.1.0-rc.2",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "^0.19.27",
"zone.js": "^0.6.12"
},
"devDependencies": {
"devextreme": "~17.1.4",
"@angular/http": "^2.2.1",
"@angular/compiler-cli": "^2.2.1",
"@types/dot": "^1.0.29",
"@types/jasmine": "2.5.38",
"@types/jquery": "ts2.0",
"@types/mkdirp": "^0.3.29",
"@types/node": "^6.0.51",
"@types/yargs": "^6.3.2",
"codelyzer": "2.0.0-beta.4",
"del": "^2.2.0",
"dot": "^1.0.3",
"gulp": "^3.9.1",
"gulp-copy": "0.0.2",
"gulp-header": "^1.8.8",
"gulp-jasmine": "^2.3.0",
"gulp-merge-json": "^0.6.0",
"gulp-rename": "^1.2.2",
"gulp-shell": "^0.5.2",
"gulp-sourcemaps": "^2.0.0-alpha",
"gulp-tslint": "^7.0.1",
"gulp-typescript": "^3.0.1",
"gulp-uglify": "^1.5.3",
"http-server": "0.8.5",
"inflector-js": "^1.0.1",
"jszip": "^3.1.2",
"jasmine": "2.5.2",
"jasmine-core": "^2.4.1",
"jasmine-reporters": "2.2.0",
"karma": "^1.3.0",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-junit-reporter": "^1.1.0",
"karma-phantomjs-launcher": "^1.0.2",
"lite-server": "^2.2.0",
"merge-stream": "^1.0.0",
"mkdirp": "^0.5.1",
"remap-istanbul": "0.5.1",
"run-sequence": "^1.2.2",
"tslint": "^4.0.2",
"typescript": "^1.8.10",
"yargs": "^6.0.0",
"core-js": "^2.4.0",
"awesome-typescript-loader": "^0.17.0",
"phantomjs-prebuilt": "^2.1.7",
"raw-loader": "^0.5.1",
"source-map-loader": "^0.1.5",
"webpack": "^1.13.0",
"webpack-dev-server": "^1.14.1"
}
}
和我的 tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"suppressImplicitAnyIndexErrors":true
},
"compileOnSave": false,
"buildOnSave": false,
"exclude": [
"node_modules"
],
"filesGlob": [
"app/**/*.ts",
"typings/index.d.ts"
],
"atom": {
"rewriteTsconfig": false
}
}
所以我的问题是：如何解决这些错误：
Error Typescript Module '"/home/moonshine/desktop/test Schedule/angular2-website-routes/node_modules/@angular/core/index"' has no exported member 'NgModule'. 1:9
Error Typescript Module '"/home/moonshine/desktop/test Schedule/angular2-website-routes/node_modules/@angular/platform-browser/index"' has no exported member 'BrowserModule'. 2:9
Error Typescript Module '"/home/moonshine/desktop/test Schedule/angular2-website-routes/node_modules/@angular/platform-browser-dynamic/index"' has no exported member 'platformBrowserDynamic'.