Ошибка: не удается найти модуль './components/fb-comment-embed/fb-comment-embed' - Angular Универсальный с модулем ngx-facebook - PullRequest
Новая
       8

Ошибка: не удается найти модуль './components/fb-comment-embed/fb-comment-embed' - Angular Универсальный с модулем ngx-facebook

1 голос
/ 12 марта 2020

Я использую модуль ngx-facebook в моем приложении Angular (v8.3.8) с Angular Universal, куда я импортирую ngx-facebook в моем app-module. когда я запускаю npm run build:ssr, процесс сборки завершается с несколькими предупреждениями, связанными с ngx-facebook.

WARNING in ./node_modules/ngx-facebook/dist/umd/components/fb-page/fb-page.js 22:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./node_modules/ngx-facebook/dist/umd/providers/facebook.js 3:24-31 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

и другими ....

И когда я запускаю npm run serve:ssr, выдает ошибку, говорящую Error: Cannot find module './components/fb-comment-embed/fb-comment-embed'

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

КОД:

app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from "@angular/platform-
import { NgModule } from "@angular/core";
import {
  HttpClientModule,
  HttpClient,
  HTTP_INTERCEPTORS,
  HttpClientJsonpModule
} from "@angular/common/http";
import { Routes, RouterModule } from "@angular/router";
import { AppRoutingModule } from "./app-routing.module";


import { AppComponent } from "./app.component";
import { FacebookModule, FacebookService } from "ngx-facebook";

import { ShareModalComponent } from "./share-modal/share-modal.component";

export function HttpLoaderFactory(http: HttpClient) {}

@NgModule({
  declarations: [
    AppComponent,
    ShareModalComponent
  ],
  imports: [
    AppRoutingModule,
    BrowserModule.withServerTransition({ appId: "serverApp" }),
    FormsModule,
    ReactiveFormsModule,
    HttpClientModule,
    BrowserAnimationsModule,
    SharedModule,
    FacebookModule.forRoot()
  ],
  providers: [
    FacebookService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

share-modal.component.ts - вот где я использовал ngx-facebook услугу. 

import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
import { FacebookService } from 'ngx-facebook';
import { environment } from '../../environments/environment';

@Component({
  selector: 'app-share-modal',
  templateUrl: './share-modal.component.html',
  styleUrls: ['./share-modal.component.css']
})
export class ShareModalComponent implements OnInit {
  @Input()
  expereinceTitle: string;

  @ViewChild('copyText', { read: ElementRef, static: false }) copyText: ElementRef;

  url: string;
  copyLinkButtonText: string;
  mailToHref: string;

  constructor(private fb: FacebookService) {
    this.url = window.location.href;
    this.copyLinkButtonText = 'Copy Link';
    fb.init({
      appId: environment.facebookAppId,
      xfbml: true,
      version: 'v3.2'
    });
  }

  ngOnInit() {}

  fbShare() {
    this.fb.ui({
      method: 'share',
      href: this.url
    });
  }

  messengerShare() {
    this.fb.ui({
      method: 'send',
      link: this.url
    });
  }

  copyLink() {
    const element = this.copyText.nativeElement;
    element.value = this.url;
    element.focus();
    element.select();
    document.execCommand('copy');
    this.copyLinkButtonText = 'Link Copied';
  }
}
...