angular - ng build --prod fungerar inte ordentligt? hur kontrollerar man detta?

Jag har en Angular CLI-applikation. Om jag kör den med kommandot ng serve fungerar det bra.

Istället för att använda ng serve, använde jag ng build --prod. det ger följande skriptfel:

skärmdump :

Jag vill kontrollera denna applikation i produktionsläge.

Här har jag bifogat min kod:

import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
import { DialogComponent } from '@syncfusion/ej2-angular-popups';
import { EmitType } from '@syncfusion/ej2-base';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title="test";
  @ViewChild('ejDialog') ejDialog: DialogComponent;
  // Create element reference for dialog target element.
  @ViewChild('container', { read: ElementRef }) container: ElementRef;
  // The Dialog shows within the target element.
  public targetElement: HTMLElement;

  //To get all element of the dialog component after component get initialized.
  ngOnInit() {
    this.initilaizeTarget();
  }

  // Initialize the Dialog component target element.
  public initilaizeTarget: EmitType<object> = () => {
    this.targetElement = this.container.nativeElement.parentElement;
  }

  // Hide the Dialog when click the footer button.
  public hideDialog: EmitType<object> = () => {
      this.ejDialog.hide();
  }
  // Sample level code to handle the button click action
  public onOpenDialog = function(event:any): void {
      // Call the show method to open the Dialog
      this.ejDialog.show();
  }
  //Animation options
  public animationSettings: Object = { effect: 'Zoom', duration: 400, delay: 0 };
  // Enables the footer buttons
  public buttons: Object = [
      {
          'click': this.hideDialog.bind(this),buttonModel:{ content:'OK', isPrimary: true }
      },
      {
          'click': this.hideDialog.bind(this),buttonModel:{ content:'Cancel' }
      }
  ];
}

Html-fil:

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Dialog Component</h2>

<button class="e-control e-btn" style="position: absolute;" id="targetButton" (click)="onOpenDialog($event)">Open Dialog</button>
<div #container class='root-container'></div>
  <ejs-dialog id='dialog' #ejDialog header='Dialog' content='Dialog enabled with Zoom effect' [target]='targetElement'
  [animationSettings]='animationSettings' width='250px' [buttons]='buttons'>
  </ejs-dialog>

om jag använder följande kommando fungerar det bra: Vad är problemet?

ng build --prod --no-build-optimizer

Svar #1

I den nya versionen behöver du använda $ng build --configuration production

Svar #2

ng serve --prod --aot=false --build-optimizer=true

Relaterade artiklar