3

我在 angular cli (1.7) 中有一个应用程序,我将其升级为 angular cli 6.0.8。我遇到了很多已经解决的问题。我的应用程序现在能够成功编译,但是当我尝试运行此应用程序时,我在浏览器控制台中遇到异常。错误是如此普遍(没有帮助),我没有太多经验。请指导我如何解决?

由于构造函数调用,错误似乎在 AppComponent.ts 中。如果我们需要任何额外的细节,请询问,我将分享其他文件

 compiler.js:10318 Uncaught Error: Can't resolve all parameters for AppComponent: ([object Object], [object Object], ?, [object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]).
    at syntaxError (compiler.js:178)
    at CompileMetadataResolver._getDependenciesMetadata (compiler.js:10134)
    at CompileMetadataResolver._getTypeMetadata (compiler.js:10030)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:9659)
    at CompileMetadataResolver._getEntryComponentMetadata (compiler.js:10229)
    at entryComponents.push.bootstrapComponents.map.type (compiler.js:9897)
    at Array.map (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:9897)
    at JitCompiler._loadModules (compiler.js:21156)
    at JitCompiler._compileModuleAndComponents (compiler.js:21139)

--------------app.component.ts----------------------------- -------------

import { Component, ViewEncapsulation, OnInit, OnDestroy, ViewChildren, AfterViewInit, QueryList, ElementRef, NgZone } from "@angular/core";
import { Router, NavigationStart } from '@angular/router';
//import { ToastyService, ToastyConfig, ToastOptions, ToastData } from 'ng2-toasty';
import { ToastrService, ToastrConfig /*,ToastyOptions,ToastData */ } from 'ngx-toastr';

import { ModalDirective } from 'ngx-bootstrap/modal';

import { AlertService, AlertDialog, DialogType, AlertMessage, MessageSeverity } from '../services/alert.service';
import { NotificationService } from "../services/notification.service";
import { AppTranslationService } from "../services/app-translation.service";
//import { TranslateService } from "@ngx-translate/core";
import { AccountService } from '../services/account.service';
import { LocalStoreManager } from '../services/local-store-manager.service';
import { AppTitleService } from '../services/app-title.service';
import { AuthService } from '../services/auth.service';
import { ConfigurationService } from '../services/configuration.service';
import { Permission } from '../models/permission.model';
import { LoginComponent } from "../components/login/login.component";
import { MyNavComponent } from '../my-nav/my-nav.component';
import { MyDashboardComponent } from '../my-dashboard/my-dashboard.component';
import { MyTableComponent } from '../my-table/my-table.component';
import { Title } from "@angular/platform-browser";
var alertify: any = require('../assets/scripts/alertify.js');


@Component({
  selector: "app-root",
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit, AfterViewInit {

  isAppLoaded: boolean;
  isUserLoggedIn: boolean;
  shouldShowLoginModal: boolean;
  removePrebootScreen: boolean;
  newNotificationCount = 0;
  appTitle = "Sale Store App";
  appLogo = require("../assets/images/logo.png");

  stickyToasties: number[] = [];

  dataLoadingConsecutiveFailurs = 0;
  notificationsLoadingSubscription: any;

  @ViewChildren('loginModal,loginControl')
  modalLoginControls: QueryList<any>;

  loginModal: ModalDirective;
  loginControl: LoginComponent;


  get notificationsTitle() {

    let gT = (key: string) => this.translationService.getTranslation(key);

    if (this.newNotificationCount)
      return `${gT("app.Notifications")} (${this.newNotificationCount} ${gT("app.New")})`;
    else
      return gT("app.Notifications");
  }


    constructor(storageManager: LocalStoreManager, private toastyService: ToastrService, private toastyConfig: ToastrConfig,
    private accountService: AccountService, private alertService: AlertService, private notificationService: NotificationService, private appTitleService: AppTitleService,
        private authService: AuthService, private translationService: AppTranslationService,
        public configurations: ConfigurationService, public router: Router
        ,private zone?: NgZone) {
        debugger;
    storageManager.initialiseStorageSyncListener();

    translationService.addLanguages(["en", "fr", "de", "pt", "ar", "ko"]);
    translationService.setDefaultLanguage('en');

      //translationService.setDefaultLang('en');
        //translationService.use('en');
        this.toastyConfig.positionClass = 'top-right';
        this.toastyConfig.timeOut = 1000;
        this.toastyConfig.closeButton = true;       

    //this.toastyConfig.theme = 'bootstrap';
    //this.toastyConfig.position = 'top-right';
    //this.toastyConfig.limit = 100;
    //this.toastyConfig.showClose = true;

    this.appTitleService.appName = this.appTitle;
  }


  ngAfterViewInit() {

    this.modalLoginControls.changes.subscribe((controls: QueryList<any>) => {
      controls.forEach(control => {
        if (control) {
          if (control instanceof LoginComponent) {
            this.loginControl = control;
            this.loginControl.modalClosedCallback = () => this.loginModal.hide();
          }
          else {
            this.loginModal = control;
            this.loginModal.show();
          }
        }
      });
    });
  }


  onLoginModalShown() {
    this.alertService.showStickyMessage("Session Expired", "Your Session has expired. Please log in again", MessageSeverity.info);
  }


  onLoginModalHidden() {
    this.alertService.resetStickyMessage();
    this.loginControl.reset();
    this.shouldShowLoginModal = false;

    if (this.authService.isSessionExpired)
      this.alertService.showStickyMessage("Session Expired", "Your Session has expired. Please log in again to renew your session", MessageSeverity.warn);
  }


  onLoginModalHide() {
    this.alertService.resetStickyMessage();
  }


  ngOnInit() {
    this.isUserLoggedIn = this.authService.isLoggedIn;

    // 1 sec to ensure all the effort to get the css animation working is appreciated :|, Preboot screen is removed .5 sec later
    setTimeout(() => this.isAppLoaded = true, 1000);
    setTimeout(() => this.removePrebootScreen = true, 1500);

    setTimeout(() => {
      if (this.isUserLoggedIn) {
        this.alertService.resetStickyMessage();

        //if (!this.authService.isSessionExpired)
        this.alertService.showMessage("Login", `Welcome back ${this.userName}!`, MessageSeverity.default);
        //else
        //    this.alertService.showStickyMessage("Session Expired", "Your Session has expired. Please log in again", MessageSeverity.warn);
      }
    }, 2000);


    this.alertService.getDialogEvent().subscribe(alert => this.showDialog(alert));
    this.alertService.getMessageEvent().subscribe(message => this.showToast(message, false));
    this.alertService.getStickyMessageEvent().subscribe(message => this.showToast(message, true));

    this.authService.reLoginDelegate = () => this.shouldShowLoginModal = true;

    this.authService.getLoginStatusEvent().subscribe(isLoggedIn => {
      this.isUserLoggedIn = isLoggedIn;


      if (this.isUserLoggedIn) {
        this.initNotificationsLoading();
      }
      else {
        this.unsubscribeNotifications();
      }

      setTimeout(() => {
        if (!this.isUserLoggedIn) {
          this.alertService.showMessage("Session Ended!", "", MessageSeverity.default);
        }
      }, 500);
    });

    this.router.events.subscribe(event => {
      if (event instanceof NavigationStart) {
        let url = (<NavigationStart>event).url;

        if (url !== url.toLowerCase()) {
          this.router.navigateByUrl((<NavigationStart>event).url.toLowerCase());
        }
      }
    });
  }


  ngOnDestroy() {
    this.unsubscribeNotifications();
  }


  private unsubscribeNotifications() {
    if (this.notificationsLoadingSubscription)
      this.notificationsLoadingSubscription.unsubscribe();
  }



  initNotificationsLoading() {

    this.notificationsLoadingSubscription = this.notificationService.getNewNotificationsPeriodically()
      .subscribe(notifications => {
        this.dataLoadingConsecutiveFailurs = 0;
        this.newNotificationCount = notifications.filter(n => !n.isRead).length;
      },
      error => {
        this.alertService.logError(error);

        if (this.dataLoadingConsecutiveFailurs++ < 20)
          setTimeout(() => this.initNotificationsLoading(), 5000);
        else
          this.alertService.showStickyMessage("Load Error", "Loading new notifications from the server failed!", MessageSeverity.error);
      });
  }


  markNotificationsAsRead() {

    let recentNotifications = this.notificationService.recentNotifications;

    if (recentNotifications.length) {
      this.notificationService.readUnreadNotification(recentNotifications.map(n => n.id), true)
        .subscribe(response => {
          for (let n of recentNotifications) {
            n.isRead = true;
          }

          this.newNotificationCount = recentNotifications.filter(n => !n.isRead).length;
        },
        error => {
          this.alertService.logError(error);
          this.alertService.showMessage("Notification Error", "Marking read notifications failed", MessageSeverity.error);

        });
    }
  }



  showDialog(dialog: AlertDialog) {

    alertify.set({
      labels: {
        ok: dialog.okLabel || "OK",
        cancel: dialog.cancelLabel || "Cancel"
      }
    });

    switch (dialog.type) {
      case DialogType.alert:
        alertify.alert(dialog.message);

        break
      case DialogType.confirm:
        alertify
          .confirm(dialog.message, (e) => {
            if (e) {
              dialog.okCallback();
            }
            else {
              if (dialog.cancelCallback)
                dialog.cancelCallback();
            }
          });

        break;
      case DialogType.prompt:
        alertify
          .prompt(dialog.message, (e, val) => {
            if (e) {
              dialog.okCallback(val);
            }
            else {
              if (dialog.cancelCallback)
                dialog.cancelCallback();
            }
          }, dialog.defaultValue);

        break;
    }
  }

  showToast(message: AlertMessage, isSticky: boolean) {

    if (message == null) {
      for (let id of this.stickyToasties.slice(0)) {
        this.toastyService.clear(id);
      }

      return;
    }

    ////  let toastOptions: ToastrConfig = {
    ////      titleClass: message.summary,
    ////      messageClass: message.detail,
    ////      timeOut: isSticky ? 0 : 4000,    
    ////};

      this.toastyConfig.titleClass = message.summary;
      this.toastyConfig.messageClass = message.detail;
      this.toastyConfig.timeOut = isSticky ? 0 : 4000;      

      if (isSticky) {         
      //toastOptions.onAdd = (toast: ToastData) => this.stickyToasties.push(toast.id);
      //toastOptions.onRemove = (toast: ToastData) => {
      //  let index = this.stickyToasties.indexOf(toast.id, 0);

      //  if (index > -1) {
      //    this.stickyToasties.splice(index, 1);
      //  }

      //  toast.onAdd = null;
      //  toast.onRemove = null;
      //};
    }


      switch (message.severity) {
          case MessageSeverity.default: this.toastyService.success(message.summary, message.detail,
              this.toastyConfig); break
          case MessageSeverity.info: this.toastyService.info(message.summary, message.detail,
              this.toastyConfig); break;
          case MessageSeverity.success: this.toastyService.success(message.summary, message.detail,
              this.toastyConfig); break;
          case MessageSeverity.error: this.toastyService.error(message.summary, message.detail,
              this.toastyConfig); break
          case MessageSeverity.warn: this.toastyService.warning(message.summary, message.detail,
              this.toastyConfig); break;
          case MessageSeverity.wait: this.toastyService.show(message.summary, message.detail,
              this.toastyConfig); break;
      //case MessageSeverity.default: this.toastyService.default(toastOptions); break
      //case MessageSeverity.info: this.toastyService.info(toastOptions); break;
      //case MessageSeverity.success: this.toastyService.success(toastOptions); break;
      //case MessageSeverity.error: this.toastyService.error(toastOptions); break
      //case MessageSeverity.warn: this.toastyService.warning(toastOptions); break;
      //case MessageSeverity.wait: this.toastyService.wait(toastOptions); break;
    }
  }





  logout() {
    this.authService.logout();
    this.authService.redirectLogoutUser();
  }


  getYear() {
    return new Date().getUTCFullYear();
  }


  get userName(): string {
    return this.authService.currentUser ? this.authService.currentUser.userName : "";
  }


  get fullName(): string {
    return this.authService.currentUser ? this.authService.currentUser.fullName : "";
  }



  get canViewCustomers() {
    return this.accountService.userHasPermission(Permission.viewUsersPermission); //eg. viewCustomersPermission
  }

  get canViewProducts() {
    return this.accountService.userHasPermission(Permission.viewUsersPermission); //eg. viewProductsPermission
  }

  get canViewOrders() {
    return true; //eg. viewOrdersPermission
  }
}

----------app.component.html------------------------ ------

<div id="app_container" class="{{configurations.theme | lowercase}}-theme">
  <!-- <ng2-toasty></ng2-toasty>-->
    <!--<ngx-toastr></ngx-toastr>--> 
    <div class='container'>
        <nav id="header" class="app-component navbar navbar-inner navbar-fixed-top">
            <nav class="container">
                <div class="navbar-header">
                    <button type="button" class="app-component navbar-toggle collapsed" data-toggle="collapse" data-target=".menuItemsContainer.app-component" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="app-component navbar-brand" routerLink="/">
                        <img [src]="appLogo" alt="logo">
                        <span class="app-component appTitle">{{appTitle}}</span>
                    </a>
                </div>
                <div *ngIf="isUserLoggedIn" class="app-component collapse navbar-collapse menuItemsContainer">
                    <ul class="app-component nav navbar-nav nav-pills navBarPadding">
                        <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"><a routerLink=""><span class="glyphicon glyphicon-home"></span></a></li>
                        <li routerLinkActive="active" *ngIf="canViewCustomers"><a routerLink="/customers">{{'mainMenu.Customers' | translate}}</a></li>
                        <li routerLinkActive="active" *ngIf="canViewProducts"><a routerLink="/products">{{'mainMenu.Products' | translate}}</a></li>
                        <li routerLinkActive="active" *ngIf="canViewOrders"><a routerLink="/orders">{{'mainMenu.Orders' | translate}}</a></li>
                        <li routerLinkActive="active"><a routerLink="/about">{{'mainMenu.About' | translate}}</a></li>
                    </ul>
                    <ul class="app-component nav navbar-nav nav-pills navBarPadding navbar-right">
                        <li (click)="logout()"><a href="javascript:;"><span class="glyphicon glyphicon-log-out"></span> {{'mainMenu.Logout' | translate}}</a></li>
                    </ul>
                    <p class="app-component navbar-text navbar-right notifications-popup">
                        {{'app.Welcome' | translate}}
                        <a class="app-component navbar-link user-name" [popover]="popTemplate" (onHidden)="markNotificationsAsRead()" placement="bottom" [popoverTitle]="notificationsTitle" href="javascript:;" triggers="focus">
                            {{userName}}
                            <span *ngIf="newNotificationCount > 0" class="badge">{{newNotificationCount}}</span>
                        </a>,
                    </p>

                    <ng-template #popTemplate>
                        <notifications-viewer [isViewOnly]="true"></notifications-viewer>
                    </ng-template>


                    <ul class="app-component nav navbar-nav nav-pills navBarPadding navbar-right">
                        <li routerLinkActive="active"><a routerLink="/settings"><span class="glyphicon glyphicon-cog"></span></a></li>
                    </ul>
                </div>
                <div *ngIf="!isUserLoggedIn && router.isActive('/about', false)" class="app-component collapse navbar-collapse menuItemsContainer">
                    <ul class="app-component nav navbar-nav nav-pills navBarPadding navbar-right">
                        <li routerLinkActive="active"><a routerLink="/login"><span class="glyphicon glyphicon-log-in"></span></a></li>
                    </ul>
                </div>
                <div *ngIf="!isUserLoggedIn && router.isActive('/login', false) || false" class="app-component collapse navbar-collapse menuItemsContainer">
                    <ul class="app-component nav navbar-nav nav-pills navBarPadding navbar-right">
                        <li routerLinkActive="active"><a routerLink="/about"><span class="glyphicon glyphicon-info-sign"></span></a></li>
                    </ul>
                </div>
            </nav>
        </nav>

        <div id="pre-bootstrap" *ngIf="!removePrebootScreen" [class.prebootShow.app-component]="!isAppLoaded" class="app-component prebootStep">
            <div class="messaging">
                <h1>
                    Loaded!
                </h1>
                <p>
                    Sale Store App - <span class="appName" style="font-style:italic">Sale Store</span><span class="appName">App</span> &copy; <a href="https://www.salestoreapp.com">www.salestoreapp.com</a>
                </p>

            </div>
        </div>

        <div id="mainContent" class="app-component">
            <router-outlet></router-outlet>
        </div>

        <div id="footer">
            <div class="app-component navbar-fixed-bottom navbar-inner footer">
                <div class="container">
                    <footer>
                        <div class="app-component vcenter_text center-block">
                            <p class="text-center text-muted">
                                <span class="appName" style="font-style:italic">Sale Store</span><span class="appName">App</span> &copy; {{getYear()}}
                                <a href="https://www.salestoreapp.com" target="_blank">www.salestoreapp.com</a>
                                <!--<span class="small display-none">- Powered by <a href="https://www.ebenmonney.com/quickapp" target="_blank"><span class="appName" style="font-style:italic">quick</span><span class="appName">App</span></a></span>-->
                            </p>
                        </div>
                    </footer>
                </div>
            </div>
        </div>
    </div>

    <div *ngIf="shouldShowLoginModal" class="modal fade" bsModal #loginModal="bs-modal" (onShown)="onLoginModalShown()" (onHidden)="onLoginModalHidden()" (onHide)="onLoginModalHide()"
         [config]="{backdrop: 'static'}" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <app-login #loginControl isModal="true"></app-login>
        </div>
    </div>
</div>
4

0 回答 0