Angular-cli: ERROR in Cannot use 'in' operator to search for 'providers' in null

[penleychan]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

WIndows 10 Pro

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.24
node: 6.3.1
os: win32 x64
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.4.1
@angular/compiler-cli: 2.4.1

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

Brand new project created with CLI version beta 24. Adding module loading via routing loadChildren

The log given by the failure.

Normally this include a stack trace and some more information.

ERROR in Cannot use 'in' operator to search for 'providers' in null

Mention any other details that might be useful.

Issues appears when using lazy loading, for example I have HomeModule, if I were to import that to app.module.ts, and have my routing configured as:

app.routing.ts

const appRoutes: Routes = [
  {
    path: '',
    redirectTo: '/home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: './home/home.module'
  }
];

export const Routing = RouterModule.forRoot(appRoutes);

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    HomeModule,
    Routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then the ERROR in Cannot use 'in' operator to search for 'providers' in null appears.

---

Thanks! We'll be in touch soon.

[clydin]

The module's class should be specified after the file path.
Give the following a try:

loadChildren: './home/home.module#HomeModule'

[penleychan]

Hi,

Thanks for the quick response. The error is still present after adding the module class to file path.

[clydin]

Also try removing the module import for HomeModule from AppModule. A module should be either lazy loaded or eagerly loaded but not both.

[penleychan]

Hmm for some reason that didn't work. I added back the HomeModule back to AppModule.
And removed 'default' from HomeModule class to:
export class HomeModule { }

After that change it works, error is gone.

Thanks for the help clydin!

[viztastic]

@penleychan @clydin I still experience the same issue, I definitely don't use 'default' infront of my classes and the main issue is that I don't even get an indicator as to what file is causing this.

Could we kindly re-open the issue?

[raviganesh12]

I am having the same issue.

I have only app module & loading the my components as routes from there.

my app.module.ts
`import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {CommonModule} from "@angular/common";
import { FormsModule,ReactiveFormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { BroadcastComponent } from './components/broadcast/broadcast.component';
import { ProgramDetailsComponent } from './components/vod/program-details/program-details.component';
import { MyGridComponent } from './components/my-grid/my-grid.component';
import { BlockUIModule,AccordionModule,AutoCompleteModule,ChipsModule,MenubarModule,ToggleButtonModule,PanelModule,TooltipModule,TreeModule,TabViewModule,TreeNode,DataGridModule,DataTableModule,TabMenuModule,MenuItem,SharedModule,DialogModule,DropdownModule,ButtonModule,InputTextModule,InputTextareaModule,InputMaskModule,RadioButtonModule, CheckboxModule,ScheduleModule,CalendarModule,FieldsetModule,SliderModule,RatingModule,MultiSelectModule } from 'primeng/primeng';
import { MySchedulerComponent } from './components/my-scheduler/my-scheduler.component';
import { MyProgramListComponent } from './components/my-program-list/my-program-list.component';
import { CableComponent } from './components/cable/cable.component';
import { VodComponent } from './components/vod/vod.component';
import { MomentModule } from 'angular2-moment';
import appRoutes from "./app.routing";
import { LoaderComponent } from './components/loader/loader.component';

@NgModule({
declarations: [
AppComponent,HomeComponent,BroadcastComponent,MySchedulerComponent,MyProgramListComponent,MyGridComponent,CableComponent,VodComponent,ProgramDetailsComponent, LoaderComponent
],
imports: [CommonModule,
appRoutes,
BrowserModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
MomentModule,
BlockUIModule,
AccordionModule,
AutoCompleteModule,
ChipsModule,
MenubarModule,
ToggleButtonModule,
PanelModule,
TooltipModule,
TreeModule,
DataGridModule,
TabViewModule,
DataTableModule,
TabMenuModule,
SharedModule,
DialogModule,
DropdownModule,
ButtonModule,
InputTextModule,
InputTextareaModule,
InputMaskModule,
RadioButtonModule,
CheckboxModule,
ScheduleModule,
CalendarModule,
FieldsetModule,
SliderModule,
RatingModule,
MultiSelectModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
`
my app.routing.ts

`import {RouterModule} from "@angular/router";
import { BroadcastComponent } from './components/broadcast/broadcast.component';
import { MyGridComponent } from './components/my-grid/my-grid.component';
import { MySchedulerComponent } from './components/my-scheduler/my-scheduler.component';
import { CableComponent } from './components/cable/cable.component';
import { VodComponent } from './components/vod/vod.component';
import { HomeComponent } from './components/home/home.component';

const routes = [
{ path: '', redirectTo: '/vod', pathMatch: 'full', useAsDefault: true },
{path: '', component: HomeComponent,
children: [
{path: 'broadcast', component: BroadcastComponent,
children: [
{ path: '', redirectTo: 'schedule', pathMatch: 'full' },
{ path: 'schedule', component: MySchedulerComponent },
{ path: 'grid', component: MyGridComponent }
]
},
{path: 'cable', component: CableComponent},
{path: 'vod', component: VodComponent}
]}
];

export default RouterModule.forRoot(routes);
`

error : Cannot use 'in' operator to search for 'providers' in null

[penleychan]

@raviganesh12 change export default RouterModule.forRoot(routes); to
export const Routing = RouterModule.forRoot(routes);

And your imports for your routing on your app.module.ts needs to be changed too.

And see if that works for you.

[raviganesh12]

@penleychan I made the change as you suggested.

The error is resolved. Thanks a lot!

[st-clair-clarke]

Hi,
I upgraded to [email protected] and am receiving the same error as discussed above. I have followed the above instructions but the error persists.
I thought it was corrected. The error still does not point to any specific file either.

[st-clair-clarke]

@raviganesh12 What changes did you make to the imports as suggested by @penleychan ? I am having the same problems as you after upgrading to [email protected]. It is the only error that I am having. Thanks

[raviganesh12]

@st-clair-clarke i have modified my app.routing.ts as below.

`import {RouterModule, Routes} from "@angular/router";
import { BroadcastComponent } from './components/broadcast/broadcast.component';
import { MyGridComponent } from './components/my-grid/my-grid.component';
import { MySchedulerComponent } from './components/my-scheduler/my-scheduler.component';
import { CableComponent } from './components/cable/cable.component';
import { VodComponent } from './components/vod/vod.component';
import { HomeComponent } from './components/home/home.component';

const appRoutes:Routes = [
{ path: '', redirectTo: '/vod', pathMatch: 'full' },
{path: '', component: HomeComponent,
children: [
{path: 'broadcast', component: BroadcastComponent,
children: [
{ path: '', redirectTo: 'schedule', pathMatch: 'full' },
{ path: 'schedule', component: MySchedulerComponent },
{ path: 'grid', component: MyGridComponent }
]
},
{path: 'cable', component: CableComponent},
{path: 'vod', component: VodComponent}
]}
];

export const Routing = RouterModule.forRoot(appRoutes);
`

Also the import is updated in my app.module.ts as below

import {Routing} from "./app.routing";

[penleychan]

@st-clair-clarke
Just make sure you are not using typescript keyword default for your routings. If you are still having issues you can post some of your code for us to see what's wrong.

[crazybber]

using keyword default ,in the front of keyword class , also could cause this issue :

such as:
export default class SharedModule {}
just remove default to change it into:
export class SharedModule {}

it will work!

[nexussays]

I was also experiencing this error. It's quite cryptic and provides no stack trace or way to pinpoint the source of the problem.

It appears in my case it was the way I was referencing a component:

import ToastWidget from "./toast/ToastWidget ";
// importing this from "app" instead of the current directory seems to be the source of the problem
import InputWidget from "app/input/InputWidget";

@NgModule({
  declarations: [
    InputWidget,
    ToastWidget,
    // others...
  ],

changed import reference to a local reference (like all the other imports) and the error went away

import InputWidget from "./input/InputWidget";

Hopefully that's helpful to someone.

[SergeL]

I get the error while using the array spread operator within _imports_. Eg.:

_auth.effects.ts_

import { EffectsModule } from '@ngrx/effects';

import { LoginEffect } from './effects/login.effect';
import { LogoutEffect } from './effects/logout.effect';
import { LoadCurrentUserEffect } from './effects/load-current-backend-user.effect';

export default [
  EffectsModule.run(LoginEffect),
  EffectsModule.run(LogoutEffect),
  EffectsModule.run(LoadCurrentUserEffect)
];

_auth.module.ts_

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { ReactiveFormsModule } from '@angular/forms';

import authEffects from './auth.effects';
// ...

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    RouterModule.forChild(routes),
    ...authEffects // <-- this causes the error
  ],
  // ...
  ]
})
export class AuthModule { }

The interesting part is, that it works after ng serve has initialized/bootraped everything and is running with the watcher.

Edit

It works without the _default_ export but with export const authEffects and import { authEffects } from './auth.effects';. Actually the same what @penleychan mentioned above.

Would be awesome if the stacktrace would be better or we'll just get compile errors.

[MadDeveloper]

Remove the keyword default for the module routing and it works for me too.

tl;dr

don't use the default keyword

[stephenad]

Hi

I seem to have the same error as above but cannot seem to get it solved.
ERROR in TypeError: Cannot use 'in' operator to search for 'providers' in null

I have version

angular-cli: 1.0.0-beta.28.3
node: 6.11.2
os: win32 x64
@angular/common: 2.4.10
@angular/compiler: 2.4.10
@angular/core: 2.4.10
@angular/forms: 2.4.10
@angular/http: 2.4.10
@angular/platform-browser: 2.4.10
@angular/platform-browser-dynamic: 2.4.10
@angular/router: 3.4.10
@angular/compiler-cli: 2.4.10

I installed JSZip using npm and now I get this message when I run ng serve when I try and use the JSZip module https://github.com/Stuk/jszip
ERROR in TypeError: Cannot use 'in' operator to search for 'providers' in null

/* !!! System Imports !!! */
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { BsDropdownModule, PaginationModule, TabsModule} from 'ng2-bootstrap';
import { CustomFormsModule } from 'ng2-validation';
import { Ng2TableModule } from 'ng2-table/ng2-table';
import { DatePickerModule } from 'ng2-datepicker';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpService } from './services/http.service';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { ToasterModule, ToasterService } from 'angular2-toaster';
import { RouterModule } from '@angular/router';
import { DataTablesModule } from 'angular-datatables';


//Third Party Components
import { CookieService } from 'angular2-cookie/core';
import { FileSelectDirective, FileDropDirective} from 'ng2-file-upload';
import { ChartsModule } from 'ng2-charts';
import { ToastModule } from 'ng2-toastr';
import { JWBootstrapSwitchModule } from 'jw-bootstrap-switch-ng2';
import { BsModalModule } from 'ng2-bs3-modal/ng2-bs3-modal';
import { SelectModule} from 'ng2-select';
import * as JSZip from 'jszip';


@NgModule({
  declarations:
  [
    /* App Components*/
    AppComponent,

    /*!! Admin Area  !!*/
    /* Admin Options*/
    JszipComponent ],

imports: [
   JSZip,
  ToastModule,
  ChartsModule,
 routing,
  RouterModule.forRoot(routes, { useHash: true })
  ],

  entryComponents:
  [

  ],

  providers:
  [ ...   { provide: 'apiBase', useValue: 'http://localhost:81/NationalGrid/ci_ngi/api/' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Any advice or suggestions appreciated.
Thanks
Andy

[penleychan]

@stephenad

imports: [
   JSZip, <-- this is a not a module
  ToastModule,
  ChartsModule,
 routing,
  RouterModule.forRoot(routes, { useHash: true })
  ],

[DilipKumarPogaku]

routes is the null variable, that is the you are getting the exception given,set the values on routes variable

[stephenad]

@penleychan and @DilipKumarPogaku,

Thanks for the replies, I have taken it out of imports and am getting a new jszip module error, so will investigate that unless one of you know how to make jszip work with angular?

Once I took the import out the code did not give the earlier error anymore but @penleychan why did you say routes is a null variable?

[penleychan]

@stephenad I did not say that, @DilipKumarPogaku did.

You would have to import your jszip on your component you want to use it on. It is not a module so you cannot import it as a module.

[stephenad]

@penleychan I was not implying you had said anything about @DilipKumarPogaku comment, sorry if I caused confusion.

Ok thanks

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