在Angular中使用lunr来索引帖子。在Angular 15之前,这样导入是有效的。
import * as lunr from 'lunr';
升级到Angular 15后,它会出错。
ERROR
Error: lunr is not a function
I recreated the error an an MVCE here。
这就是代码:
import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import * as lunr from 'lunr';
interface Post {
id: string;
title: string;
description: string;
}
const posts = [
{
id: '1',
title: 'What is JavaScript?',
description:
'JavaScript is a high-level, object-oriented programming language based on the ECMAScript specification.',
},
{
id: '2',
title: 'What is Java?',
description:
'Java is a cross-platform object-oriented programming language which at first developed by the Sun Microsystems.',
},
{
id: '3',
title: 'What is React?',
description:
'React is a popular JavaScript library which heavily used to build single-page applications.',
},
];
@Component({
selector: 'my-app',
standalone: true,
imports: [CommonModule],
template: `
<h1>Hello from {{name}}!</h1>
<a target="_blank" href="https://angular.io/start">
Learn more about Angular
</a>
`,
})
export class App {
name = 'Angular';
public idx!: lunr.Index;
constructor() {
this.initializeSearchIndex(posts);
}
initializeSearchIndex(posts: Post[]) {
this.idx = lunr(function () {
this.field('title');
this.field('description');
posts.forEach((post) => {
this.add(post);
});
});
}
}
bootstrapApplication(App);
这就是错误:
Console was cleared
ERROR
Error: lunr is not a function
ERROR
Error: Uncaught (in promise): TypeError: lunr is not a function
TypeError: lunr is not a function
at App.initializeSearchIndex (https://angular-muhcmg.stackblitz.io/~/src/main.ts:34:20)
at new App (https://angular-muhcmg.stackblitz.io/~/src/main.ts:31:14)
at NodeInjectorFactory.App_Factory [as factory] (https://angular-muhcmg.stackblitz.io/~/src/main.ts:44:45)
at getNodeInjectable (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:3445:44)
at createRootComponent (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:12322:35)
at ComponentFactory.create (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:12200:25)
at ApplicationRef.bootstrap (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:25405:42)
at eval (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:24880:28)
at _ZoneDelegate.invoke (https://angular-muhcmg.stackblitz.io/turbo_modules/zone.js@0.12.0/dist/zone.js:412:30)
at Object.onInvoke (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:24312:33)
还尝试:
import lunr from "lunr"
这就是错误:
Error: node_modules/@fireflysemantics/documentation/lib/services/search.service.d.ts:3:8 - error TS1259: Module '"/Users/oleersoy/Temp/al/node_modules/@types/lunr/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag
3 import lunr from "lunr";
~~~~
node_modules/@types/lunr/index.d.ts:8:1
8 export = lunr;
~~~~~~~~~~~~~~
This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
2条答案
按热度按时间mf98qq941#
这是可行的:
固定演示:https://stackblitz.com/edit/angular-2891so?file=src%2Fmain.ts,tsconfig.json
现在,在本地应用程序版本中,我将搜索服务打包在一个库中,因此我必须设置
在库
tsconfig.json
和应用程序(使用库)tsconfig.json
中。tjjdgumg2#
在包含的代码中,你的[mcve]
lunr
不是一个函数,它是一个对象。如果你在构造函数中设置了一个断点,你可以查看对象的成员。