Angular 2: Promise rejection: alertify 未定义

Question

我正在尝试在我的机器上制作这个 (https://chsakell.com/2016/01/01/cross-platform-single-page-applications-with-asp-net-5-angular-2-typescript/) tutorial/example 单页应用程序运行 (Visual Studio 2015, Win 7 Prof, Chrome 浏览器）并在尝试打开相册页面时在我的浏览器控制台中出现以下运行时间错误：

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。请注意，这在 class 之外声明了 alertify 以避免编译时通知：

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

declare var alertify: any;

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

    // irrelevant other code
}

生成notificationService.js。 "declare var alertify: any;" 似乎没有对应的东西。可能没问题，因为 alertify 是一个外部 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

我不得不在 global.json.[=19 中将 .NET Core 版本从 1.0.0-preview1-002702 更改为 1.0.0-preview2-003121 =]

已遵循 github 自述文件中 Visual Studio 2015 的所有安装说明。

我运行在程序包管理器控制台中另外添加了以下内容：' 凉亭安装 alertify.js

一件看起来 st运行ge 的事情是 Bower (0.3.11) 下的 alertify.js 和 NPM (1.0.12) 下的相同版本不匹配。我尝试在 Bower.json 中将 alertify 版本更改为 1.0.12 并再次安装 alertify，但这失败了：

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

当运行ning cmd "npm install":

时，在 package.json 中更改 NPM 的版本也会失败

ERR!
 version not found: alertify.js@0.3.11

有什么问题吗？我对这一切都很陌生 material 所以任何关于正在发生的事情的解释都会有所帮助。

更新：将从 http://alertifyjs.com/ 下载的 .js 和 .css 文件添加到 wwwroot/lib 文件夹并更新 index.cshtml 中的样式表引用可阻止错误出现并使通知框显示得很漂亮。我觉得这仍然是一个次优的解决方案，因为这种方法需要我手动更新 alertify 文件，而不是充分利用 bower 和 NPM 的全部潜力。如果您对如何改进此解决方案有任何建议，请告诉我。

Answer 1

我也看过那个教程，对我来说问题是 alertify 已停止，因此即使 bower 识别它，也不会下载 .js 文件。您应该 google alertify.js，手动下载脚本并将它们放入您的应用程序将查找它们的文件夹中。这解决了我的问题。

此外，在您熟悉所有事物如何协同工作之前（尤其是在 VS 中的工具得到改进之前），我建议改用 VS Code。开始学习该教程，运行使用起来更容易。

Answer 2

Bower 下载 alertify.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"
    }
}

您应该下载 alertify.js 如图所示 here. 关联的gulptasks确保复制alertify.js在正确的地方。

Angular 2: Promise rejection: alertify 未定义

Angular 2: Promise rejection: alertify is not defined

javascript

angular

typescript

angular-promise

alertify