Error: valor inesperado 'indefinido' importado por el módulo

Recibo este error después de migrar a NgModule, el error no ayuda demasiado, ¿algún consejo, por favor?

Error: Error: Unexpected value 'undefined' imported by the module 'AppModule'
        at new BaseException (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:5116:27)
        at eval (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:13231:35)
        at Array.forEach (native)
        at CompileMetadataResolver.getNgModuleMetadata (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:13215:48)
        at RuntimeCompiler._compileComponents (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15845:51)
        at RuntimeCompiler._compileModuleAndComponents (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15769:41)
        at RuntimeCompiler.compileModuleAsync (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:15746:25)
        at PlatformRef_._bootstrapModuleWithZone (http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:9991:29)
        at PlatformRef_.bootstrapModule (http://localhost:5555/node_modules/@angular/core/bundles/core.umd.js:9984:25)
        at Object.eval (http://localhost:5555/app/main.js:8:53)
    Evaluating http://localhost:5555/app/main.js
    Error loading http://localhost:5555/app/main.js "Report this error at https://github.com/mgechev/angular2-seed/issues"(anonymous function) @ contracts:142ZoneDelegate.invoke @ zone.js?1472711930202:332Zone.run @ zone.js?1472711930202:225(anonymous function) @ zone.js?1472711930202:586ZoneDelegate.invokeTask @ zone.js?1472711930202:365Zone.runTask @ zone.js?1472711930202:265drainMicroTaskQueue @ zone.js?1472711930202:491ZoneTask.invoke @ zone.js?1472711930202:435

app.module.ts:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { APP_BASE_HREF } from '@angular/common';
    import { RouterModule } from '@angular/router';
    import { HttpModule } from '@angular/http';
    import { AppComponent } from './app.component';
    import { routes } from './app.routes';

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

    //dgf ng2-translate
    import { TRANSLATE_PROVIDERS, TranslateLoader, TranslateStaticLoader, MissingTranslationHandler } from 'ng2-translate/ng2-translate';
    import { HTTP_PROVIDERS, Http } from '@angular/http';
    import { FormsModule,ReactiveFormsModule } from '@angular/forms';
    import { TranslationNotFoundHandler } from './shared/common/TranslationNotFoundHandler';
    //dgf ng2-translate END

    import {CalendarModule,DataTableModule,DialogModule,PanelModule} from 'primeng/primeng';

    import {TranslateModule} from 'ng2-translate/ng2-translate';

    import { AuthGuard,AppConfigService,AppConfig,DateHelper,ThemeComponent,ToolbarComponent, RemoveHostTagDirective } from './index';
    import { HomeComponent,MessagesExampleComponent,PrimeNgHomeComponent,CalendarComponent,Ng2BootstrapExamplesComponent,DatepickerDemoComponent,UserListComponent,UserEditComponent,ContractListComponent,AboutComponent } from './index';


@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), /* AboutModule, HomeModule, SharedModule.forRoot()*/
          FormsModule,
          ReactiveFormsModule,
          //third-party
          ,TranslateModule.forRoot() //,
          //third-party PRIMENG
          ,CalendarModule,DataTableModule,DialogModule,PanelModule
  ],
  declarations: [
    AppComponent,ThemeComponent, ToolbarComponent, RemoveHostTagDirective,
    HomeComponent,MessagesExampleComponent,PrimeNgHomeComponent,CalendarComponent,Ng2BootstrapExamplesComponent,DatepickerDemoComponent,UserListComponent,UserEditComponent,ContractListComponent,AboutComponent
  ],
  providers: [{
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },
    FormsModule,
    ReactiveFormsModule,
    provide(TranslateLoader, { //DGF ng2-translate
          useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
          deps: [Http]
      }),
    provide(MissingTranslationHandler, { useClass: TranslationNotFoundHandler }), //DGF ng2-translate

    AuthGuard,AppConfigService,AppConfig,
    DateHelper
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

Para cualquiera que se enfrente a este mismo error, mi situación fue que tengo comas dobles en la sección de importaciones

imports: [
      BrowserModule,
      HttpModule,
      FormsModule,
      RouterModule.forRoot(appRoutes), , // <-- this was the error
      // .... 
],

Asegúrese de que los módulos no se importen entre sí. Entonces, no debería haber

En el Módulo A: imports[ModuleB]

En el Módulo B: imports[ModuleA]

Esto puede ser causado por múltiples escenarios como

1. Comas faltantes

imports: [
    BrowserModule
   ,routing <= Missing Comma
   ,FeatureComponentsModule
  ],

2. Comas dobles

imports: [
    BrowserModule, 
   ,routing <=Double Comma
   ,FeatureComponentsModule
  ],

3. No exportar nada desde el módulo
4. Errores de sintaxis
5. Errores tipográficos
6. Punto y coma dentro de objetos, matrices
7. Declaraciones de importación incorrectas

Ninguna de las soluciones anteriores funcionó para mí, simplemente detener y ejecutar "ng serve" nuevamente.

Yo tuve el mismo problema. En mi caso, el motivo es una coma extra.

Tuve este error porque tenía un index.tsarchivo en la raíz de mi aplicación que estaba exportando mi app.component.ts. Entonces pensé que podía hacer lo siguiente:

import { AppComponent } from './';

Esto funcionó y no me dio líneas onduladas rojas e incluso intellisense muestra AppComponent cuando comienzas a escribirlo. Pero descubra que estaba causando este error. Después de cambiarlo a:

import { AppComponent } from './app.component';

El error desapareció.

Asegúrese de no importar un módulo / componente como este:

import { YOUR_COMPONENT } from './';

Pero debería ser

import { YOUR_COMPONENT } from './YOUR_COMPONENT.ts';

Este problema de dependencias circulares de dos módulos

Módulo 1: importar Módulo 2
Módulo 2: importar Módulo 1

Estoy construyendo una biblioteca de componentes y comencé a recibir este error en mi aplicación que está importando dicha biblioteca. Al ejecutar ng build --prodo ng serve --aoten la aplicación, obtendría:

Unexpected value 'undefined' imported by the module 'ɵm in node_modules/<library-name>/<library-name>.d.ts'

Pero no hay errores al usar ng serveo al probar los módulos en la propia biblioteca, incluso cuando se construyen --prod.

Resulta que intellisense también me engañó. Para algunos de mis módulos, había importado un módulo hermano como

import { DesignModule } from '../../design';

en vez de

import { DesignModule } from '../../design/design.module';

Funcionó bien en todas las compilaciones excepto en la que describí.

Esto fue terrible de precisar y tuve suerte de que no me tomó más tiempo. Espero que esto ayude a alguien.

Tuve la misma excepción al intentar compilar una aplicación Angular 5.

Unexpected value 'undefined' imported by the module 'DemoAppModule'

En mi caso, resultó que era una dependencia circular que encontré usando una herramienta madge . Encontró los archivos que contienen dependencia circular ejecutando

npx madge --circular --extensions ts src/

Usted tiene que quitar la línea import { provide } from '@angular/core';de app.module.tsque provideestá en desuso ahora. Tienes que usar providelo siguiente en proveedores:

providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },
    FormsModule,
    ReactiveFormsModule,
    // disableDeprecatedForms(),
    // provideForms(),
    // HTTP_PROVIDERS, //DGF needed for ng2-translate
    // TRANSLATE_PROVIDERS, //DGF ng2-translate (not required, but recommended to have 1 unique instance of your service)
    {
        provide : TranslateLoader,
        useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
        deps: [Http]
    },
    {
        provide : MissingTranslationHandler,
        useClass: TranslationNotFoundHandler
    },

    AuthGuard,AppConfigService,AppConfig,
    DateHelper
  ]

Simplemente colocando el proveedor dentro de forRoot funciona: https://github.com/ocombe/ng2-translate

@NgModule({
  imports: [BrowserModule, HttpModule, RouterModule.forRoot(routes), /* AboutModule, HomeModule, SharedModule.forRoot()*/
          FormsModule,
          ReactiveFormsModule,
          //third-party
          TranslateModule.forRoot({
            provide: TranslateLoader,
            useFactory: (http: Http) => new TranslateStaticLoader(http, '/assets/i18n', '.json'),
            deps: [Http]
          })
          //third-party PRIMENG
          ,CalendarModule,DataTableModule,DialogModule,PanelModule
  ],
  declarations: [
    AppComponent,ThemeComponent, ToolbarComponent, RemoveHostTagDirective,
    HomeComponent,MessagesExampleComponent,PrimeNgHomeComponent,CalendarComponent,Ng2BootstrapExamplesComponent,DatepickerDemoComponent,UserListComponent,UserEditComponent,ContractListComponent,AboutComponent
  ],
  providers: [
    {
      provide: APP_BASE_HREF,
      useValue: '<%= APP_BASE %>'
    },
    // FormsModule,
    ReactiveFormsModule,
    { provide : MissingTranslationHandler, useClass: TranslationNotFoundHandler},
    AuthGuard,AppConfigService,AppConfig,
    DateHelper
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

hay otra solución simple para esto. Tengo 2 módulos que de alguna manera están profundamente en la estructura que se utilizan entre sí. Me encontré con el mismo problema con las dependencias circulares con webpack y angular 2. Simplemente cambié la forma en que se declara el módulo:

....

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        require('../navigation/navigation.module')
    ],
    declarations: COMPONENTS,
    exports: COMPONENTS
})
class DppIncludeModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: DppIncludeModule
        };
    }
}

export = DppIncludeModule;

Cuando ahora uso la declaración de importaciones en el atributo ngModule, simplemente uso:

@NgModule({
    imports: [
        CommonModule,
        ServicesModule.forRoot(),
        NouisliderModule,
        FormsModule,
        ChartModule,
        DppAccordeonModule,
        PipesModule,
        require('../../../unbranded/include/include.module')
    ],
....

Con esto todos los problemas se van.

Mi problema fue tener una exportación dos veces en index.ts

Eliminar uno de ellos resolvió el problema.

Tuve este problema, es cierto que el error en la consola no es descriptivo. Pero si miras la salida angular-cli:

Verá una ADVERTENCIA, que apunta a la dependencia circular

WARNING in Circular dependency detected:
module1 -> module2
module2 -> module1

Entonces, la solución es eliminar una importación de uno de los módulos.

El problema es que hay al menos una importación para la que falta el archivo de origen.

Por ejemplo, obtuve el mismo error cuando estaba usando

       import { AppRoutingModule } from './app-routing.module';

Pero el archivo './app-routing.module' no estaba allí en la ruta dada.

Eliminé esta importación y el error desapareció.

Tuve el mismo error, ninguno de los consejos anteriores no ayudó.

En mi caso, fue causado por WebStorm, combinó dos importaciones en una.

import { ComponentOne, ComponentTwo } from '../component-dir';

Extraje esto en dos importaciones separadas

import { ComponentOne } from '../component-dir/component-one.service';
import { ComponentTwo } from '../component-dir/component-two.model';

Después de esto, funciona sin errores.

En caso de que su índice exporte un módulo: ese módulo no debería importar sus componentes desde el mismo índice, debería importarlos directamente desde el archivo de componentes.

Tuve este problema, y ​​cuando cambié de importar los componentes en el archivo del módulo usando el índice a importarlos usando el archivo directo, esto se resolvió.

por ejemplo, cambiado:

import { NgModule } from '@angular/core';
import { MainNavComponent } from './index';
@NgModule({
  imports: [],
  exports: [MainNavComponent],
  declarations: [ MainNavComponent ],
  bootstrap:    [ MainNavComponent ]
})
export class MainNavModule {}

a:

import { NgModule } from '@angular/core';
import { MainNavComponent } from './MainNavComponent';
@NgModule({
  imports: [],
  exports: [MainNavComponent],
  declarations: [ MainNavComponent ],
  bootstrap:    [ MainNavComponent ]
})
export class MainNavModule {}

también elimine las exportaciones ahora innecesarias de su índice, por ejemplo:

export { MainNavModule } from './MainNavModule';
export { MainNavComponent } from './MainNavComponent';

a:

export { MainNavModule } from './MainNavModule';

Otra razón podría ser un código como este:

import { NgModule } from '@angular/core';
import { SharedModule } from 'app/shared/shared.module';
import { CoreModule } from 'app/core/core.module';
import { RouterModule } from '@angular/router';
import { COMPANY_ROUTES } from 'app/company/company.routing';
import { CompanyService } from 'app/company/services/company.service';
import { CompanyListComponent } from 'app/company/components/company-list/company-list.component';

@NgModule({
    imports: [
        CoreModule,
        SharedModule,
		RouterModule.forChild(COMPANY_ROUTES)
    ],
    declarations: [
		CompanyListComponent
    ],
    providers: [
		CompanyService
    ],
    exports: [
    ]
})
export class CompanyModule { }

Debido a que las exportaciones son una matriz vacía y, antes, debe eliminarse.

Tuve el mismo problema, agregué el componente en index.ts de a = de la carpeta e hice una exportación. Aún así, aparecía el error indefinido. Pero el IDE hace estallar nuestras líneas onduladas rojas

Luego, como se sugirió, cambió de

import { SearchComponent } from './';

a

import { SearchComponent } from './search/search.component';

Siempre que esté seguro de que no está haciendo nada incorrecto, finalice "ng serve" y reinícielo. Al hacerlo, el compilador hace todo su trabajo y la aplicación funciona como se esperaba. Experiencias anteriores con módulos me han enseñado a crearlos cuando "ng serve" no se está ejecutando o reiniciar el terminal una vez que termine.

Reiniciar "ng serve" también funciona cuando está emitiendo un nuevo componente a otro componente, es posible que el compilador no haya reconocido su nuevo componente, simplemente reinicie "ng serve"

Esto funcionó para mí hace unos minutos.

Lo soluciono eliminando todo el archivo de exportación de índice, incluido pipe, service. entonces toda la ruta de importación de archivos es una ruta específica. p.ej.

import { AuthService } from './_common/services/auth.service';

reemplazar

import { AuthService } from './_common/services';

además, no exporte la clase predeterminada.

Mi problema fue un nombre de componente mal escrito dentro del component.ts .

La declaración de importación no mostró un error, pero la declaración sí, lo que me engañó.

El argumento " http: Http privado " no utilizado en el constructor de app.component.ts me había causado el mismo error y se resolvió al eliminar el argumento no utilizado del constructor

Lo más probable es que el error esté relacionado con el archivo AppModule.ts.

Para resolver este problema, verifique si todos los componentes están declarados y todos los servicios que declaramos se colocan en los proveedores, etc.

E incluso si todo parece estar bien en el archivo AppModule y aún recibe el error, detenga su instancia angular en ejecución y reiníciela una vez más. Eso puede resolver su problema si todo en el archivo del módulo es correcto y si aún recibe el error.

Para mí, el problema se resolvió cambiando la secuencia de importación:

Uno con tengo el error:

imports: [ 
 BrowserModule, HttpClientModule, AppRoutingModule, 
 CommonModule
],

Cambió esto a:

   imports: [
    BrowserModule, CommonModule, HttpClientModule,
    AppRoutingModule
  ],

Las soluciones anteriores no me funcionaron.

Así que respaldé la versión de angular-cli de 1.6.4 para 1.4.4 y esto resolvió mi problema.

No sé si esta es la mejor solución, pero por ahora esto funcionó para mí.

Estaba enfrentando el mismo problema. El problema era que estaba importando alguna clase de index.ts

    import {className} from '..shared/index'

index.ts contienen la declaración de exportación

    export * from './models';

Lo cambié al archivo .ts que contiene el objeto de clase real

    import {className} from '..shared/model'

y se resolvió.

Para mí, este error fue causado por una importación no utilizada:

import { NgModule, Input } from '@angular/core';

Error resultante:

La entrada se declara, pero su valor nunca se lee

Comente y no se producirá ningún error:

import { NgModule/*, Input*/ } from '@angular/core';

Encontré este problema en la situación: - app-module --- app-routing // app router ----- imports: [RouterModule.forRoot(routes)] --- demo-module // sub-module ----- demo-routing ------- imports: [RouterModule.forRoot(routes)] // --> should be RouterModule.forChild!

porque solo hay un root.