Не удается прочитать свойство «ngMetadataName» неопределенного

Я использую Angular 6 с Angular Material. После обновления до последней версии консоль выдает эту ошибку в разработке. На производстве все работает

Cannot read property 'ngMetadataName' of undefined

Это происходит, когда я пытаюсь открыть диалог материалов через службу (без службы они работают нормально). Я думаю, что это связано с инъекциями, но я не уверен.

Версии: cli: 6.1.5, ядро: 6.1.4, материал: 6.4.6

Вот стек логов:

CustomDialogComponent_Host.ngfactory.js? [sm]:1 ERROR TypeError: Cannot read property 'ngMetadataName' of undefined
at injectArgs (core.js:1418)
at core.js:1491
at _callFactory (core.js:8438)
at _createProviderInstance (core.js:8396)
at resolveNgModuleDep (core.js:8371)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:9064)
at PortalInjector.push../node_modules/@angular/cdk/esm5/portal.es5.js.PortalInjector.get (portal.es5.js:732)
at resolveDep (core.js:9419)
at createClass (core.js:9309)
at createDirectiveInstance (core.js:9186)

Любая помощь будет оценена по достоинству.

диалог внутри службы, где выдается ошибка:

 @Injectable({
  providedIn: 'root'
})
export class customService {
  constructor(private store: Store<RootState>, private dialog: MatDialog) {}

const dialogRef = this.dialog.open(customDialogComponent, {
  width: '300px',
  data: {
    loading: false,
    customId,
  }
});

angular angular-cli angular6 angular-material-6
person Aslam    schedule 27.08.2018    source источник
comment
укажите версии @angular/cdk, @angular/core и @angular/material, которые вы используете/   -  person SiddAjmera    schedule 27.08.2018
comment
@SiddharthAjmera, добавил.   -  person Aslam    schedule 27.08.2018
comment
я получил ту же ошибку, потому что в одном файле определены две службы, в то время как первая служба в файле использовала вторую в качестве DI (которая не была определена в это время, потому что объявлена ​​после первой)   -  person cyptus    schedule 15.01.2019

Ответы (8)


arrow_upward
37
arrow_downward

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

Возможно, другие предупреждающие сообщения во время процесса компиляции помогут исправить это.

Чтобы увидеть созданную циклическую зависимость в вашем проекте angular, включите showCircularDependencies в angular.json, изменив ее значение с false на true.

person user3102108    schedule 17.09.2018
comment
Я рекомендую использовать плагин циклических зависимостей для веб-пакета, который показал нам кучу циклических зависимостей, исправление которых приводит к исчезновению вышеуказанной ошибки: npmjs.com/package/circular-dependency-plugin - person DarkNeuron; 18.02.2019
comment
То же самое случилось со мной - person Rojy Kumari; 28.04.2019

arrow_upward
18
arrow_downward

Я столкнулся с этой ошибкой, когда обновил Angular с помощью CLI версии 8.0.4. Мне пришлось перейти на @angular-devkit/build-angular 0.800.3, а Angular CLI — на версию 8.0.3.

npm i --save-dev @angular-devkit/[email protected] @angular/[email protected]
person Matt Walterspieler    schedule 25.06.2019
comment
Это тоже решило мою проблему. Не уверен, почему. Есть ли у вас какие-либо теории о том, почему это происходит на 8.0.4? Я также обнаружил, что при использовании этой версии Angular во время выполнения жаловался на отсутствующий интерфейс, объявленный в том же файле. - person Gabriel G.; 26.06.2019
comment
Я читал об угловых проблемах GitHub, которые были исправлены в следующей ночной сборке. Думаю, нам просто нужно дождаться следующего релиза. Хотя я понятия не имею, почему это происходит. - person Matt Walterspieler; 26.06.2019
comment
@Габриэль Г. Не проверял, но я думаю, что это происходит, когда у вас есть декоратор @Inject(..) и одновременно определяется тип параметра. - person Gökhan Kurt; 27.06.2019
comment
@GökhanKurt, не могли бы вы подробнее объяснить, что именно вызывает это? Я столкнулся с этим с помощью Inject, но не мог понять, почему это иногда происходит. Очень хотелось бы создать пример. - person Bryant; 30.06.2019
comment
У меня была эта ошибка в CLI 8.0.6, и переход на 8.0.3 исправил ее для меня. - person S. Baggy; 01.07.2019
comment
Для справки: проблема закрыта github.com/angular/angular/commit/ - person Matt Walterspieler; 01.07.2019
comment
Есть идеи, почему этот вопрос был закрыт? - person esastincy; 02.07.2019
comment
Это исправлено в последней версии 8.1.0. - person Exocomp; 03.07.2019
comment
Дополнительная информация о проблеме: github.com/angular/angular-cli/ вопросы/ - person Matt Walterspieler; 03.07.2019

arrow_upward
2
arrow_downward

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

person Stanislav Berkov    schedule 05.09.2019
comment
У меня была та же проблема, но это было только потому, что классы были @Injectable, а не обязательно сервисом. - person krillgar; 22.01.2020

arrow_upward
1
arrow_downward

Попробуйте понизить версию @angular/core до 6.0.0.

Вот Образец проекта StackBlitz, который поможет вам разобраться с версиями различных пакетов. . Довольно много проблем с несоответствием версий, из-за которых возникают эти ошибки.

Вот еще несколько конфигураций, которые хорошо работают друг с другом:

    "@angular/animations": "6.0.5",
    "@angular/common": "6.0.0",
    "@angular/compiler": "6.0.0",
    "@angular/core": "6.0.0",
    "@angular/cdk": "6.4.6",
    "@angular/material": "6.4.6"
person SiddAjmera    schedule 27.08.2018
comment
Не повезло. На самом деле модальные окна открываются нормально, единственная проблема заключается в том, что я открываю модальные окна через службу. Инъекции вызывают ошибку. - person Aslam; 27.08.2018
comment
Хорошо. Создайте stackbliz и, возможно, кто-то заглянет в него. Только кажется, что могут быть некоторые проблемы с синтаксисом. - person SiddAjmera; 27.08.2018
comment
Кроме того, на производстве это работает, это просто с разработкой. - person Aslam; 27.08.2018
comment
Вернулся к старому образу, все работает. Спасибо за помощь. Но я все равно буду ждать других ответов, чтобы решить проблему. - person Aslam; 27.08.2018
comment
Можно поставить v7.2.2. Это стабильно. См.: stackoverflow.com/questions/52476229/ - person Victor Jatobá; 14.03.2019

arrow_upward
0
arrow_downward

Я столкнулся с той же проблемой в моем проекте Angular 7.

constructor(private worksheetHandler: WorksheetPayloadHandler,
    private worksheetRepository: WorksheetRepository) { }

Как упомянул пользователь 3102108, проблема была связана с обнаружением циклической зависимости. Для подтверждения вы можете запустить ng build и проверить предупреждения в терминале. Я получал предупреждение, как показано ниже.

WARNING in Circular dependency detected:
src\modules\service\services\worksheets\worksheet.events.service.ts -> src\modules\service\services\worksheets\worksheet.repository.ts -> src\modules\service\services\worksheets\worksheet.events.service.ts

WARNING in Circular dependency detected:
src\modules\service\services\worksheets\worksheet.repository.ts -> src\modules\service\services\worksheets\worksheet.events.service.ts -> src\modules\service\services\worksheets\worksheet.repository.ts

После удаления циклической зависимости проблема была решена.

person Sibeesh Venu    schedule 29.04.2019
comment
В моем случае циклическая зависимость была проблемой, но ng build не дал никакой полезной информации. - person Mojtaba; 28.11.2019

arrow_upward
0
arrow_downward

В вашем коде может быть циклическая зависимость.

решите это, эта ошибка пойдет.

person Community    schedule 22.11.2019

arrow_upward
0
arrow_downward

В прошлый раз, когда я ng serve, появилось сообщение

Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`

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

После этого предупреждение о смешивании lockfiles.

В итоге я просто обновил и установил npm и проигнорировал начальное предупреждающее сообщение.

Другой рекомендуемый вариант, если вы все еще хотите использовать новейший angular,
использовать с ng serve --aot.

person Christian Læirbag    schedule 01.11.2019

arrow_upward
0
arrow_downward

Проверьте несколько вещей..

1>Убедитесь, что все определяемые пользователем службы зарегистрированы в app.module.ts провайдерах[]

2> Все модули Angular (например, AppRoutingModule, FormsModule, HttpClientModule) должны быть зарегистрированы в разделе imports[]

Это решило мою проблему.

person Gangadhar Panda    schedule 13.06.2020