Angular 2: Promise Ablehnung: alertify ist nicht definiert

Question

Ich versuche dies (https://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-typescript/) Tutorial/Beispiel Single Page Application auf meinem Computer (Visual Studio 2015, Win 7 Prof, Chrome Browser) laufen zu lassen und die folgende Laufzeit zu erhalten Fehler in meiner Browser-Konsole beim Versuch, die Alben-Seite zu öffnen:

platform-browser.umd.js:937 Error: Uncaught (in promise): ReferenceError: alertify is not defined 
at resolvePromise (zone.js:558) 
at zone.js:535 
at ZoneDelegate.invoke (zone.js:332) 
at Object.onInvoke (core.umd.js:9245) 
at ZoneDelegate.invoke (zone.js:331) 
at Zone.run (zone.js:225) 
at zone.js:591 
at ZoneDelegate.invokeTask (zone.js:365) 
at Object.onInvokeTask (core.umd.js:9236) 
at ZoneDelegate.invokeTask (zone.js:364)BrowserDomAdapter.logError @ platform-browser.umd.js:937ExceptionHandler.call @ core.umd.js:4392next @ core.umd.js:9971schedulerFn @ core.umd.js:9168SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ core.umd.js:9156onError @ core.umd.js:9394onHandleError @ core.umd.js:9266ZoneDelegate.handleError @ zone.js:336Zone.runGuarded @ zone.js:242_loop_1 @ zone.js:508drainMicroTaskQueue @ zone.js:515ZoneTask.invoke @ zone.js:437 

zone.js:484 Unhandled Promise rejection: alertify is not defined ; Zone: angular ; Task: Promise.then ; Value: ReferenceError: alertify is not defined(…) ReferenceError: alertify is not defined 
    at new NotificationService (http://localhost:9823/lib/spa/core/services/notificationService.js:14:26) 
    at AppView._View_Albums_Host0.createInternal (Albums.ngfactory.js:15:35) 
    at AppView.create (http://localhost:9823/node_modules/@angular/core//bundles/core.umd.js:12439:25) 
    at ComponentFactory.create (http://localhost:9823/node_modules/@angular/core//bundles/core.umd.js:9047:40) 
    at ViewContainerRef_.createComponent (http://localhost:9823/node_modules/@angular/core//bundles/core.umd.js:8354:49) 
    at eval (http://localhost:9823/node_modules/@angular/core//bundles/core.umd.js:10295:33) 
    at ZoneDelegate.invoke (http://localhost:9823/node_modules/zone.js/dist/zone.js:332:29) 
    at Object.onInvoke (http://localhost:9823/node_modules/@angular/core//bundles/core.umd.js:9245:45) 
    at ZoneDelegate.invoke (http://localhost:9823/node_modules/zone.js/dist/zone.js:331:35) 
    at Zone.run (http://localhost:9823/node_modules/zone.js/dist/zone.js:225:44) 

die notificationService.ts in Frage. Beachten Sie diese alertify außerhalb der Klasse erklärt zu der Kompilierung-Benachrichtigungen zu vermeiden:

import { Injectable } from '@angular/core'; 

declare var alertify: any; 

@Injectable() 
export class NotificationService { 
    private _notifier: any = alertify; 

    // irrelevant other code 
} 

generiert notificationService.js. scheint nichts zu haben mit "declare var aliftify: any;". Könnte in Ordnung sein, weil alertify eine externe JavaScript-Bibliothek, aber immer noch eigentümlich:

"use strict"; 
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 
    return c > 3 && r && Object.defineProperty(target, key, r), r; 
}; 
var __metadata = (this && this.__metadata) || function (k, v) { 
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v); 
}; 
var core_1 = require('@angular/core'); 
var NotificationService = (function() { 
    function NotificationService() { 
     this._notifier = alertify; 

    // irrelevant other code 
}()); 

ich den neuesten Code des Projekts von Github mit: https://github.com/chsakell/aspnet5-angular2-typescript

ich die .NET-Core-Version ändern musste von 1.0.0-preview1-002702 bis 1.0.0-preview2-003121 in global.json.

Alle Installationsanweisungen für Visual Studio 2015 in der Github-Readme wurden befolgt.

Ich lief in Package Manager-Konsole zusätzlich folgendes:‘ Bower installieren alertify.js

Eine Sache, die, dass die Versionen zwischen alertify.js unter Bower Seltsames sieht (0.3.11) und die gleiche unter NPM (1.0.12) stimmen nicht überein. Ich versuchte, die alertify Version 1.0.12 in Bower.json ändern und installieren alertify wieder, aber dies nicht gelingt:

bower alertify.js#1.0.12 ENORESTARGET No tag found that was able to satisfy 1.0.12 

die Version in package.json für NPM Wechsel nicht auch, wenn cmd läuft "npm installieren":

ERR! 
version not found: alertify.js@0.3.11 

Was könnte falsch sein? Ich bin sehr neu in all dem Material, also wäre jede Erklärung, was vor sich geht, hilfreich.

update: Hinzufügen der .js und .css Dateien heruntergeladen von http://alertifyjs.com/ in den Ordner wwwroot/lib und Aktualisieren der Stylesheet-Referenzen in index.cshtml stoppt den Fehler angezeigt und macht die Benachrichtigungsfelder schön angezeigt. Ich habe das Gefühl, dass dies immer noch eine suboptimale Lösung ist, da dieser Ansatz erfordert, dass ich die Warnmeldungsdateien manuell aktualisiere, anstatt das volle Potential von Bower und NPM zu nutzen. Wenn Sie Vorschläge zur Verbesserung dieser Lösung haben, lassen Sie es mich wissen.

Answer 1

Ich habe dieses Tutorial auch gesehen, das Problem für mich war, dass alertify eingestellt wurde, und obwohl Bower es erkennt, werden die .js-Dateien nicht heruntergeladen. Sie sollten google alibify.js herunterladen, die Skripte manuell herunterladen und sie in den Ordner stellen, in dem Ihre App nach ihnen suchen würde. Das hat das Problem für mich gelöst.

Auch bis Sie sich vertraut gemacht haben, wie alle Dinge zusammen arbeiten (und vor allem, bis die Werkzeuge in VS verbessert werden), empfehle ich, stattdessen VS Code zu verwenden. Es war viel einfacher, dieses Tutorial in Betrieb zu nehmen.

Answer 2

Bower Downloads alertify.js geht gut.NRade, ich kann nicht sehen, warum Sie

bekommen

bower alertify.js#1.0.12 ENORESTARGET No tag found that was able to satisfy  1.0.12 

Die Repo 0.3.11 Version verwendet. Erstellen Sie die folgende bower.json Datei in einem Testordner und führen Bower

{ 
    "name": "ASP.NET", 
    "private": true, 
    "dependencies": { 
     "alertify.js": "0.3.11" 
    } 
} 

installieren sollten Sie herunterladen alertify.js als here. das dazugehörige schluck tasks gezeigt stellen Sie sicher, alertify.js auf der rechten Seite kopieren Ort.