Related
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
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 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?)
I have an Angular2 project generated with angular-cli. I am trying to use this javascript library: https://micku7zu.github.io/vanilla-tilt.js/
. As it stands, I save the minified js file in my assets folder. The code below is just there for me to be thorough. Added a script pointing to that file in my angular-cli.json file:
{
"project": {
"version": "1.0.0-beta.28.3",
"name": "HowDoICorrectlyUseExtraJSFiles"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.scss"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"assets/js/vanilla-tilt.min.js" //ADDED JS FILE HERE (paths are correct and are loaded in the browser)
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"files": "src/**/*.ts",
"project": "src/tsconfig.json"
},
{
"files": "e2e/**/*.ts",
"project": "e2e/tsconfig.json"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
In addition, I added a script to my index.html file, although I would like to avoid this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Kompario</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="assets/js/vanilla-tilt.min.js"></script>
</body>
</html>
Here's my package.json:
{
"name": "kompario",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "^2.3.1",
"#angular/compiler": "^2.3.1",
"#angular/core": "^2.3.1",
"#angular/forms": "^2.3.1",
"#angular/http": "^2.3.1",
"#angular/platform-browser": "^2.3.1",
"#angular/platform-browser-dynamic": "^2.3.1",
"#angular/router": "^3.3.1",
"bootstrap": "^4.0.0-alpha.6",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"ts-helpers": "^1.1.1",
"typescript": "^2.2.0",
"zone.js": "^0.7.2"
},
"devDependencies": {
"#angular/compiler-cli": "^2.3.1",
"#angular/compiler": "^2.3.1",
"#types/jasmine": "2.5.38",
"#types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.28.3",
"codelyzer": "~2.0.0-beta.1",
"jasmine-core": "2.5.2",
"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.13",
"ts-node": "1.2.1",
"tslint": "^4.3.0",
"typescript": "~2.0.3"
}
}
So my question is: How do I correctly import a JS library like tilt.js into my recently generated angular-cli project? More specifically, how do I use it's directives in my templates and controllers?