Integrate Typed.js in Angular 4

Viewed 1178

While integrating Typed.js in Angular 4 I get the following error.

ERROR TypeError: __WEBPACK_IMPORTED_MODULE_2_typed_js__.Typed is not a constructor

My component is:

import { Component, OnInit } from '@angular/core';
import { Typed } from 'typed.js';
@Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

   ngOnInit() {
      let options = {
         strings: ["Books.", "Cinema.", "Paintings.","Music."],
         typeSpeed: 100,
         backSpeed: 100,
         showCursor: true,
         cursorChar: "|",
         loop:true
      }

      let typed = new Typed(".typing-element", options);
   }

}

My Html is:

<div class="container">
   <div class="home-header-title">
      <span class="title">what you like</span>
      <span class="typing-element"></span>
   </div>
</div>
2 Answers

You should change

import { Typed } from 'typed.js';

to

import * as Typed from 'typed.js';

If you are trying to import a js file, use the declare keyword

declare var Typed: any;

import 'path_to_your_js/typed.js';

export class HomeComponent implements OnInit {


  ngOnInit() {
    let options = {
          strings: ["Books.", "Cinema.", "Paintings.","Music."],
          typeSpeed: 100,
          backSpeed: 100,
          showCursor: true,
          cursorChar: "|",
          loop:true
        }

      let typed = new Typed(".typing-element", options);
  }

}
Related