javascript - 放置在 "Dist"文件夹中的文件位置错误，破坏了 Angular 2 应用程序

Question

我使用mockBackend作为我的Angular2应用程序的一部分，以测试我正在开发的登录组件。我有一个独立版本的登录工作。但是当我尝试将其合并到我已经在开发的应用程序中时，我遇到了一个问题。具体来说，在编译过程中，我的一些文件似乎被放入“dist”文件夹中，这使得 Angular 无法找到它们。不知道为什么会发生这种情况。这是我在控制台中看到的错误:

http://localhost:3000/node_modules/@angular/http/bundles/http.umd.js/testing 404 (Not Found)

果然，当我查看“dist”文件中的 node_modules 时，我看到“testing”文件夹就在那里，但它并不是 Angular 正在寻找的文件夹。

几周前，我的 socket.io“dist”位置遇到了类似的问题，我必须手动调整我的 systemjs.config.js 文件以指向正确的位置。然后就成功了。在这种情况下，我需要再次这样做吗？当编译到“dist”文件夹时出现这样的错误位置时，我应该如何最好地处理它？

顺便说一下，我目前使用的是 Angular 2.0.0。

这是我的 systemjs.config.js 的内容:

/**
 * SystemJS configuration file.
 */
(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
            app: 'dist',
            // 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',
            /*'@angular/material': 'npm:@angular/material/material.umd.js',*/
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
            // 'socket.io-client': 'npm:/socket.io-client/socket.io.js',
            'socket.io-client': 'node_modules/socket.io/node_modules/socket.io-client/socket.io.js',
            // 'socket.io-client': 'dist/node_modules/socket.io/node_modules/socket.io-client/socket.io.js',
            'angular2-chartjs': 'npm:angular2-chartjs',
            'chart.js': 'npm:chart.js/dist/Chart.bundle.js'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {main: './main.js', defaultExtension: 'js'},
            rxjs: {defaultExtension: 'js'},
            'angular2-in-memory-web-api': {main: './index.js', defaultExtension: 'js'},
            'socket.io-client': {'defaultExtension': 'js'},
            'angular2-chartjs': {main: './dist/index.js', defaultExtension: 'js'}
        }
    });
})(this);

这是我的 package.json:

{
  "name": "abc",
  "version": "0.0.1",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "docs": "typedoc --experimentalDecorators --out docs/ app/ --target 'es5' -module 'system' --ignoreCompilerErrors",
    "clean": "del /q dist",
    "browserify": "^13.0.1",
    "uglifyjs": "^2.4.10",
    "minify": "uglifyjs dist/main.min.js --screw-ie8 --compress --mangle --output dist/main.min.js",
    "build": "npm run clean && tsc",
    "build_prod": "npm run build && browserify -s main dist/main.js > dist/main.min.js && npm run minify"
  },
  "license": "ISC",
  "dependencies": {
    "@angular/common": "^2.0.0",
    "@angular/compiler": "^2.0.0",
    "@angular/core": "^2.0.0",
    "@angular/forms": "^2.0.0",
    "@angular/http": "^2.0.0",
    "@angular/platform-browser": "^2.0.0",
    "@angular/platform-browser-dynamic": "^2.0.0",
    "@angular/router": "^3.0.0",
    "angular-in-memory-web-api": "~0.1.15",
    "angular2-chartjs": "^0.1.6",
    "bootstrap": "^3.3.6",
    "core-js": "^2.4.1",
    "ng2-charts": "^1.4.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.12",
    "socket.io-client": "^1.4.8",
    "systemjs": "0.19.27",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "browserify": "^13.0.1",
    "concurrently": "^2.2.0",
    "jasmine-core": "^2.5.2",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.2",
    "typings": "^1.3.2",
    "uglifyjs": "^2.4.10"
  }
}

Answer 1

所以我找到了解决办法。我必须手动将此行添加到我的 systemjs.config.js 文件中:

'@angular/http/testing': 'npm:@angular/http/bundles/http-testing.umd.js'

之后，一切都按预期进行。