Angular-cli: @ngtools/webpack: Cannot read property 'forEach' of undefined

[conor-mac-aoidh]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.0
node: 7.7.1
os: linux x64
@angular/animations: 4.0.0
@angular/common: 4.0.0
@angular/compiler: 4.0.0
@angular/compiler-cli: 4.0.0
@angular/core: 4.0.0
@angular/forms: 4.0.0
@angular/http: 4.0.0
@angular/platform-browser: 4.0.0
@angular/platform-browser-dynamic: 4.0.0
@angular/platform-server: 4.0.0
@angular/router: 4.0.0
@angular/cli: 1.0.0

Repro steps.

• run ng serve

I cannot give exact steps to reproduce.. but my app was working fine on angular 4.0.0-rc.6 and angular-cli 1.0.0-rc.4. As of today I am getting the error below. I have tried reverting to the older versions but the error persists.

I note that the error is thrown in @ngtools/webpack and that there was an update to this 14 hours ago.

The log given by the failure.

ERROR in ./src/app/app.component.ts
Module build failed: TypeError: Cannot read property 'forEach' of undefined
    at Promise.resolve.then.then.then (/home/user/Documents/src/project/my_app/assets/node_modules/@ngtools/webpack/src/loader.js:350:40)
    at process._tickCallback (internal/process/next_tick.js:109:7)
 @ ./src/app/index.ts 1:0-32
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

Mention any other details that might be useful.

Contents of app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-header></app-header>
    <app-navigation></app-navigation>
    <app-body></app-body>
    <app-footer></app-footer>
  `,
  styleUrls: []
})
export class AppComponent { }

[gajusp]

Module build failed: TypeError: Cannot read property 'forEach' of undefined
at Promise.resolve.then.then.then
\node_modules\@ngtools\webpack\src\loader.js:350:40)
at process._tickCallback (internal/process/next_tick.js:103:7)
@ ./src/app/app.module.ts 43:0-89
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

i am also facing the same issue in npm install (@ngtools)
But when i reverted to old "@ngtools" it is working fine.
seems there is change in new @ngtools, which cause to crash build.

plz help

[blakejolley]

Remove any empty styleUrls from your components @Component declarations. This should resolve the issue.
@conor-mac-aoidh @gajusp

[brandon-applied]

FYI. I had the same issue after rebuilding my npm_modules folder and was still using NG 2.4.9. It seems that even the older "stable" build references the latest @ngtools package - so reverting to previous builds had no impact. Any time i rebuilt my npm_modules it got the latest @ngtools no matter what version of the CLI I put in my package.json.

In any case the suggested fix worked.

[conor-mac-aoidh]

@blakejolley That fix is working for me thanks, I will close the issue.

[DaveMBush]

Just to make this more clear ...

You are looking for styleUrl: [] ... make sure you check your tests as well as your components

[brandon-applied]

I think this issue should still be open - this is a bug. There is a workaround - but compilation should not fail because of an empty array. An empty array is a valid array and thus configuration using it should be valid.

[conor-mac-aoidh]

@brandon-applied Good point, I will reopen

[g4321]

Hi, I had a same issue just i have removed empty styleUrls inside decorator the component. make sure you don't have empty styleUrls in any component in your application like:
@Component({
selector:'app-server',
templateUrl:'./server.component.html',
styleUrls:[] // remove it
})
after removing it will work fine.
Thank you

[devendrabhandari]

Same error occurred at the time of compilation, So I removed styleUrls:[] line from component, it worked perfectly But I was wondering why?

styleUrls:[]

As per my understanding, It means an empty & valid array. so why we are getting error, It should be fix in the core.

[Gawdadi]

Restart your project .It will work .
It works for me

[VlnRbn]

I had similar issue ,Cannot read property 'forEach' of undefined, for the code below

private observer : Observer[] ;

`next(data: any) {
    this.observers.forEach(obs => obs.next(data))
}`

fixed it by changing
private observer : Observer[] = []

[gabrielnemeth]

For me the issue was that I placed the transition outside the trigger:

trigger('fabDial', [
        state('visible', style({
            bottom: '50px'
        })),
        state('hidden', style({
            bottom: '0px',
            display: 'none'
        }))
    ]),
    transition('* => *', animate('100ms ease-in')) // This should be inside trigger

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete due to changes in the recent releases. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot[bot]]

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._}