Angular2 npm启动失败
我有一个函数来更改angular component类中DOM元素的类名。我得到一个错误 类型元素上不存在属性样式 在尝试构建时。生成存在，状态代码为2，然后npm SERVICE不运行 但是，如果我删除此函数，npm start可以正常工作，我将获得该页面。然后，一旦重新引入代码，一切正常 这是组件代码Angular2 npm启动失败,angular,typescript,npm-start,Angular,Typescript,Npm Start,我有一个函数来更改angular component类中DOM元素的类名。我得到一个错误 类型元素上不存在属性样式 在尝试构建时。生成存在，状态代码为2，然后npm SERVICE不运行 但是，如果我删除此函数，npm start可以正常工作，我将获得该页面。然后，一旦重新引入代码，一切正常 这是组件代码 import { Component , AfterViewInit } from '@angular/core'; declare var Handsontable: any; @Com
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
});
}
}
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\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 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 ]
0信息如果它以ok结尾，它就工作了
1详细cli['D:\\Program Files\\nodejs\\node.exe'，
1详细cli'D:\\Program Files\\nodejs\\node\u modules\\npm\\bin\\npm cli.js'，
1详细cli“运行”，
1详细cli“生成”]
2信息使用npm@4.2.0
3信息使用node@v7.9.0
4详细运行脚本['prebuild'、'build'、'postbuild']
5信息生命周期角度-quickstart@1.0.0~prebuild:angular-quickstart@1.0.0
6.角度-quickstart@1.0.0~prebuild：没有用于预构建的脚本，正在继续
7信息生命周期角度-quickstart@1.0.0~z~身材：棱角分明-quickstart@1.0.0
8冗长的生命周期-quickstart@1.0.0~build:生命周期中的不安全烫发为true
9冗长的生命周期-quickstart@1.0.0~build:PATH:D:\Program Files\nodejs\node\u modules\npm\bin\node-gyp-bin；D:\dropbox\dropbox\angular\fsiapp\node\u modules\.bin；D:\ProgramFiles\nodejs\node\U模块\npm\bin\node gyp bin；D:\dropbox\dropbox\angular\fsiapp\node\u 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:\ProgramFiles\Java\jdk1.8.0\U 91\bin；C:\ProgramFiles（x86）\Android\Android sdk；C:\ProgramFiles（x86）\Android\Android sdk\platform tools；D:\ProgramFiles\nodejs\；C:\ProgramFiles（x86）\WebEx\ptools02000000
10冗长的生命周期-quickstart@1.0.0~build:CWD:D:\dropbox\dropbox\angular\fsiapp
11.愚蠢的生命周期-quickstart@1.0.0~build:Args:['/d/s/c'，'tsc-psrc/']
12.有棱角的-quickstart@1.0.0~build:Returned:code:2信号：null
13信息生命周期角度-quickstart@1.0.0~build:无法执行生成脚本
14详细堆栈错误：角度-quickstart@1.0.0构建：`tsc-PSRC/`
14详细堆栈退出状态2
14 EventEmitter上的详细堆栈。（D:\Program Files\nodejs\node\u modules\npm\lib\utils\lifecycle.js:279:16）
14 emitTwo上的详细堆栈（events.js:106:13）
14 EventEmitter.emit上的详细堆栈（events.js:194:7）
14子进程上的详细堆栈。（D:\Program Files\nodejs\node\u modules\npm\lib\utils\spawn.js:40:14）
14 emitTwo上的详细堆栈（events.js:106:13）
14 ChildProcess.emit上的详细堆栈（events.js:194:7）
14 maybeClose的详细堆栈（internal/child_process.js:899:16）
14 Process.ChildProcess.\u handle.onexit处的详细堆栈（internal/child\u Process.js:226:5）
15冗长的pkgid-quickstart@1.0.0
16详细cwd:\dropbox\dropbox\angular\fsiapp
17错误窗口\u NT 6.1.7601
18错误argv“D:\\Program Files\\nodejs\\node.exe”“D:\\Program Files\\nodejs\\node\u modules\\npm\\bin\\npm cli.js”“运行”“生成”
19错误节点v7.9.0
20错误npm v4.2.0
21错误代码ELIFECYCLE
22错误2
23角度误差-quickstart@1.0.0构建：`tsc-PSRC/`
23错误退出状态2
24错误在角点失败-quickstart@1.0.0生成脚本“tsc-psrc/”。
24错误确保已安装最新版本的node.js和npm。
24错误如果您这样做，这很可能是angular quickstart软件包的问题，
24错误与npm本身无关。
24错误告诉作者此操作在您的系统上失败：
24错误tsc-p src/
24错误您可以通过以下方式获取有关如何打开此项目问题的信息：
24错误npm错误角度快速启动
24错误或如果不可用，您可以通过以下方式获取他们的信息：
24错误npm所有者ls角度快速启动
24错误上面可能有其他日志输出。
25详细退出[2，正确]
元素样式HTMLElementvar x = <HTMLElement> document.getElementsByClassName("maps");
最初，它看起来像是从DOM选择器“maps”返回的任何内容，都是一个元素集合，其中至少有一个元素没有属性“style”。我要做的第一件事是观察元素集合中的内容，在调试器中设置断点或跟踪它。对于一个标准的html dom选择器来说，这是真的吗，就像他们劫持它一样，就像他们劫持间隔之类的？如果是这样的话，呃…@TimConsolazio我还没挖到那么深的地方，先生：-）他们说“我们确实从IE的定义中产生了这些”，啊，终于，字体的真实面目被揭示了。IE标准执行，微软崛起！“只是个超集”我的屁股。一些IE 8工程师在黑暗中呆了五年，他高兴地咯咯笑着。我试着用var HTMLCollectionOf铸造，但仍然收到同样的错误。如果使用“any”，则会出现以下新错误：后续变量声明必须具有相同的类型。变量“x”必须是“any”类型，但此处的类型为“HTMLCollectionOf”。@AshishDhandharia但您没有执行我编写的操作
HTMLCollectionOf元素HTMLElementanyanyvar x = <HTMLElement> document.getElementsByClassName("maps");
var x: any = document.getElementsByClassName("maps");