Angular 7 how to include inline JS script into component?

Question

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/[email protected]"></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

[email protected]: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?

Possible duplicate of I want to download a script from cdn and use it — The Head Rush
– The Head Rush, Commented May 12, 2019 at 11:38

Constantin Guidon · Accepted Answer · 2019-05-12 12:06:54Z

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;

Hien Nguyen · Accepted Answer · 2019-05-12 11:43:08Z

0

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"
        ]
      },

answered May 12, 2019 at 11:43

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Comments

Ikhlak S. · Accepted Answer · 2019-05-12 11:49:16Z

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?" />

Martin Chuka · Accepted Answer · 2019-05-12 11:56:10Z

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!

Collectives™ on Stack Overflow

Angular 7 how to include inline JS script into component?

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related