Question

我遇到了一个问题，我似乎无法弄清楚原因。

当我执行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

这是angular/core中的问题。它已在v4.4.3。中修复。

能否请您检查您的angular/core版本？

Answer 2

在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);

但是，如果这是库中的组件，那么解决问题就不会那么简单。

一种解决方案是尝试使用相同的动态创建自己实现这种逻辑。似乎还早已遇到了此问题，解决方案之一是回滚到先前版本的库： https://github.com/angular/components/issues/11844

Answer 3

此错误可能是因为您的表情符号选择器和Angular版本不兼容。您必须获得与您的Angular版本兼容的正确的表情符号选择器版本。

自从您提到过，您就使用了角度v8。与angular v8一起使用的最新版本是1.0.6。 dependencies here

错误NullInjectorError：StaticInjectorError（oo）[SS-> e]：在生产环境中，不在本地主机上发生

3 个答案: