Angular 4. 出现意外的标记 export。

19

然后我通过命令 ng serve 启动应用程序,在控制台上看到错误:

VM1018:2297 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?6efa:1)
            at __webpack_require__ (bootstrap 88f7324…:54)
            at Object.2 (scripts.bundle.js:66)
            at __webpack_require__ (bootstrap 88f7324…:54)
            at webpackJsonpCallback (bootstrap 88f7324…:25)
            at scripts.bundle.js:1
        webpackJsonp.../../../../script-loader/addScript.js.module.exports  @   addScript.js:9
        ../../../../script-loader/index.js!../../../../popper.js/dist/popper.js @   popper.js?6efa:1
        __webpack_require__ @   bootstrap 88f7324…:54
        2   @   scripts.bundle.js:66
        __webpack_require__ @   bootstrap 88f7324…:54
        webpackJsonpCallback    @   bootstrap 88f7324…:25
        (anonymous) @   scripts.bundle.js:1

只需启动 Angular 应用程序,安装:Bootstrap、jQuery 和 Popper.js,然后将样式和脚本文件添加到 angular-cli.json/angular.json。

angular-cli.json/angular.json:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "Web"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "build",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/popper.js/dist/popper.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "src/tsconfig.spec.json",
      "exclude": "**/node_modules/**"
    },
    {
      "project": "e2e/tsconfig.e2e.json",
      "exclude": "**/node_modules/**"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

我使用:

node 8.4.0
npm 5.3.0
jquery 3.2.1
bootstrap 4 beta

我在哪里犯了错?有一些文本或其他东西,用大量代码发布这个问题(我的英语非常糟糕,我知道...)

我的package.json文件中有以下内容:

{
  "name": "web",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "bootstrap": "^4.0.0-beta",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.5",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

你能添加 package.json 吗? - Robert
好的,让我检查一下。 - Robert
我在Angular 8中遇到了同样的错误。它只是由popper.js引起的吗? - Kedar Kulkarni
@KedarKulkarni 不,popper只是其中一个可能的原因。尝试在.angular.cli.json中离线所有包含的脚本,然后取消注释每个脚本行并启动服务器。其中一个脚本会导致构建失败。 - Никита Середа
@KedarKulkarni 提供更多信息并创建工单,我会尽力帮助您。 - Никита Середа
显示剩余7条评论
6个回答

52

我找到了答案。 在 ./.angular-cli.json 文件的 scripts 行中,将文件夹从以下更改为:

如果你使用的是现代版本的 webpack,则更改为:

"../node_modules/popper.js/dist/esm/popper.js"

否则,更改为:

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

感谢 fezVrasta


2
我的问题在于我正在加载 \node_modules\popper.js\dist\popper.js,而我应该加载 __\node_modules\popper.js\dist\umd\popper.js__。 - RandyDaddis
超级答案 :) - Code
9
这个 "../node_modules/popper.js/dist/umd/popper.js" 对我有用。 - Pranoy Sarkar
1
但是你如何知道使用哪个? - strizzwald
1
我犯了同样的错误,忘记为popper.js添加正确的路径,得到了相同的错误,但是更改路径并添加umd/popper.js后,现在它可以工作了。感谢你的问题解决方案,节省了我的时间... - Abdul Rahman
显示剩余5条评论

2

在 Angular7 中对我有效

最初的回答

["node_modules/jquery/dist/jquery.min.js",  
 "node_modules/popper.js/dist/umd/popper.min.js",  
 "node_modules/bootstrap/dist/js/bootstrap.min.js"]

2

这个在Angular4/6上完美地工作,我已经在我的项目中测试过了。

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

1

这对我在 Angular 13 中也有效。

"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
我正在使用 Angular 9 进行开发。 在 angular.json 文件中,只需进行更改。
 "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"
            ]

对我来说它运行良好。


成功了 :) 谢谢。我忘记在 poppoer.min.js 路径中添加 umd - Subhashi

0

以下代码适用于Angular 8

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

            ]

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接