Then i’m start the app by command ng serve
in console i see error:
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
Just start then angular application, install: bootstrap, jQuery, popper.js and then add styles & scripts files to 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": {} } }
i’m use:
node 8.4.0 npm 5.3.0 jquery 3.2.1 bootstrap 4 beta
Where i’m make a mistake? Some text or something else for post this questing with large part of code (my english is very bad, i know…)
My package.json have this:
{ "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" } }
Advertisement
Answer
I found answer.
In ./.angular-cli.json
at the row scripts
change folder from:
"../node_modules/popper.js/dist/popper.js"
to this (if you use modern version of webpack):
"../node_modules/popper.js/dist/esm/popper.js"
else this:
"../node_modules/popper.js/dist/umd/popper.js"
Thanks fezVrasta