错误: 模块导入的意外值“未定义”

小开

您必须从 app.module.ts中删除行 import { provide } from '@angular/core';，因为现在不推荐使用 provide。你必须使用以下的 provide:

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
]

小开

最佳答案

只需将提供程序放在 forRoot 中即可: 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 { }

小开

对于任何面临同样错误的人来说，我的情况是在导入部分有两个逗号

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

小开

我有这个错误，因为我有一个 index.ts文件在我的应用程序的根导出我的 app.component.ts。所以我想我可以做到以下几点:

import { AppComponent } from './';

这个工作，并给我没有红色弯曲线，甚至智能感觉提出应用组件时，你开始输入它。但后来发现是它导致了这个错误。在我把它改成:

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

错误消失了。

小开

确保您不会导入这样的模块/组件:

import { YOUR_COMPONENT } from './';

但它应该是

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

小开

这可能是由多种情况造成的，如

缺少逗号

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

双逗号

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

从模块导出任何东西
语法错误
打字错误
对象、数组中的分号
不正确的导入声明

小开

还有另一个简单的解决办法。我有两个模块，它们以某种方式互相使用在结构的深处。我遇到了同样的问题与循环依赖与 webpack 和角2。我只是改变了一个模块的声明方式:

....


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


export = DppIncludeModule;

当我现在使用 ngModule 属性上的 import 语句时，我只需使用:

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

有了这个，所有的问题都解决了。

小开

确保模块不会相互导入，所以不应该有

模组 A: imports[ModuleB]

模组 B: imports[ModuleA]

小开

我修复它删除所有索引导出文件，包括管道，服务。那么所有的文件导入路径都是特定的路径。例如。

从’./_ common/services/auth.service’导入{ AuthService } ;

更换

从’./_ common/services’导入{ AuthService } ;

另外，不要导出默认类。

小开

My problem was having an export twice in index.ts

移除其中一个就解决了问题。

小开

如果您的索引导出了一个模块——该模块不应该从相同的索引导入它的组件，它应该直接从组件文件导入它们。

我遇到了这个问题，当我将使用索引导入模块文件中的组件改为使用直接文件导入组件时，问题解决了。

例如:

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

致:

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

也从你的索引中删除现在不必要的导出，例如:

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

致:

export { MainNavModule } from './MainNavModule';

小开

我的问题是在 component.ts中拼错了组件名。

Import 语句没有显示错误，但声明显示了错误，这误导了我。

小开

在 app.component.ts的构造函数中未使用的“ 私人网站 Http://Http”参数导致了同样的错误，并且在移除构造函数的未使用参数时得到了解决

小开

Most probably the error will be related to the AppModule.ts file.

要解决这个问题，请检查是否声明了每个组件，以及是否将我们声明的每个服务放在提供程序中等等。

即使在 AppModule 文件中看起来一切正常，您仍然得到了错误，那么停止运行角实例并重新启动它。如果模块文件中的所有内容都是正确的，并且您仍然得到错误，那么这可以解决您的问题。

小开

对我来说，问题通过改变进口顺序得到了解决:

一个是我得到了错误:

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

Changed this to :

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

小开

以上的解决方案对我来说都不管用，只是简单地停下来，再次运行“ ng 服务”。

小开

我也有同样的问题，对我来说，原因是多了一个逗号。

小开

我正在建立一个组件库，并开始得到这个错误，在我的应用程序，导入说库。当在应用程序中运行 ng build --prod或 ng serve --aot时，我会得到:

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

但是在使用 ng serve时，或者在库本身测试模块时，甚至在构建 --prod时，都没有错误。

结果我也被智慧误导了。对于我的一些模块，我导入了一个姊妹模块作为

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

而不是

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

除了我描述的那个之外，它在所有的版本中都工作得很好。

这是可怕的确定，我很幸运，它没有花费我比它更长的时间。希望这能帮到别人。

小开

上面的解决方案对我不起作用。

所以我把1.6.4的角斜率，换算成1.4.4，这样就解决了我的问题。

我不知道这是不是最好的解决方案，但是现在，这对我来说很有效

小开

两个模块的循环依赖问题

模块1: 导入模块2
模块2: 导入模块1

小开

The issue is that there is at least one import for which source file is missing.

例如，当我使用

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

但是文件“ ./app-routing. module”在给定的路径中不存在。

I removed this import and error went away.

小开

I was facing the same problem. 问题是我从 index.ts 导入了一些类

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

index.ts contain the export statement

    export * from './models';

我将其更改为包含实际类对象的.ts 文件

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

然后就解决了。

小开

我也犯了同样的错误，以上提示都没有帮助。

在我的案例中，它是由 WebStorm 引起的，将两个进口合并为一个。

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

我把它分解成两个独立的导入

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

After this it works without error.

小开

在尝试编译 Angular 5应用程序时也有同样的异常。

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

在我的案例中，它是一个循环依赖关系，我通过使用工具 Madge发现的。通过运行以下命令找到包含循环依赖项的文件

npx madge --circular --extensions ts src/

小开

对我来说，这个错误是由未使用的导入导致的:

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

结果错误:

声明了输入，但它的值从未读取

把它注释掉，错误就不会发生:

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

小开

I met this problem at the situation: - 应用程序-模块 ——应用程序路由//应用程序路由器 ——-导入: [ RouterModule.forRoot (路由)] ——-demo-module//sub-module 演示路由 ——-import: [ RouterModule.forRoot (path)]//—— > 应该是 RouterModule.forChild！

因为只有一个 root。

小开

对我来说，我只是做了一个 CTRL + C和是的。
我重新开始

ionic serve

This works for me.

小开

我也遇到了同样的问题，我在 a = of 文件夹的 Index.ts中添加了组件并导出了它。仍然有未定义的错误出现。但 IDE 会弹出我们所有的红色曲线

然后按照建议从

import { SearchComponent } from './';

到

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

小开

另一个原因可能是这样的一些代码:

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

因为导出是空数组，并且在它之前，它应该被删除。

小开

我有这个问题，这是真的，在控制台上的错误不是描述性的。但是如果你观察角-斜率输出:

您将看到一个警告，指向循环依赖项

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

因此，解决方案是从其中一个模块中删除一个导入。

小开

只要您确定您没有做错任何事情，请终止“ ng 服务”并重新启动它。通过这样做，编译器完成了所有工作，应用程序也按预期服务。以前使用模块的经验告诉我，要么在“ ng service”不运行时创建它们，要么在完成后重新启动终端。

重新启动“ ng 服务”也可以在你向另一个组件发送新组件时工作，可能编译器没有识别出你的新组件，只需重新启动“ ng 服务”

This worked for me just a few minutes ago.

小开

在我的示例中，我将 ngrx 的 provideMockStore()放入测试模块的“导入”而不是“提供者”数组中。

小开

有时在注册新组件或注册新模块之后，或者在处理了路由之后，angle 需要您重新启动开发服务器。我尝试了所有逗号丢失或双逗号的解决方案，但我的代码没有这样的错误是完美的。

所以，我只是停在 ng 的服务器上，然后重新启动它，这样就解决了错误。