Angular2 npm 启动失败
Angular2 npm start fails
我有一个功能可以更改 angular 组件 class 中 DOM 元素的 class 名称。我收到一个错误
Property style does not exists on type Element
尝试构建时。构建存在，状态代码为 2，然后 npm serve 没有 运行.
但是，如果我删除此功能，npm start 工作正常并且我得到了页面。然后重新引入代码，一切正常。
这里是组件代码
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
});
}
}
这是我在构建过程中遇到的错误
> angular-quickstart@1.0.0 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! angular-quickstart@1.0.0 build: `tsc -p src/`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the angular-quickstart@1.0.0 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:\Users8630\AppData\Roaming\npm-cache\_logs17-04-14T18_15_22
_557Z-debug.log
这是 npm 构建日志
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 npm@4.2.0
3 info using node@v7.9.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle angular-quickstart@1.0.0~prebuild: angular-quickstart@1.0.0
6 silly lifecycle angular-quickstart@1.0.0~prebuild: no script for prebuild, continuing
7 info lifecycle angular-quickstart@1.0.0~build: angular-quickstart@1.0.0
8 verbose lifecycle angular-quickstart@1.0.0~build: unsafe-perm in lifecycle true
9 verbose lifecycle angular-quickstart@1.0.0~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.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 angular-quickstart@1.0.0~build: CWD: D:\dropbox\Dropbox\angular\fsiapp
11 silly lifecycle angular-quickstart@1.0.0~build: Args: [ '/d /s /c', 'tsc -p src/' ]
12 silly lifecycle angular-quickstart@1.0.0~build: Returned: code: 2 signal: null
13 info lifecycle angular-quickstart@1.0.0~build: Failed to exec build script
14 verbose stack Error: angular-quickstart@1.0.0 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 angular-quickstart@1.0.0
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 angular-quickstart@1.0.0 build: `tsc -p src/`
23 error Exit status 2
24 error Failed at the angular-quickstart@1.0.0 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 ]
根据https://github.com/Microsoft/TypeScript/issues/3263
Element没有 style 属性.
来源：https://developer.mozilla.org/en-US/docs/Web/API/Element
您可以将变量转换为 HTMLElements：
var x = <HTMLElement> document.getElementsByClassName("maps");
或者如果您不需要类型检查和自动完成，则只使用 any。
var x: any = document.getElementsByClassName("maps");
我有一个功能可以更改 angular 组件 class 中 DOM 元素的 class 名称。我收到一个错误
Property style does not exists on type Element
尝试构建时。构建存在，状态代码为 2，然后 npm serve 没有 运行.
但是，如果我删除此功能，npm start 工作正常并且我得到了页面。然后重新引入代码，一切正常。
这里是组件代码
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
});
}
}
这是我在构建过程中遇到的错误
> angular-quickstart@1.0.0 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! angular-quickstart@1.0.0 build: `tsc -p src/`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the angular-quickstart@1.0.0 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:\Users8630\AppData\Roaming\npm-cache\_logs17-04-14T18_15_22
_557Z-debug.log
这是 npm 构建日志
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 npm@4.2.0
3 info using node@v7.9.0
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle angular-quickstart@1.0.0~prebuild: angular-quickstart@1.0.0
6 silly lifecycle angular-quickstart@1.0.0~prebuild: no script for prebuild, continuing
7 info lifecycle angular-quickstart@1.0.0~build: angular-quickstart@1.0.0
8 verbose lifecycle angular-quickstart@1.0.0~build: unsafe-perm in lifecycle true
9 verbose lifecycle angular-quickstart@1.0.0~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.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 angular-quickstart@1.0.0~build: CWD: D:\dropbox\Dropbox\angular\fsiapp
11 silly lifecycle angular-quickstart@1.0.0~build: Args: [ '/d /s /c', 'tsc -p src/' ]
12 silly lifecycle angular-quickstart@1.0.0~build: Returned: code: 2 signal: null
13 info lifecycle angular-quickstart@1.0.0~build: Failed to exec build script
14 verbose stack Error: angular-quickstart@1.0.0 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 angular-quickstart@1.0.0
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 angular-quickstart@1.0.0 build: `tsc -p src/`
23 error Exit status 2
24 error Failed at the angular-quickstart@1.0.0 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 ]
根据https://github.com/Microsoft/TypeScript/issues/3263
Element没有 style 属性.
来源：https://developer.mozilla.org/en-US/docs/Web/API/Element
您可以将变量转换为 HTMLElements：
var x = <HTMLElement> document.getElementsByClassName("maps");
或者如果您不需要类型检查和自动完成，则只使用 any。
var x: any = document.getElementsByClassName("maps");