Неожиданное значение 'undefined', объявленное модулем 'AppModule'

Что здесь не так? Я пытаюсь заставить его работать, но я получаю эту ошибку в заголовке. Я включил <router-outlet></router-outlet> в app.component.html, который templateUrl вызывается app.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 {}

Ответы

Ответ 1

Я получил ту же ошибку, иногда эта проблема возникает, и вам нужно только повторно запустить сервер, используя ng serve или любой другой CLI, который вы используете, как упоминалось здесь

Ответ 2

Я столкнулся с той же ошибкой, и я обнаружил причину. Причиной было два запятых в любом массиве (например: imports свойство), как это.

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

Ответ 3

Попробуйте это может помочь вам:
Остановите и запустите ng-serve. Теперь страница может перемещаться.

Ответ 4

Это было вызвано тем, что я повторил экспорт в одном из файлов index.ts:

Ответ 5

Это очень неприятная и трудная для понимания ошибка. Я сделал сравнение файлов, используя Araxis Merge, и каждый файл в моих двух проектах был почти идентичен на первый взгляд. Однако после дальнейшего рассмотрения я заметил небольшую разницу в структуре файлов (которую я действительно не искал сначала, скорее, я искал различия в конфигурации), что мой второй проект создал файл js из одного из файлов ts.

Как вы видите на левой стороне, есть файл js. Проект с правой стороны показал мой компонент node -builder и работал без ошибок. В результате возникла проблема с правой стороной.

Extra unneed file

Webpack взял этот файл Javascript и попытался его упаковать. Очевидно, что, когда Webpack столкнулся с версией ts, он передал ее в дубликат js файла, создав при этом запутанное исключение во время выполнения.

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

Как вы можете видеть, эта проблема не имела ничего общего с конфигурацией, так как многие сообщения заставляли меня поверить. Как указано выше, ваша проблема может быть связана с конфигурацией, но в моем случае это не так.

Ответ 6

В моем случае это было имя класса diffrent, а имя, то есть между {name}, экспортируемым в app.mdoule.ts, было другим

удачи

Ответ 7

Это также случилось со мной, в @Component я написал селектор: all-employees и в модуле app.module.ts это было <all- employees></all- employees>

Ответ 8

В моем случае на app.module.ts(Ionic 3)

providers: [
    , StatusBar
    , SplashScreen

Изменился на:

providers: [
     StatusBar
    , SplashScreen

И работает.

Ответ 9

Опыт работы с Angular 2 и оказывается, что он как-то связан с импортом и относительными путями, если вы экспортируете что-то из того же места

Например, при использовании стволов, явно укажите ./

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

вместо

export * from 'create-profile.component';

Ответ 10

То же сообщение В моем случае я создал собственную трубу, но забыл создать функцию декоратора трубы.

Ответ 11

Это похоже на ответ, предлагающий перезапуск ng serve, но это не относилось к моей ситуации, так как приложение постоянно работает в IIS. В моем случае я построил с ng build --watch, но остановка и повторный запуск исправили проблему. Я предполагаю, что что-то было построено неправильно, когда это была инкрементная сборка, но выполнение полной сборки решило проблему.