У меня было приложение в 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> © <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> © {{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>
