0

In one angular4 project I have to use a custom bootstrap. follow some posts on internet, I create a test project with angular cli,and import the jquery.js and the custom bootstrap.js and css in angular-cli.json. but I get error when calling a boostrap js function in typescript.

here is the description of my problem:

app.html
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" onclick="$('#myModal').modal();">
  Launch demo modal 2
</button>   <-- this button works
<button type="button" class="btn btn-primary btn-lg" (click)="showmodal()">
  Launch demo modal
</button>  <-- this button does not work, get modal is not a function error.

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
--------------------------------------------------

app.ts

import { Component} from '@angular/core';
import * as $ from 'jquery';


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

  showmodal() {
    console.log($('#myModal').before());
    ($('#myModal') as any).modal(); <-- error on this line, modal is not a function
  }

}

here is what is I add in angular-cli.json

"styles": [
  "./assets/css/bootstrap.min.css",
  "styles.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "./assets/js/bootstrap.min.js"
],

UPDATE 1 : I checked the other question/answer, it works like my Launch demo modal 2. not what I am looking for.

UPDATE 2 : error is in the browser. I create a projet in github to show the problem.

Liu Min
  • 1
  • 2
  • Is the error shown in the browser, or just in the compiler? if it's in the browser, do you know whether `bootstrap.js` is successfully loaded? – BeetleJuice Aug 19 '17 at 22:13
  • please show us the path of your bootstrap.js-file and your angular-cli.json file – Christian Aug 19 '17 at 22:44
  • Possible duplicate of [jQuery is not defined in bootstrap-sass](https://stackoverflow.com/questions/45339209/jquery-is-not-defined-in-bootstrap-sass) – Rahul Singh Aug 19 '17 at 22:56

1 Answers1

0

there is 2 jquery instances: one is created by global import via angular-cli, the others is imported in component.

the one imported globally has bootstrap function modal(). but not the one in component.

liumin
  • 98
  • 1
  • 10