在Angular 15中使用lunr？

huangapple
go评论117阅读模式
英文:

Using lunr in Angular 15?

问题

使用 lunr 在 Angular 中索引帖子。在 Angular 15 之前，像这样导入它是有效的。

  1. import * as lunr from 'lunr';

升级到 Angular 15 后出现错误。

  1. ERROR
  2. Error: lunr is not a function

我在这里重现了这个错误。

这是代码：

  1. import 'zone.js/dist/zone';
  2. import { Component } from '@angular/core';
  3. import { CommonModule } from '@angular/common';
  4. import { bootstrapApplication } from '@angular/platform-browser';
  5. import * as lunr from 'lunr';
  7. interface Post {
  8.   id: string;
  9.   title: string;
  10.   description: string;
  11. }
  13. const posts = [
  14.   {
  15.     id: '1',
  16.     title: 'What is JavaScript?',
  17.     description:
  18.       'JavaScript is a high-level, object-oriented programming language based on the ECMAScript specification.',
  19.   },
  20.   {
  21.     id: '2',
  22.     title: 'What is Java?',
  23.     description:
  24.       'Java is a cross-platform object-oriented programming language which at first developed by the Sun Microsystems.',
  25.   },
  26.   {
  27.     id: '3',
  28.     title: 'What is React?',
  29.     description:
  30.       'React is a popular JavaScript library which heavily used to build single-page applications.',
  31.   },
  32. ];
  34. @Component({
  35.   selector: 'my-app',
  36.   standalone: true,
  37.   imports: [CommonModule],
  38.   template: `
  39.     <h1>Hello from {{ name }}!</h1>
  40.     <a target="_blank" href="https://angular.io/start">
  41.       Learn more about Angular 
  42.     </a>
  43.   `,
  44. })
  45. export class App {
  46.   name = 'Angular';
  47.   public idx!: lunr.Index;
  48.   constructor() {
  49.     this.initializeSearchIndex(posts);
  50.   }
  52.   initializeSearchIndex(posts: Post[]) {
  53.     this.idx = lunr(function () {
  54.       this.field('title');
  55.       this.field('description');
  56.       posts.forEach((post) => {
  57.         this.add(post);
  58.       });
  59.     });
  60.   }
  61. }
  63. bootstrapApplication(App);

这是错误：

  1. Console was cleared
  2. ERROR
  3. Error: lunr is not a function
  4. ERROR
  5. Error: Uncaught (in promise): TypeError: lunr is not a function
  6. TypeError: lunr is not a function
  7. at App.initializeSearchIndex (https://angular-muhcmg.stackblitz.io/~/src/main.ts:34:20)
  8. at new App (https://angular-muhcmg.stackblitz.io/~/src/main.ts:31:14)
  9. at NodeInjectorFactory.App_Factory [as factory] (https://angular-muhcmg.stackblitz.io/~/src/main.ts:44:45)
  10. at getNodeInjectable (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:3445:44)
  11. at createRootComponent (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:12322:35)
  12. at ComponentFactory.create (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:12200:25)
  13. at ApplicationRef.bootstrap (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:25405:42)
  14. at eval (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:24880:28)
  15. at _ZoneDelegate.invoke (https://angular-muhcmg.stackblitz.io/turbo_modules/zone.js@0.12.0/dist/zone.js:412:30)
  16. at Object.onInvoke (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:24312:33)

也尝试过：

  1. import lunr from "lunr";

这是错误：

  1. 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. 3 import lunr from "lunr";
  4.          ~~~~
  6.   node_modules/@types/lunr/index.d.ts:8:1
  7.     8 export = lunr;
  8.       ~~~~~~~~~~~~~~
  9.     This module is declared with 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
英文:

Using lunr to index posts in Angular. Prior to Angular 15 importing it like this worked.

  1. import * as lunr from &#39;lunr&#39;;

After upgrading to Angular 15 it errors.

  1. ERROR
  2. Error: lunr is not a function

I recreated the error an an MVCE here.

This is the code:

  1. import &#39;zone.js/dist/zone&#39;;
  2. import { Component } from &#39;@angular/core&#39;;
  3. import { CommonModule } from &#39;@angular/common&#39;;
  4. import { bootstrapApplication } from &#39;@angular/platform-browser&#39;;
  5. import * as lunr from &#39;lunr&#39;;
  6. interface Post {
  7. id: string;
  8. title: string;
  9. description: string;
  10. }
  11. const posts = [
  12. {
  13. id: &#39;1&#39;,
  14. title: &#39;What is JavaScript?&#39;,
  15. description:
  16. &#39;JavaScript is a high-level, object-oriented programming language based on the ECMAScript specification.&#39;,
  17. },
  18. {
  19. id: &#39;2&#39;,
  20. title: &#39;What is Java?&#39;,
  21. description:
  22. &#39;Java is a cross-platform object-oriented programming language which at first developed by the Sun Microsystems.&#39;,
  23. },
  24. {
  25. id: &#39;3&#39;,
  26. title: &#39;What is React?&#39;,
  27. description:
  28. &#39;React is a popular JavaScript library which heavily used to build single-page applications.&#39;,
  29. },
  30. ];
  31. @Component({
  32. selector: &#39;my-app&#39;,
  33. standalone: true,
  34. imports: [CommonModule],
  35. template: `
  36. &lt;h1&gt;Hello from {{name}}!&lt;/h1&gt;
  37. &lt;a target=&quot;_blank&quot; href=&quot;https://angular.io/start&quot;&gt;
  38. Learn more about Angular 
  39. &lt;/a&gt;
  40. `,
  41. })
  42. export class App {
  43. name = &#39;Angular&#39;;
  44. public idx!: lunr.Index;
  45. constructor() {
  46. this.initializeSearchIndex(posts);
  47. }
  48. initializeSearchIndex(posts: Post[]) {
  49. this.idx = lunr(function () {
  50. this.field(&#39;title&#39;);
  51. this.field(&#39;description&#39;);
  52. posts.forEach((post) =&gt; {
  53. this.add(post);
  54. });
  55. });
  56. }
  57. }
  58. bootstrapApplication(App);

And this is the error:

  1. Console was cleared
  2. ERROR
  3. Error: lunr is not a function
  4. ERROR
  5. Error: Uncaught (in promise): TypeError: lunr is not a function
  6. TypeError: lunr is not a function
  7. at App.initializeSearchIndex (https://angular-muhcmg.stackblitz.io/~/src/main.ts:34:20)
  8. at new App (https://angular-muhcmg.stackblitz.io/~/src/main.ts:31:14)
  9. at NodeInjectorFactory.App_Factory [as factory] (https://angular-muhcmg.stackblitz.io/~/src/main.ts:44:45)
  10. at getNodeInjectable (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:3445:44)
  11. at createRootComponent (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:12322:35)
  12. at ComponentFactory.create (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:12200:25)
  13. at ApplicationRef.bootstrap (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:25405:42)
  14. at eval (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:24880:28)
  15. at _ZoneDelegate.invoke (https://angular-muhcmg.stackblitz.io/turbo_modules/zone.js@0.12.0/dist/zone.js:412:30)
  16. at Object.onInvoke (https://angular-muhcmg.stackblitz.io/turbo_modules/@angular/core@15.2.7/fesm2015/core.mjs:24312:33)

Also tried:

  1. import lunr from &quot;lunr&quot;

And this is the error:

  1. Error: node_modules/@fireflysemantics/documentation/lib/services/search.service.d.ts:3:8 - error TS1259: Module &#39;&quot;/Users/oleersoy/Temp/al/node_modules/@types/lunr/index&quot;&#39; can only be default-imported using the &#39;allowSyntheticDefaultImports&#39; flag
  2. 3 import lunr from &quot;lunr&quot;;
  3. ~~~~
  4. node_modules/@types/lunr/index.d.ts:8:1
  5. 8 export = lunr;
  6. ~~~~~~~~~~~~~~
  7. This module is declared with &#39;export =&#39;, and can only be used with a default import when using the &#39;allowSyntheticDefaultImports&#39; flag.

答案1

得分: 1

在包含的代码和您的[mcve]中，lunr不是一个函数，而是一个对象。如果在构造函数中设置断点，您可以查看对象的成员。

在Angular 15中使用lunr？

英文:

In included code and your [mcve] lunr is not a function, it is an object. If you set a break point in your code in the constructor you can view the object's members.

在Angular 15中使用lunr？

答案2

得分: 1

这个可以工作：

  1. import lunr from "lunr";

修复的演示：
https://stackblitz.com/edit/angular-2891so?file=src%2Fmain.ts,tsconfig.json

现在在我本地应用程序版本中，我将搜索服务打包成一个库，因此我不得不设置

  1. "allowSyntheticDefaultImports": true,

在两个库的 tsconfig.json 和应用程序（使用该库）的 tsconfig.json 中。

英文:

This works:

  1. import lunr from &quot;lunr&quot;

Fixed Demo:
https://stackblitz.com/edit/angular-2891so?file=src%2Fmain.ts,tsconfig.json

Now in the local application version I have I packaged the search service in a library, and so I had to set

  1.  &quot;allowSyntheticDefaultImports&quot;: true,

In both the libraries tsconfig.json and the applications ( Consuming the library) tsconfig.json.

huangapple
  • 本文由 发表于 2023年4月20日 01:55:47
  • 转载请务必保留本文链接：https://go.coder-hub.com/76057521.html
  • angular
  • javascript
  • lunrjs
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定