aurelia - 错误:没有为元素定义 Aurelia API:“DIV”
问题描述
我新启动的应用程序面临这个问题。
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>
对于可能导致此问题的原因,我有点不知所措,因此欢迎提供任何指导。
谢谢
解决方案
发现了问题,它是第三方之一中缺少的依赖项。Aurelia 无法解析其中一个模板 div 上的自定义标记。
推荐阅读
- google-cloud-platform - 为什么基于服务帐户的身份验证优于用户帐户
- python - SQLAlchemy - 何时创建额外的模型和关系与仅将 JSON 存储在列中?
- php - 更新 Select 查询循环所基于的字段
- amazon-web-services - AWS MQTT 代理/规则调用中的日志信息不足
- c - C中的recv函数无法获得价值
- spring-boot - 使用动态主机和端口的 TCP 套接字客户端的 Spring 集成
- java - StreamResource 有时在关闭对话框窗口中单击下载按钮时找不到资源
- javascript - 为什么在使用 for 循环添加事件侦听器时会出现 TypeError?
- javascript - 当我使用 for 或 while 循环时,我的应用程序崩溃了
- c++ - glGenVertexArrays 上的 OpenGL C++ glfw 3 glew 错误 1282