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

95

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 { }
angular 
— surfealokesea
fuente
3
Tuve este problema cuando tenía dos módulos que se importaban entre sí
— Matthew Hegarty
Tuve el mismo problema, reiniciar el editor ayudó. No reconocía archivos recién agregados.
— Jyotirmaya Prusty
6
¿Quién más piensa que errores como estos deberían ser más explicativos?
— Pramesh Bajracharya
Recibí este error porque tenía una entrada vacía en la matriz de importaciones:, ,
— wutzebaer

Respuestas:

210

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
      // .... 
],
— Jalal El-Shaer
fuente
1
Tenía la coma al principio, por ejemplo. [, BrowserModule
— ozOli
1
Era un punto (.) Para mí
— Raghuram
1
¡También me resolvió el problema!
— michaeak
81

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]

— Tuong Le
fuente
59

Esto puede ser causado por múltiples escenarios como

  1. Comas faltantes
imports: [
    BrowserModule
   ,routing <= Missing Comma
   ,FeatureComponentsModule
  ],
  1. Comas dobles
imports: [
    BrowserModule, 
   ,routing <=Double Comma
   ,FeatureComponentsModule
  ],
  1. No exportar nada desde el módulo
  2. Errores de sintaxis
  3. Errores tipográficos
  4. Punto y coma dentro de objetos, matrices
  5. Declaraciones de importación incorrectas
— Ignacio Andrés
fuente
3
Buen resumen. Sería genial si Angular pudiera arrojar información sobre dónde y de qué manera falla la carga del módulo. Tal como está hoy, es una de las cosas más tediosas de depurar. ¿No estoy seguro de haber entendido el bit de "comas faltantes", que debería compilarse bien?
— unitario
Entiendo que faltan comas part- checkout app.module.ts archivos - importaciones :, proveedores :, declaraciones ... etc conjunto de matrices - En la lista de valores de cadena mencionados, asegúrese de que las comas sean EXTRA o falten ... Resolví esto quitando la coma adicional! @Ignatius Andrew ... ¡eres DIOS! ¡Angular 2/4 es bastante peculiar!
— HydTechie
30

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

— Semir Deljić
fuente
5
Jaja sí, para mí también. Cuando juegas con el enrutamiento, a veces Angular necesita un reinicio. Lo mismo ocurre con el movimiento de importaciones o exportaciones importantes entre sus módulos.
— Florian Leitgeb
problema típico, en varias situaciones. El equipo de Angular debería trabajar en eso.
— Dimitris Voudrias
Lo mismo para mi. Angular debería funcionar en este problema. Perdí mi tiempo: /
— Lint
Para mí, lo fuecircular dependency
— Vishal Suthar
23

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ó.

— Post Impatica
fuente
1
Creo que lo que también funciona es cuando escribes explícitamente './index'. Tuvimos este problema en combinación con AoT y ng-packagr.
— bersling
8

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';
— Tuong Le
fuente
8

Este problema de dependencias circulares de dos módulos

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

— Sagar Jadhav
fuente
5

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.

— Nayfin
fuente
Eso fue todo xD ¿Sabes por casualidad cómo configurar intellisense para no elegir la versión incorrecta?
— user2035039
Lo siento, no lo hago.
— Nayfin
4

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/
— Andrejs Abrickis
fuente
3

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
  ]
— ranakrunal9
fuente
eso tiene sentido, lo he hecho pero el error sigue siendo el mismo
— surfealokesea
3

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 { }
— surfealokesea
fuente
3

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.

— Michael Baarz
fuente
¿Puedes explicar un poco más cómo funciona esto? Por ejemplo, ¿cómo utiliza DppIncludeModule en su componente?
— Kate S
Kate, perdón por la respuesta tardía. No uso el módulo en el componente, encapsulo componentes en módulos. Los módulos se utilizan juntos. Tal vez tenga otro problema aquí con el error indefinido.
— Michael Baarz
3

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

Eliminar uno de ellos resolvió el problema.

— CornelC
fuente
¡Santo cielo, esto funcionó para mí! Si exporta su módulo desde index.ts y su módulo importa componentes de módulos desde el mismo index.ts, esto parece causar una carga circular. Debe importar a su módulo directamente desde el archivo del componente, no desde el índice. TNX
— Tomas Katz
Solución de problemas. No puedo imaginar cuánto tiempo me tomará resolver este problema sin ver esta respuesta
— tom10271
3

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.

— T04435
fuente
¿Qué pasa si requiero esa dependencia circular?
— Evan Sevy
@RuneStar Creo que deberá mover la dependencia a un módulo de nivel superior y luego importar el nuevo módulo en ambos módulos (X).
— T04435
2

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ó.

— Hablar es barato Muéstrame el código
fuente
2

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.

— Jakub Rybiński
fuente
Gracias amigo. Eso ayudó
— DinoMyte
duplicado de la respuesta anterior: stackoverflow.com/a/49667611/1243048
— Maelig
@Maelig Creo que en la respuesta vinculada fue un problema un poco diferente. No sé si es un error tipográfico, pero también hay un problema con el directorio adecuado, una vez es ./modelsotra vez, es así./model
— Jakub Rybiński
1

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';
— Tomas Katz
fuente
Gracias, ese fue mi problema, el IDE se importa desde la carpeta, por ejemplo: '/ componentes', mi biblioteca se estaba construyendo sin problemas, pero no se puede usar en otra biblioteca
— Mosta
1

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 { }
Expandir fragmento

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

— SaamTehraani
fuente
1

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';
— faizal khan
fuente
1

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.

— Benneee_
fuente
0

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.

— wfsovereign
fuente
Pero, ¿cómo debería ayudar eso? Eliminar el nombre del archivo toma el index.ts de la carpeta que está asignando.
— Michael Baarz
@MichaelBaarz en ese momento, reomve el archivo de índice y ayúdame a resolver el problema. pero ahora actualizo la versión de ng a 2.4.9, ese problema no existe, es decir, puedo usar la referencia de exportación del archivo index.ts. así que creo que tal vez sea un problema con ng build
— wfsovereign
Al menos este es un caso extremo y el resultado de una estructura de paquete incorrecta. Los paquetes no deben tener viajes de ida y vuelta. Aclarar la estructura del paquete lo solucionará de todos modos.
— Michael Baarz
@MichaelBaarz sí, estoy de acuerdo contigo.
— wfsovereign
0

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ñó.

— Taran
fuente
0

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

— Pavan V. Achar
fuente
0

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.

— Jithin
fuente
0

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
  ],
— pritesh agrawal
fuente
1
No relacionado con el problema, ya que BrowserModule exporta CommonModule teniendo ambos es redundante.
— Semir Deljić
0

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í.

— Jeterson Miranda Gomes
fuente
0

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ó.

— Deepti-l
fuente
0

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';
— Elvis Lev
fuente
0

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.

— WanderHuang
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.