Angular 2 - Typescript 错误：运行 ng-serve 时无法读取未定义的属性“length”
2017-03-06
9817
以下是我的步骤：
Install node latest v7
Install angular cli > npm install -g @angular/cli
Open CMD and via CMD navigate to Desktop > cd Desktop
Create an angular project via angular CLI > ng new testNg
Navigate to project > cd testing
Run ng serve to launch > ng serve ( response all good, page loaded)
Navigate to app to add the code from github > cd src/app
Clone from github using SSH into the app folder > git clone [email protected]:akserg/ng2-dnd.git
Run ng server to launch > ng serve ( errors)
Found out I had a missing typescript, so install typescript > npm install typescript –save
10.2 Added on type \Testing\node_modules\typescript\lib\typescript.js on line 8735 console.log(fileName); - that is inside the createSourceFile function.
Found out that rxjs not installed > npm install rxjs –save
Ng serve> still error
Ng build > still error
现在我已设置好新项目。
我获得了这个未构建为 node_mule 的 Angular 拖放库。我想设置用户在 github 中拥有的内容。
如果我执行 ng serve，一切都会完美编译和加载。
ng --version:
angular-cli: 1.0.0-beta.28.3
node: 7.7.1
os: win32 x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/compiler-cli: 2.4.9
因此我执行 cd src/app git clone [email protected] :akserg/ng2-dnd.git 已设置文件夹 ng2-dnd。
当我运行 ng server 时，我一直收到此 TypeScript 错误。
无法读取未定义的属性“长度” TypeError：无法读取未定义的属性“长度” 在 createSourceFile（C:\Users\ctarasovs\Desktop\Testing\node_modules\typescr ipt\lib\typescript.js:8980:109）
我发现有几个人遇到了这个问题，似乎不知道如何让它工作。是因为设置错误，还是缺少依赖项。有人有什么想法吗？
这是完整的错误日志
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback"
loader option has been deprecated - replace with "use"
Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
at createSourceFile (C:\Users\ctarasovs\Desktop\Testing\node_modules\typescr
ipt\lib\typescript.js:8980:109)
at parseSourceFileWorker (C:\Users\ctarasovs\Desktop\Testing\node_modules\ty
pescript\lib\typescript.js:8940:26)
at Object.parseSourceFile (C:\Users\ctarasovs\Desktop\Testing\node_modules\t
ypescript\lib\typescript.js:8899:26)
at Object.createSourceFile (C:\Users\ctarasovs\Desktop\Testing\node_modules\
typescript\lib\typescript.js:8727:29)
at WebpackCompilerHost.getSourceFile (C:\Users\ctarasovs\Desktop\Testing\nod
e_modules\@ngtools\webpack\src\compiler_host.js:210:27)
at findSourceFile (C:\Users\ctarasovs\Desktop\Testing\node_modules\typescrip
t\lib\typescript.js:45859:29)
at processSourceFile (C:\Users\ctarasovs\Desktop\Testing\node_modules\typesc
ript\lib\typescript.js:45790:27)
at C:\Users\ctarasovs\Desktop\Testing\node_modules\typescript\lib\typescript
.js:45901:17
at Object.forEach (C:\Users\ctarasovs\Desktop\Testing\node_modules\typescrip
t\lib\typescript.js:1115:30)
at processReferencedFiles (C:\Users\ctarasovs\Desktop\Testing\node_modules\t
ypescript\lib\typescript.js:45899:16)
at findSourceFile (C:\Users\ctarasovs\Desktop\Testing\node_modules\typescrip
t\lib\typescript.js:45884:21)
at processSourceFile (C:\Users\ctarasovs\Desktop\Testing\node_modules\typesc
ript\lib\typescript.js:45790:27)
at processRootFile (C:\Users\ctarasovs\Desktop\Testing\node_modules\typescri
pt\lib\typescript.js:45694:13)
at C:\Users\ctarasovs\Desktop\Testing\node_modules\typescript\lib\typescript
.js:45151:60
at Object.forEach (C:\Users\ctarasovs\Desktop\Testing\node_modules\typescrip
t\lib\typescript.js:1115:30)
at Object.createProgram (C:\Users\ctarasovs\Desktop\Testing\node_modules\typ
escript\lib\typescript.js:45151:16)
at AotPlugin._setupOptions (C:\Users\ctarasovs\Desktop\Testing\node_modules\
@ngtools\webpack\src\plugin.js:124:28)
at new AotPlugin (C:\Users\ctarasovs\Desktop\Testing\node_modules\@ngtools\w
ebpack\src\plugin.js:23:14)
at Object.exports.getNonAotConfig (C:\Users\ctarasovs\Desktop\Testing\node_m
odules\angular-cli\models\webpack-configs\typescript.js:26:13)
at new NgCliWebpackConfig (C:\Users\ctarasovs\Desktop\Testing\node_modules\a
ngular-cli\models\webpack-config.js:24:37)
at Class.run (C:\Users\ctarasovs\Desktop\Testing\node_modules\angular-cli\ta
sks\serve.js:31:29)
at C:\Users\ctarasovs\Desktop\Testing\node_modules\angular-cli\commands\serv
e.run.js:22:22
at process._tickCallback (internal/process/next_tick.js:109:7)
C:\Users\ctarasovs\Desktop\Testing>
这是相关链接：
https://github.com/angular/angular-cli/issues/5132 https://github.com/angular/angular-cli/issues/5053
我在 OS 上尝试过，也得到了一个错误
这是我在 package.json 文件中得到的内容
{
"name": "dnd-2.4",
"version": "1.0.0",
"description": "This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 1.0.0-rc.1.",
"main": "karma.conf.js",
"private": true,
"dependencies": {
"@angular/common": "^2.4.8",
"@angular/compiler": "^2.4.8",
"@angular/core": "^2.4.8",
"@angular/forms": "^2.4.8",
"@angular/http": "^2.4.8",
"@angular/platform-browser": "^2.4.8",
"@angular/platform-browser-dynamic": "^2.4.8",
"@angular/router": "^3.4.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.7.6"
},
"devDependencies": {
"@angular/cli": "1.0.0-rc.1",
"@angular/compiler-cli": "^2.4.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-coverage-istanbul-reporter": "^0.2.0",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.4.2",
"typescript": "~2.0.0"
},
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"author": "",
"license": "ISC"
}
这是我在我的终端中获取： 以下是我今天晚些时候在我的操作系统上执行的命令
npm init
npm uninstall -g angular-cli
npm uninstall angular-cli
npm uninstall [email protected]
npm cache clean
npm install [email protected]
ng --version
如何降级到 @angular/core: 2.4.8？
Chriss-iMac:dragNdrop-ng2.4.9.1 christarasovs$ ng --version
Your global Angular CLI version (1.0.0-rc.1) is greater than your local
version (1.0.0-rc.0). The local Angular CLI version is used.
To disable this warning use "ng set --global warnings.versionMismatch=false".
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
@angular/cli: 1.0.0-rc.0
node: 7.7.1
os: darwin x64
@angular/common: 2.4.9
@angular/compiler: 2.4.9
@angular/core: 2.4.9
@angular/forms: 2.4.9
@angular/http: 2.4.9
@angular/platform-browser: 2.4.9
@angular/platform-browser-dynamic: 2.4.9
@angular/router: 3.4.9
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.9
Chriss-iMac:dragNdrop-ng2.4.9.1 christarasovs$ ng serve
Your global Angular CLI version (1.0.0-rc.1) is greater than your local
version (1.0.0-rc.0). The local Angular CLI version is used.
To disable this warning use "ng set --global warnings.versionMismatch=false".
Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
at createSourceFile (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:8980:109)
at parseSourceFileWorker (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:8940:26)
at Object.parseSourceFile (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:8899:26)
at Object.createSourceFile (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:8727:29)
at WebpackCompilerHost.getSourceFile (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/@ngtools/webpack/src/compiler_host.js:210:27)
at findSourceFile (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:45859:29)
at processSourceFile (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:45790:27)
at /Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:45901:17
at Object.forEach (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:1115:30)
at processReferencedFiles (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:45899:16)
at findSourceFile (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:45884:21)
at processSourceFile (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:45790:27)
at processRootFile (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:45694:13)
at /Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:45151:60
at Object.forEach (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:1115:30)
at Object.createProgram (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/typescript/lib/typescript.js:45151:16)
at AotPlugin._setupOptions (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/@ngtools/webpack/src/plugin.js:124:28)
at new AotPlugin (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/@ngtools/webpack/src/plugin.js:23:14)
at _createAotPlugin (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/@angular/cli/models/webpack-configs/typescript.js:55:12)
at Object.exports.getNonAotConfig (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/@angular/cli/models/webpack-configs/typescript.js:70:19)
at NgCliWebpackConfig.buildConfig (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/@angular/cli/models/webpack-config.js:27:37)
at Class.run (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/@angular/cli/tasks/serve.js:37:98)
at check_port_1.checkPort.then.port (/Users/christarasovs/Desktop/dnd/dragNdrop-ng2.4.9.1/node_modules/@angular/cli/commands/serve.js:103:26)
at process._tickCallback (internal/process/next_tick.js:109:7)
Chriss-iMac:dragNdrop-ng2.4.9.1 christarasovs$
我的结构
今天在 Windows 上尝试过，以下是我的步骤 以下是我尝试的确切步骤
3个回答
出现此错误的原因是文件未找到，在编译时正在寻找文件但未找到，因此显示长度为 0，最好的解决方案是在项目中的 node_modules/typescript/typescript.js 中的 createSourceFile() 函数内添加 console.log(fileName); ，这样我们就可以看到哪个文件不存在，并且很容易调试错误。
主要是因为 environment.ts 文件未找到或 angular-cli.json 中的路径未找到
Ashokkumar Ramasamy
2017-12-25
我得到了和你相同的配置，它可以工作，只是有一点不同，我使用的是 angular 包的先前小版本，你使用的是
2.4.9
，所以尝试降级到
2.4.8
。它应该可以工作，如果不行，请粘贴错误。
添加
有多种降级方式，我会提到对我来说最舒服的方式，即转到
package.json
，更改版本并运行
npm install
。
如果你想确保使用的是最新版本，在运行 npm install 之前，删除 node_modules 文件夹即可。
添加 2
"dependencies": {
"@angular/common": "2.4.8",
"@angular/compiler": "2.4.8",
"@angular/compiler-cli": "2.4.8",
"@angular/core": "2.4.8",
"@angular/forms": "2.4.8",
"@angular/http": "2.4.8",
"@angular/platform-browser": "2.4.8",
"@angular/platform-browser-dynamic": "2.4.8",
"@angular/router": "3.4.8",
"@ng-bootstrap/ng-bootstrap": "1.0.0-alpha.16",
"angular-cli": "1.0.0-beta.28.3",
"animate.css": "3.5.2",
"automapper-ts": "1.8.1",
"awesome-typescript-loader": "3.0.8",
"bootstrap": "4.0.0-alpha.5",
"chart.js": "2.5.0",
"core-js": "2.4.1",
"font-awesome": "^4.7.0",
"karma-phantomjs-launcher": "1.0.2",
"ng2-charts": "1.5.0",
"ng2-pagination": "1.0.1",
"reflect-metadata": "0.1.8",
"rxjs": "5.2.0",
"signalr": "2.2.1",
"systemjs": "0.19.39",
"ts-helpers": "1.1.1",
"typescript": "2.2.1",
"underscore": "1.8.3",
"zone.js": "0.7.2"
},
"devDependencies": {
"@types/core-js": "0.9.35",
"@types/jasmine": "2.5.41",
"@types/underscore": "1.7.36",
"codelyzer": "3.0.0-beta.3",
"del": "2.2.1",
"gulp": "3.9.1",
"gulp-fail": "1.0.5",
"gulp-sass": "2.3.2",
"gulp-zip": "3.0.2",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.0.2",
"karma-remap-istanbul": "0.2.1",
"protractor": "4.0.13",
"ts-node": "1.2.1",
"tslint": "4.5.1"
}
Alejandro Lora
2017-03-06
使用
@angular/cli
代替
angular-cli
:
npm install -g @angular/cli
El houcine bougarfaoui
2017-03-06