1
Ich habe eine Funktion, um den Klassennamen für ein DOM-Element in meiner eckigen Komponentenklasse zu ändern. Ich bekomme einen Fehler,Angular2 npm Start schlägt fehl
Property style does not exists on type Element
beim Versuch zu bauen. Der Build existiert mit dem Statuscode 2 und der npm-Dienst wird nicht ausgeführt.
Aber wenn ich diese Funktion entfernen, funktioniert npm Start gut und ich bekomme die Seite. Dann, sobald der Code wieder eingeführt wird, funktioniert alles gut. Hier
ist der Komponentencode
import { Component , AfterViewInit } from '@angular/core';
declare var Handsontable: any;
@Component({
selector: 'fsiapp',
templateUrl: "/templates/dashboard.html"
})
export class FsiMainComponent {
openTab(tabName:any) {
var i;
var x = document.getElementsByClassName("maps");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
var x = document.getElementsByClassName("tab-button");
for (i = 0; i < x.length; i++) {
x[i].className = "tab-button";
}
document.getElementById(tabName+"b").className = "tab-button selected";
}
toggleEdit(){
if(document.getElementById("edit").innerHTML == "Edit") {
document.getElementById("edit").innerHTML = "Save";
document.getElementById("advName").className = "textbox";
document.getElementById("advRate").className = "textbox";
document.getElementById("advAddress").className = "textbox";
document.getElementById("advEmail").className = "textbox";
document.getElementById("advPhone").className = "textbox";
document.getElementById("advFax").className = "textbox";
} else {
document.getElementById("edit").innerHTML = "Edit";
document.getElementById("advName").className = "textboxread";
document.getElementById("advRate").className = "textboxread";
document.getElementById("advAddress").className = "textboxread";
document.getElementById("advEmail").className = "textboxread";
document.getElementById("advPhone").className = "textboxread";
document.getElementById("advFax").className = "textboxread";
}
this.readonly = !this.readonly
}
private readonly:boolean = true;
container: any;
hot: any;
container1: any;
hot1: any;
ngAfterViewInit() {
this.container = document.getElementById('example');
this.container1 = document.getElementById('example1');
this.hot = new Handsontable(this.container, {
data: Handsontable.helper.createSpreadsheetData(7, 3),
cells: function (row:any, col:any, prop:any) {
var cellProperties:any;
cellProperties.readOnly = true;
if (this.instance.getData()[row][col] === 'cell value here') {
// code based on cell value
}
if (row % 2 === 0) {
//changing style based on row number
cellProperties.renderer = function (instance:any, td:any, row:any, col:any, prop:any, value:any, cellProperties:any) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
//td.style.fontWeight = 'bold';
//td.style.color = 'green';
td.style.background = '#F1F1FF';
}
}
return cellProperties;
},
rowHeaders: false,
colHeaders: ["FSI Date","FSI Name","FSI Count"],
// performance tip: set constant size
width: 320,
height: 120,
colWidths: 100,
rowHeights: 5,
columnSorting: true,
sortIndicator: true,
// performance tip: turn off calculations
autoRowSize: false,
autoColSize: false
});
this.hot1 = new Handsontable(this.container1, {
data: Handsontable.helper.createSpreadsheetData(20, 6),
cells: function (row:any, col:any, prop:any) {
var cellProperties:any;
cellProperties.readOnly = true;
if (this.instance.getData()[row][col] === 'cell value here') {
// code based on cell value
}
if (row % 2 === 0) {
//changing style based on row number
cellProperties.renderer = function (instance:any, td:any, row:any, col:any, prop:any, value:any, cellProperties:any) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
//td.style.fontWeight = 'bold';
//td.style.color = 'green';
td.style.background = '#F1F1FF';
}
}
return cellProperties;
},
rowHeaders: false,
colHeaders: ["FSI Date","Advertiser","FSI Name", "Barcode","Coverage","Track Status"],
// performance tip: set constant size
width: 700,
height: 300,
colWidths: 115,
rowHeights: 5,
columnSorting: true,
sortIndicator: true,
// performance tip: turn off calculations
autoRowSize: false,
autoColSize: false
});
}
}
Hier ist der Fehler, den ich während der Build erhalten
> [email protected] build D:\dropbox\Dropbox\angular\fsiapp
> tsc -p src/
src/app/fsi-main.component.ts(15,9): error TS2339: Property 'style' does not exi
st on type 'Element'.
npm ERR! Windows_NT 6.1.7601
npm ERR! argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\
node_modules\\npm\\bin\\npm-cli.js" "run" "build"
npm ERR! node v7.9.0
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: `tsc -p src/`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build script 'tsc -p src/'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular-quickstart pa
ckage,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc -p src/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-quickstart
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular-quickstart
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! C:\Users\108630\AppData\Roaming\npm-cache\_logs\2017-04-14T18_15_22
_557Z-debug.log
Hier wird das npm Buildprotokoll
0 info it worked if it ends with ok
1 verbose cli [ 'D:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 silly lifecycle [email protected]~prebuild: no script for prebuild, continuing
7 info lifecycle [email protected]~build: [email protected]
8 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~build: PATH: D:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\dropbox\Dropbox\angular\fsiapp\node_modules\.bin;D:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;D:\dropbox\Dropbox\angular\fsiapp\node_modules\.bin;C:\oraclexe\app\oracle\product\11.2.0\server\bin;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\SysWOW64\config\systemprofile\AppData\Roaming\npm;C:\Program Files\Java\jdk1.8.0_91\bin;C:\Program Files (x86)\Android\android-sdk;C:\Program Files (x86)\Android\android-sdk\platform-tools;D:\Program Files\nodejs\;C:\Program Files (x86)\WebEx\PTools020000000
10 verbose lifecycle [email protected]~build: CWD: D:\dropbox\Dropbox\angular\fsiapp
11 silly lifecycle [email protected]~build: Args: [ '/d /s /c', 'tsc -p src/' ]
12 silly lifecycle [email protected]~build: Returned: code: 2 signal: null
13 info lifecycle [email protected]~build: Failed to exec build script
14 verbose stack Error: [email protected] build: `tsc -p src/`
14 verbose stack Exit status 2
14 verbose stack at EventEmitter.<anonymous> (D:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:279:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:194:7)
14 verbose stack at ChildProcess.<anonymous> (D:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:194:7)
14 verbose stack at maybeClose (internal/child_process.js:899:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd D:\dropbox\Dropbox\angular\fsiapp
17 error Windows_NT 6.1.7601
18 error argv "D:\\Program Files\\nodejs\\node.exe" "D:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
19 error node v7.9.0
20 error npm v4.2.0
21 error code ELIFECYCLE
22 error errno 2
23 error [email protected] build: `tsc -p src/`
23 error Exit status 2
24 error Failed at the [email protected] build script 'tsc -p src/'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the angular-quickstart package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error tsc -p src/
24 error You can get information on how to open an issue for this project with:
24 error npm bugs angular-quickstart
24 error Or if that isn't available, you can get their info via:
24 error npm owner ls angular-quickstart
24 error There is likely additional logging output above.
25 verbose exit [ 2, true ]
Zunächst sieht es so aus, als ob alles, was von Ihrem DOM-Selektor "maps" zurückgegeben wird, eine Sammlung von Elementen ist, von denen mindestens eines nicht über die Eigenschaft "style" verfügt. Die erste Sache, die ich tun würde, ist Auge, was in dieser Elementansammlung ist, einen Unterbrechungspunkt in Ihrem Debugger einstellen oder es ausfindig machen. –