模块'AppModule'声明的意外值'undefined'

时间:2017-01-10 03:09:35

标签: angular angular2-routing

这里有什么问题?我试图让它工作,但我在标题中得到了错误。我已将<router-outlet></router-outlet>包含在app.component.html templateUrlapp.component.ts调用,但仍然没有运气。

app.module.ts

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


import { AppComponent }  from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { TopnavComponent } from './components/navbars/topnav/topnav.component';
import { LeftnavComponent } from './components/navbars/leftnav/leftnav.component';
import { LeftnavsecondaryComponent } from './components/navbars/leftnav-secondary/leftnav-secondary.component';
import { WorldofwarcraftComponent } from './components/games/worldofwarcraft/worldofwarcraft.component';

@NgModule({
    imports:    [ BrowserModule, FormsModule, AppRoutingModule ],
    declarations:   [ AppComponent, TopnavComponent, LeftnavComponent, LeftnavsecondaryComponent, WorldofwarcraftComponent ],
    bootstrap:  [ AppComponent ]
})

export class AppModule { }

应用-routing.module.ts

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';

import { WorldofwarcraftComponent } from './components/games/worldofwarcraft/worldofwarcraft.component';

const appRoutes: Routes = [
  { path: 'worldofwacraft', component: WorldofwarcraftComponent }
];

@NgModule({
  imports: [ RouterModule.forRoot(appRoutes) ],
  exports: [ RouterModule ]
})

export class AppRoutingModule {}

14 个答案:

答案 0 :(得分:97)

我遇到了同样的错误,有时会出现此问题,您只需要使用ng serve或您使用的任何CLI重新运行服务器,如上所述here

答案 1 :(得分:45)

我遇到了同样的错误,我发现了原因。 原因是两个逗号,在任何数组中(例如:imports属性)都是这样的。

@NgModule({
  imports: [
  CommonModule, FormsModule,,
]})

答案 2 :(得分:7)

试试这可能会对你有所帮助:
停止并启动ng-serve服务。 现在页面可以导航。

答案 3 :(得分:3)

这是因为我在我的一个index.ts文件中重复导出:

答案 4 :(得分:3)

这是一个非常烦人且难以理解的错误。我使用Araxis Merge进行了文件比较,发现我的两个项目中的每个文件乍一看都几乎相同。然而,经过进一步的审查后,我注意到文件结构略有不同(我一开始并没有真正寻找,而我正在寻找配置差异),我的第二个项目已经从其中一个ts文件生成了一个js文件

正如您在左侧看到的 ,有一个js文件。右侧项目显示了我的节点构建器组件并且运行时没有错误。右边是导致问题的原因。

Extra unneeded file

Webpack已经拿起那个Javascript文件并尝试打包它。显然,当Webpack遇到ts版本时,它会将其转换为重复的js文件,从而产生令人困惑的运行时异常。

t {__zone_symbol__error: Error: Unexpected value 'undefined' declared by the 
module 'AppModule'
    at t.m (http://localhost:……}

正如您所看到的,此问题与配置无关,因为许多帖子让我相信。如上所述,您的问题可能与配置有关,但在我的情况下却没有。

答案 5 :(得分:1)

这类似于the answer,建议重新运行ng serve,但这与我的情况无关,因为我的应用程序已在IIS中永久运行。就我而言,我是使用ng build --watch进行构建的,但是停止并重新运行它可以解决此问题。我认为某些东西在增量构建时构建不正确,但是进行完整构建可以解决问题。

答案 6 :(得分:1)

在我的情况下,我犯了以下错误

  @NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class NewTestRoutingModule {
  static component : [NewTestContainerComponent, NewTestInletComponent, NewTestStructureComponent]
}

和模块

@NgModule({
  declarations: [LayersRoutingModule.component],

Routing中的components数组应该是这样。

 static component = [NewTestContainerComponent, NewTestInletComponent, NewTestStructureComponent]

答案 7 :(得分:1)

就我而言,这是由于构建问题引起的。可能是您在App模块中添加了一些组件或其他东西而忘记重建它。因此,在浏览器中,Angular无法识别您在应用程序模块中的新条目,因为需要构建才能正确注册它们。因此,对于开发模式,请杀死当前服务器并使用ng serve。

答案 8 :(得分:0)

这也发生在我身上,在@Component我写了一个选择器:all-employees,在app.module.ts模块中它是<all- employees></all- employees>

答案 9 :(得分:0)

在我的情况下,这是类名diffrent,而app.mdoule.ts中导出的​​{name}之间的名称是不同的

祝你好运

答案 10 :(得分:0)

就我而言,在app.module.ts(Ionic 3)

if ( this.el.getAttribute('visible') === 'false' ) { // validate against 'false' instead of false
    /* ... */
    this.el.setAttribute('visible', ''); // set to '' instead of true
} else if ( this.el.getAttribute('visible') === '' ) { // validate against '' instead of false
    /* ... */
    this.el.setAttribute('visible', 'false'); // set to 'false' instead of false
}

更改为:

providers: [
    , StatusBar
    , SplashScreen

工作。

答案 11 :(得分:0)

使用Angular 2进行了此操作,事实证明,如果要从同一位置导出内容,则它与导入和相对路径有关

例如,在使用桶时,显式指定./

export * from './create-profile.component';

代替

export * from 'create-profile.component';

答案 12 :(得分:0)

/turbo_modules/@angular/compiler@8.2.14/bundles/compiler.umd.js中的错误(2603:26) 模块'AppModule'声明了意外的值'undefined'

我遇到的问题是export class someClassName在我的一个文件中使用了未知/错误的类名(复制/粘贴错误),并且从未在任何地方注册(例如AppModule.ts *)。

答案 13 :(得分:0)

我收到此错误是因为我错误地将TestBed.configureTestingModule放在了beforeEach块之外。