Javascript 添加引导配置后，Aurelia官方联系人列表教程无法呈现

我正在按照官方的Aurelia教程构建一个联系人列表应用程序

我被困在“构建默认路线”的步骤中，我开始非常生气

我添加了引导和jquery的供应商依赖项，如教程中所示，但是当我启动页面时，呈现为空白，控制台输出几个错误：

    Uncaught TypeError: h.load is not a function

   Unhandled rejection Error: Failed loading required CSS file: ../node_modules/bootstrap/css/bootstrap.css
at fixupCSSUrls (http://localhost:9000/scripts/vendor-bundle.js:23357:13)
at http://localhost:9000/scripts/vendor-bundle.js:23396:16

现在，我在谷歌上搜索了很多次，发现几个用户都有同样的问题，但每个修复都不起作用。我尝试了几次修复，检查输入错误和错误（我刚刚完成了教程的一半，我可能会犯多少输入错误？？），重新启动

au run--watch

，甚至直接从教程页面复制粘贴代码（我讨厌这样做，因为这对我的学习没有帮助，但我很绝望）。没有，完全相同的错误继续出现，页面仍然空白。我真的很害怕这个看似愚蠢的小问题，比如完成一个官方教程

完整源代码我特意包含了所有文件，以向您展示我的sourcebase的外观

aurelia.json

{
  "name": "Contact Manager",
  "type": "project:application",
  "platform": {
    "id": "web",
    "displayName": "Web",
    "output": "scripts"
  },
  "transpiler": {
    "id": "babel",
    "displayName": "Babel",
    "fileExtension": ".js",
    "options": {
      "plugins": [
        "transform-es2015-modules-amd"
      ]
    },
    "source": "src/**/*.js"
  },
  "markupProcessor": {
    "id": "none",
    "displayName": "None",
    "fileExtension": ".html",
    "source": "src/**/*.html"
  },
  "cssProcessor": {
    "id": "none",
    "displayName": "None",
    "fileExtension": ".css",
    "source": "src/**/*.css"
  },
  "editor": {
    "id": "vscode",
    "displayName": "Visual Studio Code"
  },
  "unitTestRunner": {
    "id": "karma",
    "displayName": "Karma",
    "source": "test/unit/**/*.js"
  },
  "paths": {
    "root": "src",
    "resources": "src/resources",
    "elements": "src/resources/elements",
    "attributes": "src/resources/attributes",
    "valueConverters": "src/resources/value-converters",
    "bindingBehaviors": "src/resources/binding-behaviors"
  },
  "testFramework": {
    "id": "jasmine",
    "displayName": "Jasmine"
  },
  "build": {
    "targets": [
      {
        "id": "web",
        "displayName": "Web",
        "output": "scripts"
      }
    ],
    "loader": {
      "type": "require",
      "configTarget": "vendor-bundle.js",
      "includeBundleMetadataInConfig": "auto",
      "plugins": [
        {
          "name": "text",
          "extensions": [
            ".html",
            ".css"
          ],
          "stub": true
        }
      ]
    },
    "options": {
      "minify": "stage & prod",
      "sourcemaps": "dev & stage"
    },
    "bundles": [
      {
        "name": "app-bundle.js",
        "source": [
          "[**/*.js]",
          "**/*.{css,html}"
        ]
      },
      {
        "name": "vendor-bundle.js",
        "prepend": [
          "node_modules/bluebird/js/browser/bluebird.core.js",
          "scripts/require.js"
        ],
        "dependencies": [
          "aurelia-binding",
          "aurelia-bootstrapper",
          "aurelia-dependency-injection",
          "aurelia-event-aggregator",
          "aurelia-framework",
          "aurelia-history",
          "aurelia-history-browser",
          "aurelia-loader",
          "aurelia-loader-default",
          "aurelia-logging",
          "aurelia-logging-console",
          "aurelia-metadata",
          "aurelia-pal",
          "aurelia-pal-browser",
          "aurelia-path",
          "aurelia-polyfills",
          "aurelia-route-recognizer",
          "aurelia-router",
          "aurelia-task-queue",
          "aurelia-templating",
          "aurelia-templating-binding",
          {
            "name": "text",
            "path": "../scripts/text"
          },
          {
            "name": "aurelia-templating-resources",
            "path": "../node_modules/aurelia-templating-resources/dist/amd",
            "main": "aurelia-templating-resources"
          },
          {
            "name": "aurelia-templating-router",
            "path": "../node_modules/aurelia-templating-router/dist/amd",
            "main": "aurelia-templating-router"
          },
          {
            "name": "aurelia-testing",
            "path": "../node_modules/aurelia-testing/dist/amd",
            "main": "aurelia-testing",
            "env": "dev"
          },
          "jquery",
          {
            "name": "bootstrap",
            "path": "../node_modules/bootstrap/dist",
            "main": "js/bootstrap",
            "deps": ["jquery"],
            "exports": "$",
            "resources": [
              "css/bootstrap.css"
            ]
          }
        ]
      }
    ]
  }
}

app.js

import { Router, RouterConfiguration} from 'aurelia-router';

export class App {
  router: Router;

  configureRouter(config: RouterConfiguration, router: Router) {
    config.title = 'Contacts';
    config.map([
      { route: '', moduleId: 'no-selection', title: 'Select' },
      { route: 'contact/:id', muduleId: 'contact-detail', name:'contacts' }
    ]);

    this.router = router;
  }
}

和

app.html

<template>
  <require from="../node_modules/bootstrap/css/bootstrap.css"></require>
  <require from="./styles.css"></require>

  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <i class="fa fa-user"></i>
        <span>Contacts</span>
      </a>
    </div>
  </nav>

  <div class="container">
    <div class="row">
      <div class="col-md-4">
        Contact List Placeholder
      </div>

      <router-view class="col-md-8"></router-view>
    </div>
  </div>
</template>

联系人列表占位符

需要

---

您还在

app.js

中的

contacts

路径中错误放置了

moduleId

。你有

muduleId

好吧，相信我，你最好不在这里，你会被我的诅咒吓坏的，即使你是意大利人。。。 我真的不知道怎么可能，我检查了很多次，甚至在我重新开始并重写了整个该死的东西之后

无论如何，首先谢谢你。我觉得自己像个白痴

我修正了模块的输入错误，并按照建议更改了

require

语句。现在页面按预期呈现，但console仍然向我显示一个错误，指出引导程序需要Jquery。我已经通过npm安装了jQuery，所以我很困惑

这是一个

我还尝试添加

<require from="node_modules/jquery/dist/jquery.js"></require>

但是不起作用

有什么想法吗

---

为什么我必须从

require

语句中删除“./node\u modules/？它不从node_module dir加载引导？

aurelia.json

文件实际上是一个

require.js

配置文件。这两个信息应该足以知道要查看哪些文档，但基本上，

require.js

依赖关系如下：

{
  "name": "bootstrap",
  "path": "../node_modules/bootstrap/dist",
  "main": "js/bootstrap.min",
  "deps": [
    "jquery"
  ],
  "resources": [
    "css/bootstrap.min.css"
  ]
}

工作原理如下：资源是

required

模块名+资源（资源需要定义扩展！），即

，而

需要javascript文件，即只需要模块名，就需要上面定义的

主文件，或
，即：模块名称+文件的相对路径，需要一些与上述定义的
路径相关的文件

免责声明：我是一名新的web开发人员，刚开始使用Aurelia。
这只会将第二条错误消息更改为
未经处理的拒绝错误：无法加载所需的CSS文件：bootstrap/CSS/boostrap.CSS
：-）我做了两次显示的更改，您的代码加载良好。这实际上是正确的解决方案，因为像OP一样，我的require指令也有一个输入错误！
h.load
错误并不严重。@AshleyGrant非常感谢您的帮助。您的回答修复了部分问题，我的意思是，我仍然会收到关于jQuery的错误，但是页面呈现与目前预期的一样。您的回答确实很有帮助，我是新发布的，因此，我必须将您的问题标记为正确的问题，或者在我们解决jquery问题之前保持中立？@mhutter也感谢您的反馈。在更改之后，您没有像我一样得到jQuery错误？停止在requirefrom路径中添加
node\u模块
。这是你最初发行的一部分，但你现在又在这里发行了。很抱歉，您没有使用require元素加载JavaScript。在JavaScript文件中使用
import
语句加载JavaScript。我建议在继续之前重新阅读教程。不要将node_模块放在加载程序（在
aurelia.json
中）教给加载程序的路径中，当它看到
bootstrap\…
时，应该从
node_模块\bootstrap\…
@AshleyGrant中加载内容。感谢您的耐心和善意的解释。所以我需要在main.js中添加`import“jquery``以正确加载它并避免屏幕截图中的错误？jquery已经在
aurelia.js
中作为依赖项列出，您不需要添加它。请确保您拥有最新版本的Aurelia CLI。如果运行
au-v
，您应该会看到
0.19.0
或更高版本。