I get this error when serving Angular 2 application on browser:
Uncaught ReferenceError: require is not defined
at eval (eval at t.exports (addScript.js:9), <anonymous>:1:15)
at eval (<anonymous>)
at t.exports (addScript.js:9)
at Object.355 (parsley.js?a34d:1)
at r (bootstrap 8987729…:52)
at Object.688 (scripts.f16ed82….bundle.js:155)
at r (bootstrap 8987729…:52)
at window.webpackJsonp (bootstrap 8987729…:23)
at scripts.f16ed82….bundle.js:1
Below you have my configuration:
package.json
{
"name": "my-app",
"version": "1.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"prod": "ng build -prod",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",
"core-js": "^2.4.1",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23",
"animate.css": "3.1.1",
"bootstrap": "^3.3.7",
"font-awesome": "^4.7.0",
"jquery": "2.1.4",
"metismenu": "^2.5.0",
"flexslider": "2.6.3",
"jquery.easing": "1.4.1",
"magnific-popup": "1.1.0",
"jquery-sticky": "1.0.4",
"owl.carousel": "2.2.0",
"parsley": "0.1.0",
"themify-icons": "1.0.0"
},
"devDependencies": {
"@types/jasmine": "2.2.30",
"@types/node": "6.0.42",
"angular-cli": "1.0.0-beta.18",
"codelyzer": "1.0.0-beta.1",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "2.0.0",
"karma-cli": "1.0.1",
"karma-jasmine": "1.0.2",
"karma-remap-istanbul": "0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "2.0.3"
}
}
angular-cli.json
{
"project": {
"version": "1.0.0",
"name": "my-app"
},
"apps": [
{
"root": "src",
"outDir": "../webapp",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/flexslider/flexslider.css",
"../node_modules/owl.carousel/dist/assets/owl.carousel.css",
"../node_modules/owl.carousel/dist/assets/owl.theme.default.min.css",
"../node_modules/magnific-popup/dist/magnific-popup.css",
"assets/styles/styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/jquery.easing/jquery.easing.js",
"../node_modules/jquery-sticky/jquery.sticky.js",
"../node_modules/flexslider/jquery.flexslider.js",
"../node_modules/owl.carousel/dist/owl.carousel.min.js",
"../node_modules/magnific-popup/dist/jquery.magnific-popup.min.js",
"../node_modules/parsley/bench/parsley.js",
"assets/js/app.js",
"../node_modules/metismenu/dist/metisMenu.js",
"../src/vendor/pace/pace.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
tsconfig.json
{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "commonjs",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
}
}
Any idea what could cause this error? This is an angular 2 application built with angular cli directly inside maven, using frontend-maven-plugin inside a spring boot app. But the angular 2 application could be also built separately using only node, npm and ng.
You have not provided your karma.conf.js in question description. Please check it must include:-
frameworks: ['jasmine', 'requirejs']
in config set section.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.