Angular 7 how to include inline JS script into component?

问题

I'd like to install places.js library into my Angular 7 project, but I have a problem. I've included following script into my 'index.html' file

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

but it is working only when I have

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

in my 'index.html'. I've tried to include this input into my component but it's not working and I have an error

places.js@1.16.4:1 Uncaught Error: Algolia Places: 'container' must point to an <input> element.

Is it possible to attach this script and make it working? In the documentation there is nothing about typescript. I've also tried to npm install and

import * from 'places.js'

but have same issue. Could someone help?

回答1:

Better to use it embedded in an Angular Component:

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")
    });
  }
}

you should place also this in your polyfill.jsin order to make it work:

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

(window as any).global = window;

回答2:

I tried your way but not success.

You need download places.js file and put to a script folder.

Update angular.json file at builder > scripts

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

回答3:

You need to keep all your Place code in a component and initialize it on ngOnItit().

import { Component, OnInit } from '@angular/core';
import * as Places from 'places';

@Component({
  selector: 'my-app',
  templateUrl: './yourComponent.html'
})
export class AppComponent implements OnInit  {

  ngOnInit(){
    Places({
      appId: 'myAppId',
      apiKey: 'myApiKey',
      container: document.querySelector('#addressInput')
    });
  }
}

yourComponent.html:

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

回答4:

Well, from my observation this needs the input loaded before ever being called and you are attaching it to your index before the input ever loads. Of course this won't work

var placesAutocomplete = places({
  appId: 'myAppId',
  apiKey: 'myApiKey',
  container: document.querySelector('#addressInput')
});

There are few other ways you can do this but in my case, i would create a service, something like

declare var places:any;
@Injectable({providedIn:'root'})
export class PlacesServices {
      setup(){
        var placesAutocomplete = places({
        appId: 'myAppId',
        apiKey: 'myApiKey',
        container: document.querySelector('#addressInput')
       });
      }

}

then inject it to your component and only call it when the input with the correct id is loaded, you need ngAfterViewInit to make sure the views are loaded

ngAfterViewInit(){
   this.placesService.setup();
  //i would be calling the setup here on the component with the input
}

The js script can either be added on the index.html or just like Hien answer pointed.

I just typed it, might have some typo but you should get the idea. Hope it works for you!

来源：https://stackoverflow.com/questions/56098810/angular-7-how-to-include-inline-js-script-into-component

标签

javascript

angular

typescript

api

algolia