I have a running application which is totally fine when I do npm run start.
But when I do npm run build:ssr and npm run serve:ssr, it does not work properly. Strangely, it does not give any error.
When I do npm run start I see a button which currently its opacity is 65%. When I hover the mouse, I want the opacity to be 100%.
When I do Angular SSR build (npm run build:ssr and npm run serve:ssr), it does not show the opacity properly.
Currently I am using a CDN to load Bootstrap in the app by embedding the link into index.html like this:
<link rel="stylesheet" type="text/css" href="https://cdn.domain.com/bootstrap.min.css" />
I have tested and am able to download the CSS file without any problem.
I am adding my angular.json and package.json files here:
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"aot": true,
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.browser.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico",
"src/robots.txt",
"src/manifest.json"
],
"styles": [
"./node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
"./node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
"./node_modules/#angular/material/prebuilt-themes/indigo-pink.css"
],
"scripts": []
},
"configurations": {
"dev": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/browser/environment.ts"
}
]
},
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"statsJson": true,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/browser/environment.prod.ts"
}
],
"serviceWorker": true
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "my-app:build"
},
"configurations": {
"dev": {
"browserTarget": "my-app:build:dev"
},
"production": {
"browserTarget": "my-app:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "my-app:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [],
"assets": [
"src/assets",
"src/favicon.ico",
"src/robots.txt",
"src/manifest.json"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"server": {
"builder": "#angular-devkit/build-angular:server",
"options": {
"outputPath": "dist-server",
"main": "server.ts",
"tsConfig": "src/tsconfig.server.json",
"externalDependencies": [
"#firebase/firestore"
]
},
"configurations": {
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/server/environment.ts"
}
],
"optimization": true
},
"production": {
"optimization": true,
"outputHashing": "none",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/server/environment.prod.ts"
}
]
}
}
},
"serve-ssr": {
"builder": "#nguniversal/builders:ssr-dev-server",
"options": {
"browserTarget": "my-app:build",
"serverTarget": "my-app:server"
},
"configurations": {
"production": {
"browserTarget": "my-app:build:production",
"serverTarget": "my-app:server:production"
},
"dev": {
"browserTarget": "my-app:build:dev",
"serverTarget": "my-app:server:dev"
}
}
},
"prerender": {
"builder": "#nguniversal/builders:prerender",
"options": {
"browserTarget": "my-app:build:production",
"serverTarget": "my-app:server:production",
"routes": [
"/"
]
},
"configurations": {
"production": {}
}
},
"deploy": {
"builder": "#angular/fire:deploy",
"options": {
"ssr": true
}
}
}
},
"my-app-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "my-app:serve"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "my-app",
"schematics": {
"#schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"#schematics/angular:directive": {
"prefix": "app"
}
},
"cli": {
"analytics": "64925903-0f96-433a-83be-7a3fb8485063"
}
}
package.json
{
"name": "my-app",
"version": "9.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"ssr": "ng run my-app:serve-ssr ",
"ssr:watch": "ng run my-app:serve-ssr:dev",
"format:check": "prettier --write --config ./.prettierrc --list-different \"src/{app,environments,styles}/**/*{.ts,.json,.scss}\"",
"build": "ng build",
"build:server": "ng run my-app:server:production",
"build:prod": "ng build --prod",
"build:universal": "ng run my-app:build:production && ng run my-app:server:production",
"server": "node dist-server/main.js",
"test": "ng test",
"test:ci": "cross-env CI=true ng test",
"test:ssr": "run-p test:ssr:*",
"test:ssr:server": "cross-env TEST=true node dist-server/main.js",
"test:ssr:script": "node ./node_modules/npm-delay 2000 && ts-mocha test/*.spec.ts test/exit.ts --timeout 15000",
"lint": "ng lint",
"e2e": "ng e2e",
"bundle-report": "ng build --stats-json && webpack-bundle-analyzer dist/stats.json",
"bundle-report:prod": "ng build --stats-json --prod && webpack-bundle-analyzer dist/stats.json",
"dev:ssr": "ng run my-app:serve-ssr",
"serve:ssr": "node dist-server/main.js",
"build:ssr": "ng build --prod && ng run my-app:server:production",
"prerender": "ng run my-app:prerender",
"postinstall": "ngcc",
"wa": "webpack-bundle-analyzer --port 4300 dist/stats.json"
},
"private": true,
"dependencies": {
"#angular/animations": "9.0.7",
"#angular/cdk": "^10.2.0",
"#angular/common": "9.0.7",
"#angular/compiler": "9.0.7",
"#angular/core": "9.0.7",
"#angular/elements": "^10.1.0",
"#angular/fire": "^6.0.2",
"#angular/forms": "9.0.7",
"#angular/localize": "9.0.7",
"#angular/material": "^10.2.0",
"#angular/platform-browser": "9.0.7",
"#angular/platform-browser-dynamic": "9.0.7",
"#angular/router": "9.0.7",
"#angular/service-worker": "9.0.7",
"#gorniv/ngx-universal": "^2.2.2",
"#ng-bootstrap/ng-bootstrap": "^6.2.0",
"#ng-select/ng-select": "^5.0.1",
"#nguniversal/common": "9.0.2",
"#nguniversal/express-engine": "9.0.2",
"#nguniversal/module-map-ngfactory-loader": "^8.2.6",
"#ngx-meta/core": "8.0.2",
"#ngx-translate/core": "12.1.2",
"#ngx-translate/http-loader": "4.0.0",
"#nicky-lenaers/ngx-scroll-to": "^9.0.0",
"#types/facebook-js-sdk": "^3.3.0",
"#types/loader-utils": "^2.0.1",
"angular2-image-upload": "^1.0.0-rc.2",
"bootstrap": "^4.4.0",
"cookie-parser": "1.4.5",
"dayjs": "^1.8.35",
"express": "4.17.1",
"firebase": "^7.19.1",
"hammerjs": "^2.0.8",
"husky": "^4.2.5",
"ng-gallery": "^5.0.0",
"ng2-dragula": "^2.1.1",
"ngx-infinite-scroll": "^9.0.0",
"ngx-owl-carousel-o": "^1.1.3",
"node-cache": "5.1.0",
"reflect-metadata": "0.1.13",
"rxjs": "6.5.4",
"rxjs-tslint": "^0.1.8",
"speakingurl": "^14.0.1",
"tslib": "1.11.1",
"zone.js": "~0.10.3"
},
"devDependencies": {
"#angular-devkit/architect": ">= 0.900 < 0.1100",
"#angular-devkit/build-angular": "0.901.9",
"#angular/cli": "9.0.7",
"#angular/compiler-cli": "9.0.7",
"#angular/language-service": "9.0.7",
"#angular/platform-server": "9.0.7",
"#nguniversal/builders": "9.0.2",
"#types/chai": "4.2.11",
"#types/express": "4.17.3",
"#types/jasmine": "3.5.9",
"#types/jasminewd2": "2.0.8",
"#types/node": "12.11.1",
"#types/speakingurl": "^13.0.2",
"chai": "4.2.0",
"codelyzer": "5.2.1",
"cross-env": "5.2.1",
"firebase-admin": "^8.10.0",
"firebase-functions": "^3.6.0",
"firebase-functions-test": "^0.2.0",
"firebase-tools": "^8.0.0",
"fuzzy": "^0.1.3",
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "^5.2.0",
"karma-chrome-launcher": "3.1.0",
"karma-cli": "2.0.0",
"karma-coverage-istanbul-reporter": "2.1.1",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "1.5.2",
"mocha": "^8.1.3",
"nodemon": "^2.0.4",
"npm-delay": "1.0.4",
"npm-run-all": "4.1.5",
"open": "^7.0.3",
"prettier": "^1.19.1",
"prettier-tslint": "^0.4.2",
"protractor": "^7.0.0",
"source-map-support": "0.5.16",
"ssri": "6.0.1",
"ts-mocha": "6.0.0",
"ts-node": "8.8.0",
"tslint": "5.20.1",
"typescript": "3.7.5",
"webpack-bundle-analyzer": "^3.6.1",
"webpack-cli": "3.3.11",
"webpack-node-externals": "1.7.2"
}
}
I am suspecting that the Bootstrap loading method might not be right. Any help would be appreciated.
I got it to work. The problem was the percentage symbol of the css. So if you are changing opacity, do not use percentage symbol. instead decimals like %65 => 0.65
Related
I am using Angular version - 13.1.2.
I tried using 3rd party nuget for Pulsar JavaScript Client https://www.npmjs.com/package/pulsar-ws
In code, when I try to use require in Javascript file I created, I get require not defined error from browser. Based on solutions I could find, I tried using import instead and that gave me error that Cannot use import statement outside a module. I tried every solution I could find but no luck.
My import statement which I also tried using require.
'use strict';
import { stringify } from 'query-string';
My Package.json
{
"name": "pulsarangularclient",
"version": "0.0.0",
"type": "module",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "~13.1.0",
"#angular/common": "~13.1.0",
"#angular/compiler": "~13.1.0",
"#angular/core": "~13.1.0",
"#angular/forms": "~13.1.0",
"#angular/platform-browser": "~13.1.0",
"#angular/platform-browser-dynamic": "~13.1.0",
"#angular/router": "~13.1.0",
"jquery": "^3.6.0",
"pug": "^3.0.2",
"pulsar-ws": "^1.2.8",
"query-string": "^7.1.1",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^13.3.8",
"#angular/cli": "~13.1.1",
"#angular/compiler-cli": "~13.1.0",
"#types/jasmine": "~3.10.0",
"#types/node": "^12.20.55",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.1.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.5.2"
}
}
My Angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"PulsarAngularClient": {
"projectType": "application",
"schematics": {
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/pulsar-angular-client",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": [
"src/assets/jquery-3.6.0.min.js",
"src/assets/PulsarWSClient.js"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "PulsarAngularClient:build:production"
},
"development": {
"browserTarget": "PulsarAngularClient:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "PulsarAngularClient:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": [
"src/assets/jquery-3.6.0.min.js",
"src/assets/PulsarWSClient.js"
]
}
}
}
}
},
"defaultProject": "PulsarAngularClient"
}
I am trying to run a project from github on my Mac.
When I run ng serve or ng build after npm install in the terminal in the correct folder I get the following error
Could not find the implementation for builder #angular-devkit/build-angular:dev-server
Error: Could not find the implementation for builder #angular-devkit/build-angular:dev-server
at WorkspaceNodeModulesArchitectHost.resolveBuilder (/Users/x/x/x/Angular/node_modules/#angular/cli/node_modules/#angular-devkit/architect/node/node-modules-architect-host.js:49:19)
at ServeCommand.initialize (/Users/sydney/Downloads/HealthLock-Webapp-master/Angular/node_modules/#angular/cli/models/architect-command.js:135:55)
at async ServeCommand.validateAndRun (/Users/sydney/Downloads/HealthLock-Webapp-master/Angular/node_modules/#angular/cli/models/command.js:127:9)
at async Object.runCommand (/Users/x/x/x/Angular/node_modules/#angular/cli/models/command-runner.js:178:24)
at async default_1 (/Users/x/x/x/Angular/node_modules/#angular/cli/lib/cli/index.js:32:31)
I have followed all the information I could find based on other times this question has been asked here and on other websites. I have uninstalled and reinstalled. I have cleared the cache. I have tried npm install --save-dev #angular-devkit/build-angular, npm update, npm i --only=dev, ng update. I have tried all the solutions I could find but none have worked.
Here is my versions:
Angular CLI: 8.0.0
Node: 12.3.1
OS: darwin x64
Angular: 8.0.0
#angular-devkit/architect: 0.13.9
#angular-devkit/build-angular: 0.13.9
#angular-devkit/build-optimizer: 0.13.9
#angular-devkit/build-webpack: 0.13.9
#angular-devkit/core: 7.3.9
#angular-devkit/schematics: 8.0.0
#angular/cdk: 7.3.7
#angular/http: 8.0.0-beta.10
#ngtools/webpack: 7.3.9
#schematics/angular: 8.0.0
#schematics/update: 0.800.0
rxjs: 6.5.2
typescript: 3.4.5
webpack:4.29.0
Here is my json file
{
"name": "x",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.0.0",
"#angular/cdk": "^7.3.7",
"#angular/common": "^8.0.0",
"#angular/compiler": "^8.0.0",
"#angular/core": "^8.0.0",
"#angular/forms": "^8.0.0",
"#angular/http": "^8.0.0-beta.10",
"#angular/platform-browser": "^8.0.0",
"#angular/platform-browser-dynamic": "^8.0.0",
"#angular/router": "^8.0.0",
"#types/moment": "^2.13.0",
"angular2-signaturepad": "^2.8.0",
"core-js": "^2.6.9",
"hammerjs": "^2.0.8",
"html2canvas": "^1.0.0-rc.2",
"jspdf": "^1.5.3",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"ng-circle-progress": "^1.4.1",
"ng-select": "^1.0.1",
"ngx-bootstrap": "^3.3.0",
"ngx-device-detector": "^1.3.5",
"ngx-mask": "^6.5.18",
"ngx-owl-carousel-o": "^0.1.2",
"rxjs": "6.5.2",
"rxjs-compat": "6.3.3",
"zone.js": "^0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.13.9",
"#angular/cli": "^8.0.0",
"#angular/compiler-cli": "^8.0.0",
"#angular/language-service": "^8.0.0",
"#types/jasmine": "^2.8.16",
"#types/jasminewd2": "^2.0.6",
"#types/lodash": "^4.14.132",
"#types/node": "~8.9.4",
"codelyzer": "~4.2.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "^2.0.5",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "^5.4.2",
"ts-node": "~5.0.1",
"tslint": "~5.9.1",
"typescript": "^3.4.5"
}
}
Angular.json file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"healthlock": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/healthlock",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
"node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
"src/styles.scss"
],
"scripts": ["src/env.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
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "healthlock:build"
},
"configurations": {
"production": {
"browserTarget": "healthlock:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "healthlock: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.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"healthlock-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "healthlock:serve"
},
"configurations": {
"production": {
"devServerTarget": "healthlock:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "healthlock"
I've had the same issue on a few projects. I ran npm i --save-dev #angular-devkit/build-angular#latest which seemed to fix everything for me.
Note - I have #latest at the end of my command which will install the latest version. At the time of me posting this answer, it installed version '0.800.3'.
Hope this helps you!
Looks like an issue with the most recent release of the #angular/cli#8; This issue could be related. I suggest downgrading to #angular/cli#7 for the time being.
Could you please share your file: angular.json
You should have something like this inside architect :{..}
for ng serve :
...
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "HealthLock-Webapp-master:build"
},
"configurations": {
"production": {
"browserTarget": "HealthLock-Webapp-master:build:production"
}
}
}, ...
and for ng build:
...
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/styles.scss",
"src/theme.scss"
],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}}...
You can try:
npm uninstall #angular-devkit/build-angular
npm install #angular-devkit/build-angular
ng update --all
Looks like you're using the old builders. In version 8 we update some of the internals of the CLI.
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.
I recently updated my Angular project to Angular 7. Now, when I run "ng serve --open" from the CLI, I get the following error:
Uncaught TypeError: ctorParameters.map is not a function
at ReflectionCapabilities._ownParameters (core.js:1394)
at ReflectionCapabilities.parameters (core.js:1426)
at JitReflector.parameters (platform-browser-dynamic.js:48)
at CompileMetadataResolver._getDependenciesMetadata (compiler.js:10202)
at CompileMetadataResolver._getTypeMetadata (compiler.js:10155)
at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:9784)
at CompileMetadataResolver.loadDirectiveMetadata (compiler.js:9647)
at _filterJitIdentifiers.forEach (compiler.js:23148)
at Array.forEach ()
at _filterJitIdentifiers.forEach (compiler.js:23147)
My package.json looks like this:
{
"name": "frontend",
"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": "^7.0.1",
"#angular/cdk": "^7.0.2",
"#angular/common": "^7.0.1",
"#angular/compiler": "^7.0.1",
"#angular/core": "^7.0.1",
"#angular/flex-layout": "^7.0.0-beta.19",
"#angular/forms": "^7.0.1",
"#angular/http": "^7.0.1",
"#angular/material": "^7.0.2",
"#angular/platform-browser": "^7.0.1",
"#angular/platform-browser-dynamic": "^7.0.1",
"#angular/router": "^7.0.1",
"#auth0/angular-jwt": "^2.0.0",
"#ngx-translate/core": "^11.0.0",
"#ngx-translate/http-loader": "^4.0.0",
"angular2-draggable": "^2.1.6",
"core-js": "^2.5.7",
"enhanced-resolve": "^4.1.0",
"moment": "^2.22.2",
"ng-drag-drop": "^5.0.0",
"ngx-quill": "^4.0.0",
"ngx-quill-editor": "^2.2.2",
"rxjs": "^6.3.3",
"rxjs-compat": "^6.0.0-rc.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.10.0",
"#angular/cli": "^7.0.3",
"#angular/compiler-cli": "^7.0.1",
"#angular/language-service": "^7.0.1",
"#types/jasmine": "~2.8.9",
"#types/jasminewd2": "~2.0.5",
"#types/node": "~10.12.1",
"codelyzer": "^4.5.0",
"jasmine-core": "~3.3.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^2.0.4",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^1.4.0",
"node-sass": "^4.9.4",
"protractor": "~5.4.1",
"ts-node": "~7.0.1",
"tslint": "~5.11.0",
"typescript": "~3.1.3"
}
}
tsconfig:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"#app/*": [
"./app/*"
]
},
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es2018",
"typeRoots": [
"./node_modules/#types"
],
"lib": [
"es2018",
"dom"
],
"module": "es2015"
}
}
angular.json:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"frontend": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/styles.scss",
"node_modules/quill/dist/quill.core.css",
"node_modules/quill/dist/quill.bubble.css",
"node_modules/ng-drag-drop/style.css"
],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "frontend:build"
},
"configurations": {
"production": {
"browserTarget": "frontend:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "frontend:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [
"src/styles.scss",
"node_modules/quill/dist/quill.core.css",
"node_modules/quill/dist/quill.bubble.css",
"node_modules/ng2-drag-drop/style.css"
],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"frontend-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "frontend:serve"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "frontend",
"schematics": {
"#schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"#schematics/angular:directive": {
"prefix": "app"
}
}
}
I assume that there are some dependency errors (currently, when I run "npm audit fix", NPM shows me that the auth0/angular-jwt library needs Angular 6, there is already a GitHub issue, but even if I remove that library temporary, the error still occurs).
Edit: When I run ng serve --open --aot it works. But why?
Angular released a newer version 7.0.2
this bug should be fixed,
run ng update --all to update
I facing this problem from last 2 days. I have updated the version of Angular from version 4 to 6 but after that, I am not able to create the production build. Commands like yarn build, yarn dev are working fine. But when I run yarn build:prod I am getting error Unknown option: '-p'.
I am pretty new to Angular and not able to figuring out what is going wrong. So, any help would be really appreciated.
Package.json
{
"name": "nitrogen",
"version": "0.0.1",
"license": "MIT",
"scripts": {
"ng": "ng",
"dev": "node --max_old_space_size=8000 ./node_modules/.bin/ng serve --proxy-config proxy.conf.json",
"serve:prod": "yarn build:prod && hs -p 4200 dist/",
"build": "ng build",
"build:dev": "ng build --statsJson",
"build:prod": "ng build -prod -aot --statsJson -d /admin",
"test": "ng test",
"coverage": "ng test --watch false --cc",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^5.0.0",
"#angular/common": "^5.0.0",
"#angular/compiler": "^5.0.0",
"#angular/core": "^5.0.0",
"#angular/forms": "^5.0.0",
"#angular/http": "^5.0.0",
"#angular/platform-browser": "^5.0.0",
"#angular/platform-browser-dynamic": "^5.0.0",
"#angular/router": "^5.0.0",
"#types/underscore": "^1.8.8",
"angular2-text-mask": "^8.0.5",
"bootstrap": "^3.3.7",
"core-js": "^2.5.7",
"file-saver": "^1.3.8",
"jquery": "^3.3.1",
"moment": "^2.22.2",
"ng2-file-upload": "^1.3.0",
"ng2-nvd3": "^2.0.0",
"ngx-bootstrap": "^1.9.3",
"ngx-cookie": "^1.0.0",
"ngx-toastr": "^6.3.0",
"node-sass": "^4.9.0",
"raven-js": "^3.26.2",
"rxjs": "^5.5.11",
"underscore": "^1.9.1",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.6.8",
"#angular/cli": "^6.0.8",
"#angular/compiler-cli": "^5.0.0",
"#angular/language-service": "^5.0.0",
"#types/file-saver": "^1.3.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "^6.0.112",
"codelyzer": "~3.2.0",
"http-server": "^0.10.0",
"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.4.3",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.2",
"ts-node": "~3.2.0",
"tslint": "~5.7.0",
"typescript": "~2.4.0"
`}
`}
Envirnment.ts
// The file contents for the current environment will overwrite these during build.
// The build system defaults to the dev environment which uses `environment.ts`, but if you do
// `ng build --env=prod` then `environment.prod.ts` will be used instead.
// The list of which env maps to which file can be found in `.angular-cli.json`.
export const environment = {
production: false,
envName: 'dev',
// apiUrl: 'https://sp.ipsator.com:8443/api/v1/',
// publicUrl: 'https://sp.ipsator.com:8443/api/v1/'
apiUrl: 'v1/',
publicUrl: 'v1/',
stationUrl: 'dqoz1bwts/',
bankUrl: 'utils/'
};
Environment.prod.ts
export const environment = {
production: true,
envName: 'prod',
apiUrl: 'api/v1/',
publicUrl: 'api/v1/',
stationUrl: 'dqoz1bwts/',
bankUrl: 'utils/'
};
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"nitrogen": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico"
],
"styles": [
"node_modules/ngx-toastr/toastr.css",
"node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"src/assets/styles/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
]
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "nitrogen:build"
},
"configurations": {
"production": {
"browserTarget": "nitrogen:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "nitrogen:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/bootstrap/dist/js/bootstrap.js"
],
"styles": [
"node_modules/ngx-toastr/toastr.css",
"node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
"src/assets/styles/styles.scss"
],
"assets": [
"src/assets",
"src/favicon.ico"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"nitrogen-e2e": {
"root": "",
"sourceRoot": "e2e",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "nitrogen:serve"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "nitrogen",
"schematics": {
"#schematics/angular:component": {
"prefix": "admin",
"styleext": "scss"
},
"#schematics/angular:directive": {
"prefix": "admin"
}
}
}
Stage.json
yarn build:prod
sed -i '' -e "s|/admin/|http://nitrogen-assets.s3-website.ap-south-1.amazonaws.com/admin/|g" dist/index.html
Error screenshot
tcs --version
tcs help
I got the same error and it seems that the Angular team change the way the command works
I used this before:
ng b -prod -e devserver
and now the updated command is this:
ng b --prod --c devserver
Observe that -prod change to --prod and -e (or -environment) change to -c (or -configuration)
Hope it helps
Additional Info:
https://medium.com/#beeman/how-to-do-x-in-angular-cli-v6-db7530c23066
Not tcs --version it should be tsc --version.
Try using ng build --prod as #mahval said
Ok, so you don't have Typescript..? Try reinstalling it:
$ rm -rf /node_modules
$ npm install -g typescript
$ npm install typescript --save-dev.
$ npm install
or for Yarn I'm guessing:
$ rm -rf /node_modules
$ yarn global add typescript
$ yarn add --dev typescript.
$ yarn install
and see if that helps.
(Don't you write $ ng build --prod with two -- dashes?)