angular - 错误 : (SystemJS) exports is not defined

Question

我正在开发 .net 核心 mvc + Angular 应用程序。 mvc 框架处理用户管理，当用户登陆应用程序的特定区域时，angular 接管。因此，当我向网站添加一个 angular-2 (stats) 应用程序时，它就可以正常工作了。我需要实现另一个功能，所以我在同一个解决方案中添加了另一个 angular-2 应用程序(实践)。一切都很好。 Angular-4 出现了。所以更改了对 angular-4 的引用，因为我正在处理第二个 Angular 应用程序，所以有一段时间没有检查第一个 Angular 应用程序。现在，当我尝试运行第一个 Angular 应用程序(统计信息)时，我在第二个应用程序加载 Angular 时收到此错误。

两个应用共享 systemjs.config.js、package.json、tsconfig.json、typings.json。

错误:

Error: (SystemJS) exports is not defined
ReferenceError: exports is not defined
    at eval (http://localhost:60660/apps/common/date.extentions.js:2:23)
    at eval (<anonymous>)
    at Object.eval (http://localhost:60660/apps/common/daterange.component.js:13:1)
    at eval (http://localhost:60660/apps/common/daterange.component.js:40:4)
    at eval (http://localhost:60660/apps/common/daterange.component.js:41:3)
    at eval (<anonymous>)
Evaluating http://localhost:60660/apps/common/date.extentions.js
Evaluating http://localhost:60660/apps/common/daterange.component.js
Evaluating http://localhost:60660/apps/stats/app.module.js
Evaluating http://localhost:60660/apps/stats/main.js
Error loading http://localhost:60660/apps/stats/main.js
    at eval (http://localhost:60660/apps/common/date.extentions.js:2:23)
    at eval (<anonymous>)
    at Object.eval (http://localhost:60660/apps/common/daterange.component.js:13:1)
    at eval (http://localhost:60660/apps/common/daterange.component.js:40:4)
    at eval (http://localhost:60660/apps/common/daterange.component.js:41:3)
    at eval (<anonymous>)
Evaluating http://localhost:60660/apps/common/date.extentions.js
Evaluating http://localhost:60660/apps/common/daterange.component.js
Evaluating http://localhost:60660/apps/stats/app.module.js
Evaluating http://localhost:60660/apps/stats/main.js
Error loading http://localhost:60660/apps/stats/main.js

系统js.config.js

(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            stats: 'apps/stats/',
            practices: 'apps/practices',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            stats: {
                main: 'main.js',
                defaultExtension: 'js'
            },
            practices: {
                main: 'main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: 'index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

包.json

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "dependencies": {
    "@angular/common": "~4.0.0",
    "@angular/compiler": "~4.0.0",
    "@angular/core": "~4.0.0",
    "@angular/forms": "~4.0.0",
    "@angular/http": "~4.0.0",
    "@angular/platform-browser": "~4.0.0",
    "@angular/platform-browser-dynamic": "~4.0.0",
    "@angular/router": "~4.0.0",
    "@types/node": "^7.0.13",
    "angular-in-memory-web-api": "~0.3.0",
    "core-js": "2.4.1",
    "reflect-metadata": "0.1.8",
    "rxjs": "5.3.0",
    "spinkit": "1.2.5",
    "systemjs": "0.19.39",
    "typescript": "2.2.1",
    "zone.js": "0.8.5"
  },
  "devDependencies": {
    "@types/core-js": "^0.9.34",
    "concurrently": "3.1.0",
    "gulp": "3.9.1",
    "gulp-concat": "2.6.0",
    "gulp-cssmin": "0.1.7",
    "gulp-environments": "0.1.1",
    "gulp-rimraf": "0.2.0",
    "gulp-uglify": "2.0.0",
    "lite-server": "2.2.2",
    "typescript": "2.2.1",
    "typings": "~2.1.1"
  }
}

tsconfig.json

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },

    "exclude": [
      "node_modules",
      "wwwroot/lib",
      "typings"
    ]

  }

打字.json

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js#0.0.0+20160602141332",
    "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
    "node": "registry:dt/node#7.0.0+20170110233017"
  }
}

日期.extensions.ts

export { }

// DATE EXTENSIONS
// ================

declare global {
    interface Date {
        addDays(days: number, useThis?: boolean): Date;
        isToday(): boolean;
        clone(): Date;
        isAnotherMonth(date: Date): boolean;
        isWeekend(): boolean;
        isSameDate(date: Date): boolean;
        yyyy_mm_dd(): string;
    }
}

Date.prototype.addDays = function (days: number): Date {
    if (!days) return this;
    console.log(this);
    let date = this;
    date.setDate(date.getDate() + days);

    return date;
};

Date.prototype.isToday = function (): boolean {
    let today = new Date();
    return this.isSameDate(today);
};

Date.prototype.clone = function (): Date {
    return new Date(+this);
};

Date.prototype.isAnotherMonth = function (date: Date): boolean {
    return date && this.getMonth() !== date.getMonth();
};

Date.prototype.isWeekend = function (): boolean {
    return this.getDay() === 0 || this.getDay() === 6;
};

Date.prototype.isSameDate = function(date: Date): boolean {
    return date && this.getFullYear() === date.getFullYear() && this.getMonth() === date.getMonth() && this.getDate() === date.getDate();
};

Date.prototype.yyyy_mm_dd = function (): string {
    var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based
    var dd = this.getDate().toString();

    return [this.getFullYear(), '-', mm.length === 2 ? '' : '0', mm, '-', dd.length === 2 ? '' : '0', dd].join(''); // padding
}

日期.extensions.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
Date.prototype.addDays = function (days) {
    if (!days)
        return this;
    console.log(this);
    var date = this;
    date.setDate(date.getDate() + days);
    return date;
};
Date.prototype.isToday = function () {
    var today = new Date();
    return this.isSameDate(today);
};
Date.prototype.clone = function () {
    return new Date(+this);
};
Date.prototype.isAnotherMonth = function (date) {
    return date && this.getMonth() !== date.getMonth();
};
Date.prototype.isWeekend = function () {
    return this.getDay() === 0 || this.getDay() === 6;
};
Date.prototype.isSameDate = function (date) {
    return date && this.getFullYear() === date.getFullYear() && this.getMonth() === date.getMonth() && this.getDate() === date.getDate();
};
Date.prototype.yyyy_mm_dd = function () {
    var mm = (this.getMonth() + 1).toString(); // getMonth() is zero-based
    var dd = this.getDate().toString();
    return [this.getFullYear(), '-', mm.length === 2 ? '' : '0', mm, '-', dd.length === 2 ? '' : '0', dd].join(''); // padding
};
//# sourceMappingURL=date.extentions.js.map

Answer 1

要么从apps/common/date.extensions.ts 中删除export {}要么指定一个"cjs" 明确的模块格式。

SystemJS 使用模块格式检测来确定需要提供哪些变量才能加载模块。但是，它不会将您的 date.extensions.js 识别为 CommonJS，因为没有分配给 module.exports 并且没有 require 调用(< strong>1).

要显式设置模块格式，添加

packages: {
  "apps/common/date.extensions.js": {
    "format": "cjs"   
  },
  // ...
}

SystemJS 现在将使用此元数据而不是启发式方法来确定格式，因此将在加载模块时提供一个 exports 对象。

或者，由于文件不需要是模块，您可以删除 export {} 和 declare global 包装器。

1. 除其他外，这涉及正则表达式，这些正则表达式试图通过搜索 /exports\.*"\s*=\s*.+/g 等模式来检测 CommonJS。这不是然而，这并不是万无一失的，特别是考虑到 SystemJS 检测到的某些模块格式是其他模块的部分超集。例如，AMD 模块可以匹配相同的正则表达式，因为它提供了自己的 CommonJS 兼容层。也就是说，SystemJS 模块格式检测功能强大且允许许多不一致的模块系统自动和正确地交互，无需配置。Guy Bedford 做了非常出色的工作。