Блог

Я пытаюсь добавить раздел «покупки» в мое приложение Angular 6. Этот раздел покупок будет содержать строку поиска, которая будет выполнять поиск в Amazon и возвращать список всего, что хочет пользователь. Например, пользователь выполняет поиск по молотку, список будет содержать молотки. Для этого я пытаюсь выполнить веб-очистку с помощью Cheerio. При попытке объявить это в моем файле TypeScript:

 declare var require: any;
const request = require("request");
const cheerio = require("cheerio");
  

Я получаю следующую ошибку на своей веб-странице:

Я был бы очень признателен за любую помощь или за любой совет по альтернативному решению того, чего я пытаюсь достичь, было бы очень полезно.

Если вы запускаете свой код в браузере, вам захочется использовать не только компилятор typescript для сборки вашего проекта. Это потому, что браузер изначально не поддерживает вызовы require . Не волнуйтесь, пусть это вас не отпугивает! Существует множество зрелых инструментов, которые решают эту конкретную проблему путем объединения требуемого кода в файл (ы), который можно использовать в браузере.

В документации есть целый раздел об этих инструментах сборки: https://www.typescriptlang.org/docs/handbook/integrating-with-build-tools.html

TypeScript использует import в отличие от require .

Правильное утверждение таково: import * as cheerio from 'cheerio'; .

Я бы также рекомендовал установить тип Cheerio отсюда.

Кроме того, попробуйте выполнять действия «угловым способом». Angular поставляется с кучей готовых инструментов, в том числе Request из @angular/common/http , подробнее об этом можно прочитать здесь.

Самый простой способ создать ваш scraper, предположив, что вы не хотите, чтобы какая-либо серверная реализация выполнялась на стороне, — это создать сервис с общедоступными методами, который позволил бы вам хранить все в этом одном файле, тем самым сохраняя код вашего компонента чистым и «по существу».