错误:没有为元素"DIV“定义Aurelia API

Question

我的新启动的应用程序就面临着这个问题。

Error: No Aurelia APIs are defined for the element: "DIV".

这是调用堆栈：

getAU webpack:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js?:5384
    locateAPI webpack:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js?:5415
    createBinding webpack:///./node_modules/aurelia-binding/dist/native-modules/aurelia-binding.js?:5401
    applyInstructions webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2527
    create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2742
    create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4449
    applyInstructions webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2521
    create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2742
    create webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:2622
    addView webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1228
    _standardProcessInstanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:632
    instanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:564
    itemsChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1137
    bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1106
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    _show webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:294
    bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:333
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    addView webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1229
    _standardProcessInstanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:632
    instanceChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:564
    itemsChanged webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1137
    bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:1106
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    _show webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:294
    bind webpack:///./node_modules/aurelia-templating-resources/dist/native-modules/aurelia-templating-resources.js?:333
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3819
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:1763
    bind webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3811
    automate webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:3756
    _createControllerAndSwap webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4945
    promise callback*_createControllerAndSwap/< webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4944
    promise callback*_createControllerAndSwap webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:4942
    compose webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:5044
    compose webpack:///./node_modules/aurelia-templating/dist/native-modules/aurelia-templating.js?:5310
    setRoot webpack:///./node_modules/aurelia-framework/dist/native-modules/aurelia-framework.js?:538
    configure webpack:///./app/bootstrap.ts?:36
    __awaiter webpack:///./app/bootstrap.ts?:12
    __awaiter webpack:///./app/bootstrap.ts?:8
    configure webpack:///./app/bootstrap.ts?:36
    promise callback*configure/< webpack:///./app/bootstrap.ts?:36
    __awaiter webpack:///./app/bootstrap.ts?:12
    __awaiter webpack:///./app/bootstrap.ts?:8
    configure webpack:///./app/bootstrap.ts?:24
    config webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:105
    promise callback*config webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:100
    p webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:136
    promise callback*bootstrap webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:135
    run webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:122
    promise callback*run webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:117
    <anonymous> webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:142
    <anonymous> webpack:///./node_modules/aurelia-bootstrapper/dist/native-modules/aurelia-bootstrapper.js?:143
    b9nV http://localhost:8080/vendors~._node_modules_an.120e77e838c03acac253.chunk.js:83
    __webpack_require__ http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:80
    <anonymous> webpack:///multi_(webpack)-dev-server/client?:5
    0 http://localhost:8080/app~._a.120e77e838c03acac253.chunk.js:10
    __webpack_require__ http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:80
    checkDeferredModules http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:46
    webpackJsonpCallback http://localhost:8080/runtime~app.120e77e838c03acac253.bundle.js:33
    <anonymous> http://localhost:8080/app~._app_mocks-temporary_schema.ts~81270b51.120e77e838c03acac253.chunk.js:1
aurelia-bootstrapper.js:127:16

我在网上搜索过，但我在这里只发现了一个类似的问题：https://github.com/aurelia/webpack-plugin/issues/181，但它与此无关，因为我使用的不是webpack 5，而是4。

来自aurelia debug的最后一条日志如下：

DEBUG [templating] importing resources for app.html 
Array []

我的应用程序没有直接引用div，而且非常简单。我使用了一个外部的库(我们也开发了这个库)并加载如下：

export async function configure (aurelia: Aurelia): Promise<Aurelia> {
  aurelia.use
    .standardConfiguration()
    .plugin(PLATFORM.moduleName('aurelia-validation'), config => {
      config.customValidator(AjvValidator);
    })
    .plugin(PLATFORM.moduleName('web-shared-components'))
    .plugin(PLATFORM.moduleName('web-template-designer'))
    .feature(PLATFORM.moduleName('views/index'));

  if (debugMode) {
    aurelia.use.developmentLogging();
  }

  return aurelia.start().then(async () => await aurelia.setRoot(PLATFORM.moduleName('app')));
}

这是app.html：

<template>
  <designer></designer>
</template>

和designer.html：

<template>
    <template-designer record-type-template.two-way="recordTypeTemplate"
       schema.bind="schema"
       is-valid.two-way="isValid"
       is-dirty.two-way="isDirty"
       on-save.call="handleSave()"
       on-exit.call="handleExit()"
       on-preview.call="handlePreview(requestNewTestData)"></template-designer>
</template>

我对导致这个问题的原因感到有点不知所措，所以欢迎任何指导。

谢谢

Answer 1

发现问题时，它是第三方中缺少的依赖项。Aurelia无法解析其中一个模板div上的自定义标记。