Erro: valor inesperado 'indefinido' importado pelo módulo

Estou recebendo este erro depois de migrar para o NgModule, o erro não ajuda muito, algum conselho, 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 qualquer pessoa que enfrente esse mesmo erro, minha situação é que tenho vírgulas duplas na seção de importações

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

Certifique-se de que os módulos não importam uns aos outros. Então, não deveria haver

No Módulo A: imports[ModuleB]

No Módulo B: imports[ModuleA]

Isso pode ser causado por vários cenários, como

1. Faltando vírgulas

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

2. Vírgulas duplas

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

3. Não exportando nada do módulo
4. Erros de sintaxe
5. Erros de digitação
6. Ponto e vírgula dentro de objetos, matrizes
7. Declarações de importação incorretas

Nenhuma das soluções acima funcionou para mim, mas simplesmente parar e executar "ng serve" novamente.

Eu tive o mesmo problema. No meu caso, o motivo é uma vírgula extra.

Tive esse erro porque tinha um index.tsarquivo na raiz do meu aplicativo que estava exportando o meu app.component.ts. Então, pensei que poderia fazer o seguinte:

import { AppComponent } from './';

Isso funcionou e não me deu linhas onduladas vermelhas e até mesmo o intellisense traz o AppComponent quando você começa a digitá-lo. Mas descobri que ele estava causando esse erro. Depois que mudei para:

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

O erro foi embora.

Certifique-se de não importar um módulo / componente como este:

import { YOUR_COMPONENT } from './';

Mas deveria ser

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

Este problema de dependências circulares de dois módulos

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

Estou construindo uma biblioteca de componentes e comecei a receber este erro em meu aplicativo que está importando a referida biblioteca. Ao executar ng build --prodou ng serve --aotno aplicativo, eu obteria:

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

Mas sem erros ao usar ng serveou testar os módulos na própria biblioteca, mesmo durante a construção --prod.

Acontece que eu também fui enganado pela intellisense. Para alguns dos meus módulos, importei um módulo irmão como

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

ao invés de

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

Funcionou bem em todas as compilações, exceto na que descrevi.

Isso foi terrível de definir e eu tive sorte que não demorou mais do que demorou. Espero que isso ajude alguém.

Teve a mesma exceção ao tentar compilar um aplicativo Angular 5.

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

No meu caso, descobri que era uma dependência circular que descobri usando uma ferramenta madge . Encontrou os arquivos contendo dependência circular executando

npx madge --circular --extensions ts src/

Você tem que remover linha import { provide } from '@angular/core';de app.module.tscomo provideé obsoleto agora. Você deve usar provideo seguinte em provedores:

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
  ]

Apenas colocar o provedor dentro do 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 { }

existe outra solução simples para isso. Eu tenho 2 módulos que estão de alguma forma profundos na estrutura usando um ao outro. Eu tive o mesmo problema com dependências circulares com webpack e angular 2. Eu simplesmente mudei a forma como um módulo é declarado:

....

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

export = DppIncludeModule;

Quando agora uso a declaração de importações no atributo ngModule, simplesmente uso:

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

Com isso, todos os problemas vão embora.

Meu problema era ter uma exportação duas vezes em index.ts

Remover um deles resolveu o problema.

Tive esse problema, é verdade que o erro no console não é descritivo. Mas se você olhar para a saída angular-cli:

Você verá um AVISO, apontando para a dependência circular

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

Portanto, a solução é remover uma importação de um dos Módulos.

O problema é que há pelo menos uma importação cujo arquivo de origem está faltando.

Por exemplo, recebi o mesmo erro quando estava usando

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

Mas o arquivo './app-routing.module' não estava lá no caminho fornecido.

Removi esta importação e o erro desapareceu.

Eu tive o mesmo erro, nenhuma das dicas acima não ajudou.

No meu caso, foi causado pelo WebStorm, combinou duas importações em uma.

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

Extraí isso em duas importações separadas

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

Depois disso, funciona sem erros.

Caso seu índice exporte um módulo - Esse módulo não deve importar seus componentes do mesmo índice, deve importá-los diretamente do arquivo de componentes.

Eu tive esse problema, e quando mudei de importar os componentes no arquivo do módulo usando o índice para importá-los usando o arquivo direto, isso foi resolvido.

por exemplo, alterado:

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

para:

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

também remova as exportações agora desnecessárias de seu índice, por exemplo:

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

para:

export { MainNavModule } from './MainNavModule';

Outro motivo pode ser algum 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 { }

Como as exportações é um array vazio e, antes disso, deve ser removido.

Tive o mesmo problema, adicionei o componente no index.ts de a = da pasta e fiz uma exportação. Ainda assim, o erro indefinido estava aparecendo. Mas o IDE mostra todas as linhas vermelhas onduladas

Então, conforme sugerido, mudou de

import { SearchComponent } from './';

para

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

Contanto que você tenha certeza de que não está fazendo nada de errado, termine o "ng serve" e reinicie-o. Ao fazer isso, o compilador faz todo o seu trabalho e o aplicativo funciona conforme o esperado. Experiências anteriores com módulos me ensinaram a criá-los quando "ng serve" não estiver em execução ou a reiniciar o terminal quando terminar.

Reiniciar o "ng serve" também funciona quando você está emitindo um novo componente para outro componente, é possível que o compilador não tenha reconhecido seu novo componente, simplesmente reinicie o "ng serve"

Isso funcionou para mim apenas alguns minutos atrás.

Eu corrijo isso excluindo todos os arquivos de exportação de índice, incluindo tubos, serviços. então, todo o caminho de importação de arquivo é um caminho específico. por exemplo.

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

substituir

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

além disso, não exporte a classe padrão.

Meu problema era um nome de componente escrito incorretamente dentro do component.ts.

A declaração de importação não mostrou um erro, mas a declaração sim, o que me enganou.

O argumento não utilizado " http: Http " privado no construtor de app.component.ts causou-me o mesmo erro e foi resolvido ao remover o argumento não utilizado do construtor

Provavelmente o erro estará relacionado ao arquivo AppModule.ts.

Para resolver este problema, verifique se todos os componentes são declarados e se todos os serviços que declaramos são colocados nos provedores etc.

E mesmo se tudo parecer certo no arquivo AppModule e você ainda receber o erro, pare a instância angular em execução e reinicie-a mais uma vez. Isso pode resolver o seu problema se tudo no arquivo do módulo estiver correto e se você ainda estiver recebendo o erro.

Para mim, o problema foi resolvido alterando a sequência de importação:

Um com o erro:

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

Alterou para:

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

As soluções acima não funcionaram para mim.

Então, eu apoio a versão do angular-cli de 1.6.4 para 1.4.4 e isso resolveu meu problema.

Não sei se esta é a melhor solução, mas por enquanto, funcionou para mim

Eu estava enfrentando o mesmo problema. O problema era que eu estava importando alguma classe de index.ts

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

index.ts contém a declaração de exportação

    export * from './models';

Eu mudei para o arquivo .ts que contém o objeto de classe real

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

e resolvido.

Para mim, esse erro foi causado apenas por importação não utilizada:

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

Erro resultante:

A entrada é declarada, mas seu valor nunca é lido

Comente, e o erro não ocorrerá:

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

Eu conheci este problema na situação: - 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 existe apenas um root.