'getting error 'Cannot read property 'length' of undefined' while running ng serve in angular2 application

while running angular2 application using angular-cli command ng-serve i am getting the following issue

[email protected] start C:\Users\padmavathi\Downloads\phototype-development\web\dashboard ng serve

Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at createSourceFile (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\typescript\lib\typescript.js:8980:109)
    at parseSourceFileWorker (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\typescript\lib\typescript.js:8940:26)
    at Object.parseSourceFile (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\typescript\lib\typescript.js:8899:26)
    at Object.createSourceFile (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\typescript\lib\typescript.js:8727:29)
    at new TypeScriptFileRefactor (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\@ngtools\webpack\src\refactor.js:25:35)
    at Object.resolveEntryModuleFromMain (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\@ngtools\webpack\src\entry_resolver.js:108:18)
    at AotPlugin._setupOptions (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\@ngtools\webpack\src\plugin.js:129:58)
    at new AotPlugin (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\@ngtools\webpack\src\plugin.js:37:14)
    at Object.exports.getWebpackNonAotConfigPartial (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\angular-cli\models\webpack-build-typescript.js:20:13)
    at new NgCliWebpackConfig (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\angular-cli\models\webpack-config.js:23:42)
    at Class.run (C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\angular-cli\tasks\serve-webpack.js:20:22)
    at C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\node_modules\angular-cli\commands\serve.js:102:26
    at process._tickCallback (internal/process/next_tick.js:103:7)

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
npm ERR! node v6.9.1
npm ERR! npm  v3.10.8
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: `ng serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'ng serve'.
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 dashboard package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     ng serve
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs dashboard
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls dashboard
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\padmavathi\Downloads\phototype-development\web\dashboard\npm-debug.log.

please help me to resolve this issue. thanks in advance.

node.jsangulartypescriptangular-cli


Solution 1:[1]

Had the same issue.

I added

 if (!sourceText) console.log("createSourceFile " + fileName);

in createSourceFile function located under \node_modules\typescript\lib\typescript.js

running ng build again, logged all files. I was managed to see what file is missing, and handle it.

Solution 2:[2]

We had the same error (Cannot read property 'length' of undefined [...] at createSourceFile [...]) when we accidentally deleted environment.prod.ts during a refactoring process. Restoring this file solved our problem.

PS. There is also an issue on Github reported:

Solution 3:[3]

quoting from github (because i don't know how to link directly to the reply :">)

I think in many cases this issue is caused when typescript tries to process a file that doesn't exist. In one of my projects it was a missing .d.ts file. In another it was a missing environment ts file. Adding a console.log(fileName) in the beginning of the createSourceFile function at node_modules/typescript/lib/typescript.js helped me pinpoint the specific file. Remember to remove the changes or just reinstall your node_modules.

source: https://github.com/angular/angular-cli/issues/5053

This did the trick for me. The last console.log showed the troublesome file

Solution 4:[4]

the easy way to detect error is running tsc -p < file_tsconfig.json_path > you will see full error during compile source code.

Solution 5:[5]

I ran into this issue as well. I checked all environment.ts files and additional file paths in angular-cli.json

Angular refused to rebuild after I made any change. I tried the following before resorting to the fix below:

  • Clearing out the node_modules using rm -rf node_modules/* and then doing a fresh npm install

  • Re-cloning the entire repo

Finally the only thing that resolved my issue was downgrading the @ngtools/webpack plugin from version 1.9.0 to 1.8.2

I am not sure if this is the right fix, but it worked for me. I'm adding this comment here because it might save someone some time down the line.

My configuration:

Mac OSX 10.11.6
"@angular/cli": "1.4.2"
"typescript": "~2.3.3"
"webpack": "~3.5.5"

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 rmcsharry
Solution 2 Thomas
Solution 3 Stefan Turcanu
Solution 4 Sam Lu
Solution 5 halfer

Related Questions