2
私はAureliaの公式チュートリアルに従って連絡先リストアプリケーションを構築しています。Aureliaの公式コンタクトリストのチュートリアルは、ブートストラップ設定を追加した後にレンダリングに失敗する
私は「既定のルートを構築する」ステップで立ち往生しています。私は本当に腹を立てます。 、
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
は今、私はたくさんググ：
私はチュートリアルに示すように、ブートストラップやjqueryのためのベンダー依存関係を追加しましたが、私はページを起動すると、空白とコンソール出力いくつかのエラーをレンダリング同じ問題を抱える複数のユーザーが見つかりましたが、すべての修正が機能しませんでした。私はいくつかの修正を試み、タイプミスやエラーをチェックしました（私はチュートリアルの途中で何回入力ミスがあったのでしょうか？）、au run --watchを再起動して、チュートリアルページからコードを直接貼り付けてコピーします私の学習には役立たないので、これをしてください。しかし、私は絶望的でした）。何も、全く同じエラーが発生し続け、ページはまだ空白です。私は公式のチュートリアルを完成させるような、このような小さな愚かな問題については本当に驚いています。
完全ソースhere私は、ソースベースの見た目を正確に示すために、すべてのファイルを目的に含むようにしました。
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>
これは、2番目のエラーメッセージを「未処理の拒否エラー：必要なCSSファイルの読み込みに失敗しました：bootstrap/css/boostrap.css'： – mhutter
に変更しました。 –
実際には正しい解決策です。なぜなら、OPのように、私の必要な指示にも誤植があったからです！ 'h.load'エラーは重要ではありません。 – mhutter