Bootstrap4 dependency PopperJs가 Angular에서 오류를 발생시킵니다.

Bootstrap4 dependency PopperJs가 Angular에서 오류를 발생시킵니다.

방금 새로운 angular-cli 프로젝트를 만들었어요
그리고 달렸습니다npm install bootstrap@4.0.0-beta jquery popper.js --save
아래와 같이 .cli-cli.json 관련 부분을 변경했습니다.

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

그러나 아래의 오류를 받는 것은

10:2287 Uncaught SyntaxError: Unexpected token export
    at eval (<anonymous>)
    at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
    at Object.../../../../script-loader/index.js!../../../../popper.js/dist/popper.js (popper.js?4b43:1)
    at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
    at Object.2 (scripts.bundle.js:66)
    at __webpack_require__ (bootstrap 4403042439558687cdd6:54)
    at webpackJsonpCallback (bootstrap 4403042439558687cdd6:25)
    at scripts.bundle.js:1

어떻게 고치는지 아십니까?

https://getbootstrap.com/docs/4.2/getting-started/introduction/ #js의 문서를 보면 다음을 가져올 수 있습니다.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

이름: jquery.slim.min.js, umd/popper.min.js!

그래서 나는 다음을 나의 것에 사용했습니다..angular-cli.json:

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

그 이후로 지금은 효과가 있는 것 같습니다.

저도 같은 문제가 있었습니다.제 해결책은 dist-folder(./node_modules/popper.js/dist/popper.js)를 가져오는 것이 아니라 umd-folder(./node_modules/popper.js/dist/umd/popper.js)를 가져오는 것이었습니다.js-파일의 미니 또는 일반 버전을 얻어도 상관 없습니다.

많은 사람들이 부트스트랩 4 의존성(jQuery, popper.js 등)을 추가하고 적절히 포함하는 데 어려움을 겪고 있음을 알 수 있습니다.그러나 https://ng-bootstrap.github.io 의 형태로 훨씬 더 쉬운 솔루션이 있습니다.

ng-bootstrap은 처음부터 작성된 native Angular 지시문을 제공합니다.긍정적인 결과는 다음과 같습니다. * jQuery, popper.js 등을 포함하고 걱정할 필요가 없습니다.* 지침은 Angular 세계에서 "말이 되는" API를 제공합니다.

Angular-ng-bootstrap과 함께 Bootstrap 4.beta를 사용하려는 모든 사람들을 위해 Bootstrap 4.beta CSS와 완전히 호환되는 첫 번째 베타를 출시했습니다.

만약 Asp.net Mvcumd 에서 일을 한다면 그것도 할 수 있습니다.

https://stackoverflow.com/a/50839939/8497522 에서와 마찬가지로 BundleConfig.cs 에 추가하기만 하면 됩니다.

bundles.Add(new ScriptBundle("~/bundles/popper").Include("~/Scripts/umd/popper.js"));

제외:

bundles.Add(new ScriptBundle("~/bundles/popper").Include("~/Scripts/popper.js"));

modal을 실행하려면 tsconfig.ts에서 대상을 "es2015"에서 "es5"로 변경하십시오.

"styles": [ "src/styles.css", 
            "node_modules/bootstrap/dist/css/bootstrap.min.css" ], 
"scripts": ["node_modules/jquery/dist/jquery.min.js", 
            "node_modules/popper.js/dist/umd/popper.min.js", 
            "node_modules/bootstrap/dist/js/bootstrap.min.js"] 
}

위의 답변에서 힌트를 찾았습니다.

1)포함popper.js부트스트랩 전에

2. popper.js 파일의 경로를 업데이트합니다.사용./dist/umd대신에/dist

popper의 올바른 경로는 angular-cli.json 파일에 있었습니다.

./node_modules/popper.js/dist/umd/popper.js

언급URL : https://stackoverflow.com/questions/45646101/bootstrap4-dependency-popperjs-throws-error-on-angular