Btukfyl

I originally had jQuery installed in my angular cli project (I know it's a bad idea), I have however now removed it because obviously it won't work when converting to angular universal.

I've uninstalled jQuery from the project now and checked that no other plugins rely on it however when I rebuild the project it and run it still comes up with jQuery defined error and it's showing the old code for my app modal component which previously used jQuery.

The error it comes up with is and I'm not sure why it's doing this?

The code for my app modal component is

^ But it's not showing like that in the server.js

My package.json contains the following

{
"name": "offigo-v2",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
"serve:ssr": "node dist/server.js",
"build:client-and-server-bundles": "ng build --prod && ng build --prod --project=offigo-v2",
"webpack:server": "webpack --config webpack.server.config.js --progress --colors",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^6.1.10",
"@angular/common": "^6.1.10",
"@angular/compiler": "^6.1.10",
"@angular/core": "^6.1.10",
"@angular/forms": "^6.1.10",
"@angular/http": "^6.1.10",
"@angular/platform-browser": "^6.1.10",
"@angular/platform-browser-dynamic": "^6.1.10",
"@angular/platform-server": "^7.0.4",
"@angular/router": "^6.1.10",
"@mdi/font": "^2.8.94",
"@nguniversal/module-map-ngfactory-loader": "^7.0.2",
"@tinymce/tinymce-angular": "^2.3.1",
"@types/leaflet": "^1.2.14",
"angular2-tinymce": "^3.3.0",
"bootstrap": "^4.1.3",
"core-js": "^2.5.4",
"croppie": "^2.6.2",
"leaflet": "^1.3.4",
"leaflet-gesture-handling": "^1.1.8",
"material-design-icons": "^3.0.1",
"moment": "^2.22.2",
"ngx-lazy-load-images": "^1.3.1",
"popper.js": "^1.14.5",
"rxjs": "^6.3.3",
"siema": "^1.5.1",
"tinymce": "^4.8.5",
"ts-loader": "^5.3.0",
"typeface-cabin": "0.0.54",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "^6.2.7",
"@angular/compiler-cli": "^6.1.10",
"@angular/language-service": "^6.1.10",
"@types/jasmine": "^2.8.12",
"@types/jasminewd2": "^2.0.6",
"@types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.4",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.3.0",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "^2.9.2",
"webpack-cli": "^3.1.2"
}
}


And the angular.json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"offigo-v2": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/offigo-v2",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"preserveSymlinks": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/material-design-icons/iconfont/material-icons.css",
"node_modules/leaflet/dist/leaflet.css",
"node_modules/@mdi/font/css/materialdesignicons.min.css",
"node_modules/typeface-cabin/index.css",
"node_modules/croppie/croppie.css",
"node_modules/leaflet-gesture-handling/dist/leaflet-gesture-handling.min.css",
"node_modules/tinymce/tinymce.min.js",
"src/styles.css"
],
"scripts": [
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/croppie/croppie.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/offigo-server",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "offigo-v2:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.css"
],
"scripts": ,
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "offigo-v2:build"
},
"configurations": {
"production": {
"browserTarget": "offigo-v2:build:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"offigo-v2-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "offigo-v2:serve"
},
"configurations": {
"production": {
"devServerTarget": "offigo-v2:serve:production"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "offigo-v2"
}

The issue is with your popper.js and bootstrap.js because both depends on jquery.

Please try this angular native bootstrap library Bootstrap

For some reason npm run build:server wasn't updating the main.js in the server version, I ran ng run offigo-v2:server which updated the server version so that the server.js wouldn't contain the old code.