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

방금 새로 만든 각도 CLI.angular-cli.json 의 관련 부분을 아래와 같이 프로젝트
실행 npm install bootstrap@4.0.0-beta jquery popper.js --save
및 변경

  "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. 슬림 .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 파일 폴더 (./node_modules/popper.js/dist/popper.js) 오히려 UMD 폴더를 (./node_modules/popper.js/dist/ 가져 UMD /popper.js). js 파일의 미니 또는 일반 버전을 얻는 지 여부는 중요하지 않습니다.

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

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

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

Asp.net Mvc umd 에서 작업하는 경우 에도 작업을 수행합니다.

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"));

모달을 실행하려면 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"] 
}