ERROR NullInjectorError: StaticInjectorError (oo) [SS -> e]: на производстве, не происходит на локальном хосте

Question

У меня проблема angular, и я не могу понять, почему.

Когда я делаю ng serve и запускаю код локально, все работает нормально. Нет сообщений об ошибках или предупреждений.

Однако, когда я использую ng build --prod и загружаю файл dist в AWS, теперь я получаю сообщение об ошибке при нажатии кнопки.

Ошибка:

    main-es2015.9568554f8026ce400f37.js:1 ERROR NullInjectorError: StaticInjectorError(oo)[SS -> e]: 
    StaticInjectorError(Platform: core)[SS -> e]: 
    NullInjectorError: No provider for e!
    at Oe.get (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:483678)
    at https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:494184
    at e (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:494566)
    at Nt.get (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:494717)
    at https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:494184
    at e (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:494566)
    at Nt.get (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:494717)
    at Di (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:515973)
    at Ui.get (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:524593)
    at hs (https://dashboard.myurl.com/main-es2015.9568554f8026ce400f37.js:1:528442)

Это происходит по нажатию кнопки. Я использую Angular материал MatBottomSheet, функция:

  openEmojiSelect(): void {
    this.req.trackEvent("Editor page", "Opened emoji selector", "click")
    const bottomRef = this._bottomSheet.open(EmojiComponent, {
      panelClass: 'emoji-panel-width'
    });
    bottomRef.afterDismissed().subscribe(() => {
      console.log(this.req.getModuleEmoji())
      this.moduleData.module.image_position = this.req.getModuleEmoji();
    });
  }

Я должен импортировать все правильно:

//imports
import { Component, OnInit } from '@angular/core';
import {CdkDragDrop, moveItemInArray} from '@angular/cdk/drag-drop';
import {MatDialog} from '@angular/material/dialog';
import { SnippetsComponent } from './snippets/snippets.component';
import { QuestionsComponent } from './questions/questions.component';
import { EmojiComponent } from './emoji/emoji.component';
import {MatBottomSheet, MatBottomSheetRef} from '@angular/material/bottom-sheet';
import { RequestsService } from '../../../requests.service';
import {Router, ActivatedRoute, Params} from '@angular/router';

 //constructor
  constructor(public dialog: MatDialog,
    public req: RequestsService,
    private activatedRoute: ActivatedRoute,
    private router: Router,
  private _bottomSheet: MatBottomSheet) { }

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

Есть идеи? Спасибо

Обновление:

Я запустил ng serve --prod, что дало мне более дословное сообщение об ошибке:

ERROR NullInjectorError: StaticInjectorError(AppModule)[ctrl_ngx_emoji_mart_CategoryComponent -> EmojiFrequentlyService]: 
  StaticInjectorError(Platform: core)[ctrl_ngx_emoji_mart_CategoryComponent -> EmojiFrequentlyService]: 
    NullInjectorError: No provider for EmojiFrequentlyService!

Answer 1

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

Я столкнулся с такой проблемой, ее решение в том, что мы генерируем компонент с помощью его селектора, он не минифицируется после сборки prod. Пример:

const factory = Array.from<any>(this.resolver['_factories'].values()).find(
    (item) => item.selector === 'app-modal-container'
);
const componentRef = viewContainerRef.createComponent<ModalContainerComponent>(factory);

Но, если это компонент из библиотеки, то решить проблему будет не так просто.

Одним из решений было бы попробовать реализовать такой logi c сами используя тот же динамик c создание. Также кажется, что эта проблема уже встречалась ранее и одним из решений был откат к предыдущей версии библиотеки: https://github.com/angular/components/issues/11844

Answer 2

Эта ошибка может быть связана с несовместимой версией средства выбора смайлов и Angular. Вы должны получить правильную версию средства выбора смайлов, которая работает с вашей версией Angular.

Поскольку вы упомянули, вы использовали angular v8. Последняя версия, которая работает с angular v8, - 1.0.6. здесь зависимости

Answer 3

Это проблема в angular/core. Это уже было исправлено в v4.4.3.

Не могли бы вы проверить свою angular/core версию?