Angular 2: не найдены метаданные NgModule

Ответ 1

Проблема заключается в вашем файле main.ts.

const platform = platformBrowserDynamic();
platform.bootstrapModule(App);

Вы пытаетесь загрузить App, который не является реальным модулем. Удалите эти две строки и замените их следующей строкой:

platformBrowserDynamic().bootstrapModule(AppModule);

и он исправит вашу ошибку.

Ответ 2

У меня была эта ошибка, хотя у меня было все, что было предложено выше. Простое редактирование в файле app.module.ts (например, удаление скобки и его возврат) выполнило трюк.

Ответ 3

Попробуйте удалить node_modules rm -rf node_modules и package-lock.json rm -rf package-lock.json, после этого запустите npm install.

Ответ 4

После перехода на Angular 6 я столкнулся с "ERROR in No NgModule metadata found for 'AppModule'." с пакетом angular-bootstrap-md, для которого требуется tsconfig.json "включить" следующим образом:

"include": ["node_modules/angular-bootstrap-md/**/*.ts", "src/**/*.ts"],

После нескольких дней устранения неполадок и вытягивания волос решение состояло в том, чтобы упорядочить список, чтобы сначала был расположен app.module.ts, в разделе "src/**/*. Ts". Угловая ошибка, может быть?

"include": ["src/**/*.ts","node_modules/angular-bootstrap-md/**/*.ts" ],

Я искренне надеюсь, что это поможет кому-то, поскольку я пробовал все в этой публикации и ничего не помогал. После этого изменения все компилируется и работает красиво, как и ожидалось.

Ответ 5

Проблема исправлена только при переустановке angular/cli вручную. Выполните следующие шаги. (запустите всю команду под Angular Project DIR)

1) Удалите веб-пакет, используя следующую команду.

npm remove webpack

2) Установите cli, используя следующую команду.

npm install --save-dev @angular/[email protected]

После успешного тестирования приложения оно будет работать :)

если нет, то выполните следующие шаги.

1) Удалить папку node_module.

2) Очистите кеш, используя следующую команду.

npm cache clean --force

3) Установите пакеты узлов с помощью следующей команды.

npm install

4) Установите angular @cli с помощью следующей команды.

npm install --save-dev @angular/[email protected]

Примечание: если не удалось, попробуйте еще раз :)

5) отпраздновать :)

Ответ 6

Есть больше причин для получения этой ошибки. Это означает, что ваше приложение не удалось построить, как ожидалось.

Проверьте следующее.

• Проверьте, не изменилась ли версия node_modules, это основная причина.
• Если вы переходите из какого-либо другого инструмента сборки в webpack, например Systemjs to Webpack, если некоторые из ваших зависимостей не являются модульными в вы можете получить эту ошибку, проверьте это тоже.
• Проверить устаревшие функции фреймворка, Ex: "HTTP_PROVIDERS" в angular 2 и удалите их.
• Если вы выполняете обновление, убедитесь, что вы выполняете текущий синтаксис Framework, для Ex: синтаксис routing был изменен в Angular2..
• Проверьте процесс Bootstraping и убедитесь, что вы загружаете правильный модуль.

Ответ 7

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

При тщательном наблюдении я заметил следующее в app.module.ts:

imports: [
  BrowserModule,
  BrowserAnimationsModule,
  FormsModule,
  HttpClientModule,, // Redundant comma 
  CoreModule
];

Итак, я немного ударил головой. Дополнительная запятая, очень невинно освещенная WebStorm, как мягкое предупреждение, вызвала хаос, вставив пустой массив в массив. Наблюдение за elision trap;)

Ответ 8

В вашем main.ts вы загружаете как AppModule, так и ваше приложение. Это должен быть просто AppModule, который затем загружает приложение.

Если вы сравните свой файл main.ts с документами, вы увидите разницу - просто удалите все ссылки на приложение из main.ts

Ответ 9

С Angular 5, я решил аналогичную проблему, урезав до @angular/cli 1.6.1 из 1.5.5:

"devDependencies": {
  "@angular/cli": "1.6.1"
}

Во время ng serve я получил ошибку:

ERROR in Error: No NgModule metadata found for 'AppModule'.
    at NgModuleResolver.resolve (/path/to/project/app/node_modules/@angular/compiler/bundles/compiler.umd.js:20247:23)

Ответ 10

У меня была такая же проблема, и я не смог ее решить, прочитав все вышеперечисленные ответы. Затем я заметил, что дополнительная запятая в объявлениях создавала проблему. Удалено, проблема решена.

@NgModule({
    imports: [
        PagesRoutingModule,
        ThemeModule,
        DashboardModule,
    ],
    declarations: [
        ...PAGES_COMPONENTS,
        **,**
    ],
})

Ответ 11

Надеюсь, это поможет. В моем случае я работаю с модулем ERROR in No NgModule metadata found for 'MyModule'. загрузки и обнаружил, что эта ошибка привела к ERROR in No NgModule metadata found for 'MyModule'.

in app-routing.module.ts
{ path: 'mc3', loadChildren: 'app/module/my/my.module#MxModule' },

Если я запускаю ng serve --aot chrome dev tool может сказать мне Error: Cannot find 'Mc4Module' in 'app/module/mc3/mc3.module'

Ответ 12

У меня была эта проблема, когда я клонировал из репозитория git, и я решил, когда я создал новый проект и снова вставил папку src из старого проекта.

Папка src является единственной папкой, необходимой при развертывании вашего приложения angular, но вы должны перенастроить среду dev, используя это решение.

Ответ 13

Наконец я нашел решение.

1. Удалите webpack, используя следующую команду.

npm remove webpack

2. Установите cli, используя следующую команду.

npm install --save-dev @angular/[email protected]

после успешного тестирования приложение будет работать :)

Если нет, выполните следующие шаги:

1. Удалите папку node_module.
2. Очистите кеш с помощью следующей команды.

npm cache clean --force

3. Установите пакеты узлов, используя следующую команду.

npm install

4. Установите угловую @cli, используя следующую команду.

npm install --save-dev @angular/[email protected]

Примечание. Если не удалось, повторите шаг 4. Это будет работать.

Ответ 14

вам нужно включить директиву ngModel. Это делается путем добавления FormsModule к массиву import [] в AppModule.

Затем вам необходимо добавить импорт из @angular/forms в файл app.module.ts: import {FormsModule} из '@angular/forms';

Ответ 15

Мы сталкивались с этой проблемой в Angular Cli 1.7.4. Первоначально у нас есть

Cannot read property 'config' of null
TypeError: Cannot read property 'config' of null

И исправление этого приводит к вышеупомянутой проблеме.

Мы удалили package-lock.json

npm remove webpack

npm cache clean --force

Вы также можете удалить папку node_modules. А затем очистите кеш. переустановить угловой кли:

npm install @angular/[email protected]

И затем вы можете снова установить npm, чтобы убедиться, что все установлено.

Затем запустите

npm ls --depth 0

Чтобы убедиться, что все ваши узловые_модули синхронизированы друг с другом. Если есть какая-либо несоответствие зависимости, это возможность для нас выяснить.

Наконец запустите npm start/ng. он должен исправить все.

Это код чит-кода, за которым мы последуем, если у нас возникнут проблемы с cli, прежде чем мы углубимся. 95% случаев он исправляет все проблемы.

Надеюсь, это поможет.

Ответ 16

В моем случае я пытался обновить свой проект с угловым 6, используя ng update после чего весь юниверс рушится.

Я пытался обновить свой проект, используя следующие команды:

• ng update @angular/cli
• ng update @angular/core
• ng update @угловой/материал

И затем я нашел проблему с пакетом rxjs, и я запускаю также эту команду. - npm install --save rxjs

И затем я получаю ошибку

Метаданные NgModule не найдены

Я решаю это, удалив папку node_modules в корне проекта, а затем запустим:

• Установка npm

То есть все работает хорошо.

Ответ 17

Я обнаружил, что причиной этой проблемы в моем случае было то, что я объединил мое приложение Angular с приложением node.js в том же дереве исходных tsconfig.json и в корне tsconfig.json меня был:

"files": [ "./node_modules/@types/node/index.d.ts" ]

Я изменил это на

"compilerOptions": { "types": ["node"] }

А затем, чтобы предотвратить использование типов узлов в вашем угловом приложении, добавьте это в tsconfig.app.json:

"compilerOptions": { "types": [] }

Ответ 18

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

Я использую функцию setTimeout в app.component, но по любой причине Visual Studio добавил import { setTimeout } from 'timer'; там, где она не была нужна. Удаление этой строки устранило проблему.

Поэтому не забудьте проверить свой импорт, прежде чем идти дальше. Надеюсь, это может кому-то помочь.

Ответ 19

  Я бы порекомендовал повторно запустить приложение. Редактор большинства случаев не сможет обнаружить изменения в загруженном модуле.

Ответ 20

Я дам вам несколько советов. Измените все, как указано ниже

1)<script src="polyfills.bundle.js"></script>(index.html)  //<<<===not sure as Angular2.0 final version doesn't require this.

2)platform.bootstrapModule(App); (main.ts)

3)import { NgModule } from '@angular/core'; (app.ts)

Ответ 21

Использование ngcWebpack Plugin Я получил эту ошибку, если не укажу mainPath или entryModule.