CODEWITHSUNDEEP
angularintro.js
Mrunal Dhobe
Mrunal Dhobe

Reputation: 41

TypeError: chart_js__WEBPACK_IMPORTED_MODULE_0__ is not a function

I'm trying to install intro.js in Angular and work on it but encountered an issue showing

TypeError: intro_js__WEBPACK_IMPORTED_MODULE_0__ is not a function
    at new AppComponent (app.component.ts:12:13)
    at NodeInjectorFactory.AppComponent_Factory [as factory] (app.component.ts:44:4)
    at getNodeInjectable (core.js:3549:1)
    at instantiateRootComponent (core.js:10116:1)
    at createRootComponent (core.js:12475:1)
    at ComponentFactory$1.create (core.js:25137:1)
    at ApplicationRef.bootstrap (core.js:29608:1)
    at core.js:29321:1
    at Array.forEach (<anonymous>)
    at PlatformRef._moduleDoBootstrap (core.js:29321:1)

Steps I took to install intro.js are

  1. npm install intro.js @types/intro.js --save

  2. Open angular.json and

    "styles": [ "src/styles.scss", "node_modules/intro.js/introjs.css" ], "scripts": [ "node_modules/intro.js/intro.js" ],

  3. Import Intro.js to your app.component.ts at the top of your file

  4. Added code

    @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent implements AfterViewInit { introJS = introJs();

    constructor(public authService: AuthServiceService) { this.introJS.setOptions({ steps: [ { element: '#step1', intro: 'Welcome to your new app!', position: 'bottom' }, { element: '#step2', intro: "Ok, wasn't that fun?", position: 'right' }, { element: '#step3', intro: "let's keep going", position: 'top' }, { element: '#step4', intro: 'More features, more fun.', position: 'right' } ], showProgress: true }); }

    ngAfterViewInit(): void { this.introJS.start(); } }

Upvotes: 3

Views: 2425

Answers (1)

lilalinux
lilalinux

Reputation: 3031

Make sure you default import and not via *.

You might need to add "allowSyntheticDefaultImports": true to your compilerOptions in tsconfig.json.

Upvotes: 3

Related Questions