Угловой 2: Отклонение обещания: оповещение не определено

Question

Я пытаюсь сделать это ( https://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-typescript/) учебное пособие / пример Одностраничное приложение запускается на моем компьютере (Visual Studio 2015, Win 7 Prof, Chrome Browser) и выдает следующую ошибку времени выполнения в консоли браузера при попытке открыть страницу "Альбомы":

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)

NotificationService.ts в вопросе. Обратите внимание, что это объявляет о предупреждении вне класса, чтобы избежать уведомлений времени компиляции:

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

declare var alertify: any;

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

    // irrelevant other code
}

Сгенерировано уведомление Service.js. Похоже, что ничего не имеет значения, чтобы "объявить var alerttify: any;". Может быть, все в порядке, так как alerttify является внешней библиотекой JavaScript, но все еще своеобразна:

"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
}());

Я использую последний код проекта от github: https://github.com/chsakell/aspnet5-angular2-typescript

Мне пришлось изменить версию.NET Core с 1.0.0-preview1-002702 на 1.0.0-preview2-003121 в global.json.

Все инструкции по установке Visual Studio 2015 в git-файле readme были выполнены.

Я дополнительно запустил в консоли диспетчера пакетов:' bower install alertstify.js

Одна странная вещь заключается в том, что версии между alerttify.js в Bower (0.3.11) и в NPM (1.0.12) не совпадают. Я попытался изменить версию alerttify на 1.0.12 в Bower.json и снова установить alerttify, но это не удалось:

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

изменение версии в package.json для NPM также завершается неудачно при запуске cmd "npm install":

ERR!
 version not found: alertify.js@0.3.11

Что может быть не так? Я очень новичок во всем этом материале, поэтому любое объяснение того, что происходит, будет полезно.

обновление: добавление файлов.js и.css, загруженных с http://alertifyjs.com/ в папку wwwroot/lib и обновление ссылок на таблицы стилей в index.cshtml предотвращает появление ошибки и прекрасно отображает окна уведомлений. Я чувствую, что это все еще неоптимальное решение, так как этот подход требует, чтобы я обновлял файлы предупреждений вручную, а не использовал полную мощь и полный потенциал NPM. Если у вас есть предложения по улучшению этого решения, дайте мне знать.

Answer 1

Я также видел этот учебник, проблема для меня заключалась в том, что оповещение прекращено, и поэтому, даже если Бауэр распознает его, файлы.js не загружаются. Вам нужно зайти в google alerttify.js, скачать скрипты вручную и поместить их в папку, в которой ваше приложение будет их искать. Это решило проблему для меня.

Кроме того, пока вы не ознакомитесь с тем, как все это работает вместе (и особенно, пока не улучшится инструментарий в VS), я предлагаю вместо этого использовать VS Code. Начать работу с этим учебником было гораздо проще.

Answer 2

Бауэр скачивает alerttify.js просто отлично. NRade, я не могу понять, почему вы получаете

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

В репо используется версия 0.3.11. Создайте следующий файл bower.json в тестовой папке и запустите bower install

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

Вы должны скачать alertstify.js, как показано здесь. Связанные задачи gulp обязательно скопируйте в файл alerttify.js в нужное место.