search

angular / angular-cli

CLI tool for Angular
https://cli.angular.dev
MIT License
26.78k stars 11.98k forks source link

Need more error info - " Cannot read property 'length' of undefined TypeError: Cannot read property 'length' of undefined " #5132

Closed ragulmathawa closed 7 years ago

ragulmathawa commented 7 years ago

Please provide us with the following information:

OS?

Windows 7

Versions.

node --version v 6.9.4 ng version angular-cli: 1.0.0-beta.25.5 node: 6.9.4 os: win32 x64 @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.8 @angular/compiler-cli: 2.4.8

Repro steps.

https://github.com/ragulmathawa/cutom-ngx-charts

This is the git repo with code I tried.

The log given by the failure.

Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at createSourceFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:8980:109)
    at parseSourceFileWorker (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:8940:26)
    at Object.parseSourceFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:8899:26)
    at Object.createSourceFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:8727:29)
    at WebpackCompilerHost.getSourceFile (c:\workspace\code\new\sample\node_modules\@ngtools\webpack\src\compiler_host.js:210:27)
    at findSourceFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45859:29)
    at processSourceFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45790:27)
    at c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45901:17
    at Object.forEach (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:1115:30)
    at processReferencedFiles (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45899:16)
    at findSourceFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45884:21)
    at processImportedModules (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45994:25)
    at findSourceFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45888:17)
    at processImportedModules (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45994:25)
    at findSourceFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45888:17)
    at processImportedModules (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45994:25)
    at findSourceFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45888:17)
    at processImportedModules (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45994:25)
    at findSourceFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45888:17)
    at processImportedModules (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45994:25)
    at findSourceFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45888:17)
    at processImportedModules (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45994:25)
    at findSourceFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45888:17)
    at processImportedModules (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45994:25)
    at findSourceFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45888:17)
    at processSourceFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45790:27)
    at processRootFile (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45694:13)
    at c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45151:60
    at Object.forEach (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:1115:30)
    at Object.createProgram (c:\workspace\code\new\sample\node_modules\typescript\lib\typescript.js:45151:16)
    at AotPlugin._setupOptions (c:\workspace\code\new\sample\node_modules\@ngtools\webpack\src\plugin.js:124:28)
    at new AotPlugin (c:\workspace\code\new\sample\node_modules\@ngtools\webpack\src\plugin.js:23:14)
    at Object.exports.getWebpackNonAotConfigPartial (c:\workspace\code\new\sample\node_modules\angular-cli\models\webpack-build-typescript.js:25:13)
    at new NgCliWebpackConfig (c:\workspace\code\new\sample\node_modules\angular-cli\models\webpack-config.js:38:46)
    at Class.run (c:\workspace\code\new\sample\node_modules\angular-cli\tasks\serve-webpack.js:23:22)
    at c:\workspace\code\new\sample\node_modules\angular-cli\commands\serve.run.js:37:22
    at process._tickCallback (internal/process/next_tick.js:103:7)

Mention any other details that might be useful.

The actual error seems to be triggered while importing LineSeriesComponent from ngx-charts module. I need to extend the LineSeriesComponent of the ngx-charts. Even though I didn't declare CustomLineSeriesComponent in app module declarations it shows error. So it must be triggered from import.

I have seen several issues with same error but for different cases. The error must detailed and the possible cause of undefined variable should be found.

Several issues were closed by downgrading the angular-cli but we need to know the exact reason to prevent future issues.

RicardoVaranda commented 7 years ago

DUPE of #5053 #5051

ragulmathawa commented 7 years ago

Yes @RicardoVaranda I already seen those issues. But I think the reason causing these issus are different from each other. I can pin point where the error triggers it may help to solve the problem or get some reason for the problem. So i created a new issue. Here is my case,

The error causes because of this line import { CustomLineSeriesComponent} from './custom-chart/line-series.component';

In line-series.component.ts i am importing a component file from ngx-charts module to extend it. line no 6 import {LineSeriesComponent} from '@swimlane/ngx-charts/src/line-chart';

The import statement cause the error. when i remove this import statement it works good. So it must be something related to the file import or file creation.

I hope importing a component from an external module is a right one

Please take a look at the repo.

filipesilva commented 7 years ago

Dupe of https://github.com/angular/angular-cli/issues/5053. It seems like the same issue and it's better to consolidate them in a single place.

rafaelmelo007 commented 7 years ago

I temporary fixed the issue replacing the code line 14876 in "typescript.js"

from: var sourceFile = new SourceFileConstructor(263 / SourceFile /, /pos/ 0, / end / sourceText.length);

to: var sourceFile = new SourceFileConstructor(263 / SourceFile /, /pos/ 0, / end / sourceText ? sourceText.length : 20);

arlindonatal commented 7 years ago

Hello @rafaelmelo007.

I have some problem. After replace the code in "typescript.js" returns this error:

ERROR in Cannot read property 'getSourceFile' of undefined

tomups commented 7 years ago

I have this exact same problem as well. Happens when including a module I am developing, like to @ragulmathawa.

I have removed all external dependencies and file references from the module just to try, but I still get the same error.

I have also double checked that the main entry of package.json is correct.

If I change the line of typescript.js like @rafaelmelo007 suggested, then I get the same error as @arlindonatal above.

I'm really stumped as none of the error messages are really indicative of where the error might be.

klferreira commented 7 years ago

Put a console.log(fileName) in your createSourceFile() function and it will show you exactly where is the problem. Mine was environment.ts that was missing.

vernjensen commented 7 years ago

I am having the same problem. When I added console.log(fileName) in createSourceFile(), it seems the problem file is:

node_modules/@angular/common/index.d.ts

Why is it trying to transpile Angular files? How can I disable node_modules from being included in a build? (Or avoid this bug some other way?)

jdthorpe commented 7 years ago

For what it's worth, I got this error when referencing a d.ts file via: ///<reference path="./foo.d.ts" /> with an invalid path, which I discovered using @klferreira's suggestion.

chriswhite199 commented 7 years ago

After facing a similar unhelpful stack trace myself, i can tell you that for me the issue was a typo in an environments declaration in .angular-cli.json:

  "environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts",
    "e2e": "environments/environments.e2e.ts"
  }

Here the file was actually named environment.e2e.ts, so the extra 's' was the root cause. Granted my stack trace wasn't entirely the same as the original in this issue, but maybe running an strace on the build and filtering for any file-not-found responses will help you track down the root cause in this case.

lukaszciastko commented 7 years ago

As already suggested by @jdthorpe, I also had the very same issue due to ///<reference in my old code.

iturn commented 7 years ago

I had the case where environment.ts was missing, and therefore this error was trown.

ShellOliver commented 7 years ago

It happended with me twice, when I ve renamed a component and the other case when delete one. This was just hiding another error: I forgot rename or delete others imports that was using these files. After rename and restart with ng serve, it works again.

jellyforce commented 7 years ago

In my case:

After changing the component name i thought that was the problem (wrong references somewhere else in my code). but that was not the case.

i forgot that i also changed the names of this "element" in the component:

selector: 'app-uitgaven-form'

On my corresponding HTML-page i did NOT change this. There it was:

<app-bon-form></app-bon-form>

after changing it to:

<app-uitgaven-form></app-uitgaven-form>

my problem was solved

AdhamRammadan commented 6 years ago

In My Case I Tried To Get Data From Server And Display It's Lenght In html ...

Declar a Variable Wich The Data Saves In It By Array In Constructor like :

export class DashboardComponent { trainers: any;

constructor(){ this.trainers= []; } }

and in Html : {{ trainers.length }}

And Its Work :+1:

bebnev-pro commented 6 years ago

I have the same: ListComponent.html:19 ERROR Error: Cannot read property 'length' of null at viewWrappedDebugError (core.js:9795) at callWithDebugContext (core.js:15101) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14628) at ViewRef_.detectChanges (core.js:11605) at eval (core.js:5913) at Array.forEach () at ApplicationRef.tick (core.js:5913) at eval (core.js:5746) at ZoneDelegate.invoke (zone.js:392) at Object.onInvoke (core.js:4756)

Another pages have same errors. It working properly if user is authorised. I loss the moment when it starting to happens.

AdhamRammadan commented 6 years ago

i Hope i Can Help You But i Described My Personal Experiment,,, i Wish You Finally Find The Best Solution For Your Issue

Your Friend, Adham

2017-12-22 7:43 GMT+02:00 Roman Bebnev notifications@github.com:

I have the same: ListComponent.html:19 ERROR Error: Cannot read property 'length' of null at viewWrappedDebugError (core.js:9795) at callWithDebugContext (core.js:15101) at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14628) at ViewRef_.detectChanges (core.js:11605) at eval (core.js:5913) at Array.forEach () at ApplicationRef.tick (core.js:5913) at eval (core.js:5746) at ZoneDelegate.invoke (zone.js:392) at Object.onInvoke (core.js:4756)

Another pages have same error also but without stack trace.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/angular/angular-cli/issues/5132#issuecomment-353526589, or mute the thread https://github.com/notifications/unsubscribe-auth/AgCdbOT467F6KLyEV0DwwLnQUxyp1Eetks5tC0GYgaJpZM4MPhMX .

bebnev-pro commented 6 years ago

@AdhamRammadan thanks for response. I had been resolved my issue. Reason was: interceptor tried attach auth header with non-existing token (null). Hard to resolve because angular show view / html based error. Data not exists from wrong-authorised header request. In two words - it can be http / headers error.

niikoo commented 6 years ago

In my case i discovered that my environments.dev.ts file was missing, all of a sudden. Restored it from git and now this problem disappeared.

tmrdurgun commented 6 years ago

I spent some 2 hours but resolved with including environments directory to project after re-install from repo etc.

AhmedAlheesaei commented 6 years ago

@klferreira could you please explain your way in more details thanks in advance

VitalyName commented 6 years ago

I solved this problem (error during refactoring test). All is good for angular v4.3. and v4.4 1) Change @angular/cli" version 1.7.3 to 1.4.10 in package.json (latest for angular4) 2) rm -rf node_modules 3) npm install --no-optional

angular-automatic-lock-bot[bot] commented 5 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.