Aurelia Anwendung Startproblem in Kontakt-Manager-Tutorial

Question

Ich arbeite durch die Kontakt-Manager-Tutorial und wenn ich auf den Zusatz des Routers komme meine App funktioniert nicht mehr. Irgendwelche Hinweise würden geschätzt werden. Es scheint ein Problem beim Laden von bootstrap.css zu sein. Dies ist die Ausgabe aus dem Chrome Debug-Fenster:

DEBUG [aurelia] Loading plugin aurelia-templating-binding. vendor-bundle.js:13902 

DEBUG [aurelia] Configured plugin aurelia-templating-binding. vendor-bundle.js:13902 

DEBUG [aurelia] Loading plugin aurelia-templating-resources. vendor-bundle.js:13902 

DEBUG [aurelia] Configured plugin aurelia-templating-resources. vendor-bundle.js:13902 

DEBUG [aurelia] Loading plugin aurelia-event-aggregator. vendor-bundle.js:13902 

DEBUG [aurelia] Configured plugin aurelia-event-aggregator. vendor-bundle.js:13902 

DEBUG [aurelia] Loading plugin aurelia-history-browser. vendor-bundle.js:13902 

DEBUG [aurelia] Configured plugin aurelia-history-browser. vendor-bundle.js:13902 

DEBUG [aurelia] Loading plugin aurelia-templating-router. vendor-bundle.js:13902 

DEBUG [aurelia] Configured plugin aurelia-templating-router. vendor-bundle.js:13902 

DEBUG [aurelia] Loading plugin resources/index. vendor-bundle.js:13902 

DEBUG [aurelia] Configured plugin resources/index. vendor-bundle.js:13902 

DEBUG [aurelia] Loading plugin aurelia-testing. vendor-bundle.js:13902 

DEBUG [aurelia] Configured plugin aurelia-testing. vendor-bundle.js:13902 

DEBUG [templating] importing resources for aurelia-templating-resources/compose [] vendor-bundle.js:13902 

DEBUG [templating] importing resources for aurelia-templating-router/router-view [] vendor-bundle.js:13912 

INFO [aurelia] Aurelia Started vendor-bundle.js:13902 

DEBUG [templating] importing resources for app.html ["bootstrap/css/bootstrap.css", "styles.css"] vendor-bundle.js:4834 

Uncaught TypeError: plugin.load is not a function 

at Module.<anonymous> (vendor-bundle.js:4834) 

at vendor-bundle.js:3873 

at on (vendor-bundle.js:4256) 

at Module.callPlugin (vendor-bundle.js:4694) 

at Module.fetch (vendor-bundle.js:4563) 

at Module.check (vendor-bundle.js:4595) 

at Module.enable (vendor-bundle.js:4915) 

at Object.enable (vendor-bundle.js:5296) 

at Module.<anonymous> (vendor-bundle.js:4900) 

at vendor-bundle.js:3873 

at each (vendor-bundle.js:3798) 

at Module.enable (vendor-bundle.js:4852) 

at Module.init (vendor-bundle.js:4527) 

at vendor-bundle.js:5199 

Answer 1

Meistens werden Sie diese Fehlermeldung erhalten, wenn:

• Sie versuchen, eine CSS-Datei oder einem anderen Text-basierte Datei (wie svg) zu laden
• diese CSS-Datei/andere textbasierte Datei in dem Bündel nicht
enthält
• die stub Eigenschaft auf true gesetzt

Sie können eines von zwei Dingen tun, die css-Datei in das Bundle einfügen oder die stub-Eigenschaft auf false setzen.

empfehle ich die ersteren, was bedeutet, dass in aurelia.json Sie eine resources Eigenschaft konfigurieren:

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

Dies sollte die CLI löst die bootstrap.css Datei zu bündeln. Wenn Sie die Eigenschaft stub auf false setzen, ruft RequireJS die Datei bootstrap.css außerhalb des Bundles ab (so dass eine separate Anfrage erfolgt).