Pesquisa de site

javascript - Angular 7 como incluir script JS inline em um componente?


Eu gostaria de instalar a biblioteca places.js no meu projeto Angular 7, mas tenho um problema. Incluí o seguinte script no meu arquivo 'index.html'

 <script src="https://cdn.jsdelivr.net/npm/[email "></script>
  <script>
    var placesAutocomplete = places({
      appId: 'myAppId',
      apiKey: 'myApiKey',
      container: document.querySelector('#addressInput')
    });
  </script>

mas está funcionando apenas quando eu tenho

<input type="search" id="address-input" placeholder="Where are we going?" />

no meu 'index.html'. Eu tentei incluir esse input no meu componente, mas não está funcionando e estou recebendo um erro

[email :1 Uncaught Error: Algolia Places: 'container' must point to an <input> element.

É possível anexar este script e fazê-lo funcionar? Na documentação não há nada sobre TypeScript. Eu também tentei fazer npm install e

import * from 'places.js'

mas tenho o mesmo problema. Alguém poderia ajudar?

Resposta #1

Melhor usá-lo incorporado em um Componente Angular:

import { Component, OnInit } from "@angular/core";
import places from "places.js";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  title = "my-app";

  ngOnInit(): void {
    const placesAutocomplete = places({
      appId: "appId",
      apiKey: "appKey",
      container: document.querySelector("#address-input")
    });
  }
}

você também deve colocar isso no seu polyfill.js para fazê-lo funcionar:

(window as any).process = {
  env: { DEBUG: undefined }
};

(window as any).global = window;

Resposta #2

Eu tentei do seu jeito, mas não obtive sucesso.

Você precisa baixar o arquivo places.js e colocá-lo em uma pasta de scripts.

Atualize o arquivo angular.json em builder > scripts

 "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        ...
        "assets": [...],
        "styles": [...],
        "scripts": [
          "script/places.js"
        ]
      },