Unexpected value 'DecoratorFactory' imported by the module 'TempModule'

Question

In my sample application I have written a feature module "TempModule" and below is the code.

import { NgModule } from '@angular/core';
import { CommonModule} from '@angular/common';

import { TempOneComponent } from './temp.one.component';
import { TempTwoComponent } from './temp.two.component';
import { tempRouting } from './temp.routing';



@NgModule({
declarations: [ TempOneComponent,
                TempTwoComponent],
imports: [ NgModule,
           CommonModule,
           tempRouting]
})

export class TempModule {}

I am referring to the TempModule in root module , below is the root module code

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

//-- routing import
import { routing,
         appRoutingProviders} from './app.routing'; 

//-- root component import
import { AppComponent } from './app.component';
import { AppAboutComponent } from './app-about.component';
import { AppCreatTicketComponent } from './tickets/    app.create-ticket.component';
import { AppOpenTicketComponent } from './tickets/app.open-ticket.component';
import { AppSearchTicketComponent } from './tickets/    app.search-ticket.component';
import { AppDashboardComponent } from './tickets/app.dashboard.component';
import { AppUsersComponent } from './users/app.users.component';

import { TempModule } from './tempModule/temp.module';

@NgModule({
    declarations: [AppComponent , 
    AppAboutComponent , 
    AppCreatTicketComponent,
    AppOpenTicketComponent,
    AppSearchTicketComponent,
    AppDashboardComponent,
    AppUsersComponent
    ],
    imports:       [BrowserModule ,
                    FormsModule ,
                    routing,
                    TempModule ],
    providers: [appRoutingProviders],
    bootstrap:    [AppComponent]

})

export class AppModule {}

When I run the application , "Unexpected value 'DecoratorFactory' imported by the module 'TempModule'" is displayed in browser console.

Any idea what could be the reason for this error ?

Answer 1

You're trying to import decorator in imports array. It should contain only modules

@NgModule({
  declarations: [ TempOneComponent,
                TempTwoComponent],
  imports: [ NgModule, <== why is it here???
           CommonModule,
           tempRouting]
}) 
export class TempModule {}

Answer 2

Another way you can see this error is by importing a module from the wrong place. For example:

import {CommonModule} from '@angular/core';  // wrong

should be:

import {CommonModule} from '@angular/common';