Angular 2 - Typescript Error:无法读取属性' length'当我运行ng-serve时未定义

时间:2017-03-06 14:29:10

标签: git angular drag-and-drop

以下是我的步骤:

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 git@github.com: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 --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 git@github.com:akserg / ng2-dnd.git 设置文件夹ng2-dnd。

当我运行服务器时,我不断收到此TypeScript错误。

无法读取属性'长度'未定义的 TypeError:无法读取属性' length'未定义的     在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

我已尝试使用操作系统并出现错误

以下是我在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 angular-cli@1.0.0-rc.1
 npm cache clean
 npm  install angular-cli@1.0.0-rc.0
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$ 

我的结构 enter image description here

今天在Windows上尝试,这是我的步骤 这是我尝试的确切步骤

3 个答案:

答案 0 :(得分:3)

由于找不到文件而发生此错误,而编译它时正在查找文件但未找到,因此它表示长度为0,最佳解决方案是添加 console.log(fileName); 在项目的 node_modules / typescript / typescript.js 中的createSourceFile()函数内部,我们可以看到哪个文件不存在,并且很容易调试错误。

主要是因为找不到environment.ts文件或 angular-cli.json

内的路径

答案 1 :(得分:1)

我得到了与你相同的配置并且它有效,只是有所不同,我使用角度包的先前次要版本,你使用2.4.9所以尝试降级到2.4.8。它应该工作,如果没有,那么粘贴错误。

<强> ADDED

有多种降级方式,我会提到最舒服的方式,即转到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"
    }

答案 2 :(得分:1)

使用@angular/cli代替angular-cli

npm install -g @angular/cli