Question

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

两个应用程序共享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

systemjs.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);

的package.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"
    ]

  }

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"
  }
}

date.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
}

date.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 {}，要么指定模块格式{{ 1}}明确。

SystemJS使用模块格式检测来确定需要提供哪些变量才能加载模块。但是，它不会将您的"cjs"识别为CommonJS，因为date.extensions.js和module.exports来电没有分配（ 1 ）。

要明确设置模块格式，请添加

require

SystemJS现在将使用此元数据而不是启发式来确定格式，因此在加载模块时将提供packages: { "apps/common/date.extensions.js": { "format": "cjs" }, // ... }对象。

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

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

错误：未定义（SystemJS）导出

1 个答案: