Build configuration failed in angular 7 - angular7

I want deployed angular project on server , right now i am comment one server code and build the project. for example i build project for QA , and then comment , and next i build project for INT. this take lot time , and i have to repeat this step for my all server. for alternate i do following configuration
i add configuration added in angular.json , and run following command
ng build --configuration qa
it give me following error
Schema validation failed with the following
errors:
Data path "['build']" should NOT have additional properties(int).
following is my angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"newBuiildProcess": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/newBuiildProcess",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": [],
"es5BrowserSupport": true
},
"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,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
},
"int": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.int.ts"
}
]
},
"qa": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.qa.ts"
}
]
},
"beta": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.beta.ts"
}
]
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "newBuiildProcess:build"
},
"configurations": {
"production": {
"browserTarget": "newBuiildProcess:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "newBuiildProcess: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"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"newBuiildProcess-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "newBuiildProcess:serve"
},
"configurations": {
"production": {
"devServerTarget": "newBuiildProcess:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "newBuiildProcess"
}
anybody can help me on this??

From the look at your angular.json file, the error is pretty clear the property build should not have an int type, it simply doesn't work that way. Additional build types must be added under configurations property that is under the build property. You can read it like this. Build -> Configurations -> list of configurations(int, dev, bla bla, bla)
example:
"build": { "configurations":{ "prod": {// prodOptions}, "hmr": {// otherOptions} } }

Related

not able to notarize electron app using forge

hello I am building electron app for the mac platform and having trouble notarize the app using Forge and getting this error:
Packaging ApplicationWARNING: Code sign failed; please retry manually. Error: Command failed: spctl --assess --type execute --verbose --ignore-cache --no-cache /var/folders/q7//T/electron-packager/darwin-arm64/Integration-darwin-arm64/Integration.app
/var/folders/q7/*/T/electron-packager/darwin-arm64/Integration-darwin-arm64/Integration.app: rejected
source=Unnotarized Developer ID
my forge config
"forge": {
"packagerConfig": {
"appBundleId": "com.anyfolder.integrations",
"osxSign": {
"identity": "Developer ID Application: ****** (****)",
"hardened-runtime": true,
"entitlements": "entitlements.plist",
"entitlements-inherit": "entitlements.plist",
"signature-flags": "library"
},
"osxNotarize": {
"appleId": "myid#id.com",
"appleIdPassword": "my-password"
},
"protocols": [
{
"name": "Any Folder",
"schemes": [
"electron-****"
]
}
],
"icon": "public/images/icon.ico"
},
"publishers": [
{
"name": "#electron-forge/publisher-s3",
"config": {
"bucket": "*******",
"folder": "integrations",
"public": true
}
},
{
"name": "#electron-forge/publisher-github",
"config": {
"repository": {
"owner": "****",
"name": "****"
},
"draft": false,
"prerelease": false
}
}
],
"makers": [
{
"name": "#electron-forge/maker-squirrel",
"config": {
"name": "integrations"
}
},
{
"name": "#electron-forge/maker-dmg",
"config": {
"icon": "public/images/icon.icns",
"format": "ULFO",
"name": "Name",
"overwrite": true,
"debug": true
}
}
],
"plugins": [
[
"#electron-forge/plugin-webpack",
{
"mainConfig": "./webpack.main.config.js",
"renderer": {
"config": "./webpack.renderer.config.js",
"entryPoints": [
{
"html": "./src/render/imageEditor/index.html",
"js": "./src/render/imageEditor/index.tsx",
"name": "capture_window",
"preload": {
"js": "./src/render/imageEditor/preload.ts"
}
},
{
"name": "main_window",
"html": "./src/index.html",
"js": "./src/render/main/index.tsx",
"preload": {
"js": "./src/render/main/preload.ts"
}
},
{
"name": "integrations_menu",
"html": "./src/index.html",
"js": "./src/render/integrations/index.tsx",
"preload": {
"js": "./src/render/integrations/preload.ts"
}
}
]
}
}
]
]
}

Electron app Failed to get ipaddress when exported as Flatpak

I am trying to make a Flatpak for my little application “OpenSpeedTest-Server”
This is a simple network performance estimation tool. It is working fine on Windows, Mac and Linux (DEB).
1) When i Export the same in Flatpak, Application unable to get the client device ip address.
2) Also i am not able to put a custom icon for my Flatpak.
I used electronforge.
Here is my package.json
{
"name": "OpenSpeedTest-Server",
"productName": "OpenSpeedTest-Server",
"version": "2.1.0",
"description": "Network Speed Test Server - by OpenSpeedTest",
"main": "src/index.js",
"scripts": {
"start": "electron-forge start",
"package": "electron-forge package",
"make": "electron-forge make",
"publish": "electron-forge publish",
"lint": "echo \"No linting configured\""
},
"keywords": [],
"author": {
"name": "OpenSpeedTest",
"email": "support#openspeedtest.com"
},
"license": "MIT",
"config": {
"forge": {
"packagerConfig": {
"icon": "src/icon.png"
},
"makers": [
{
"name": "#electron-forge/maker-flatpak",
"config": {
"name": "OpenSpeedTest_Server",
"options": {
"categories": [
"Utility"
],
"icon": "src/icon.png"
}
}
},
{
"name": "#electron-forge/maker-zip",
"platforms": [
"darwin"
]
},
{
"name": "#electron-forge/maker-deb",
"config": {}
},
{
"name": "#electron-forge/maker-rpm",
"config": {}
}
]
}
},
"dependencies": {
"cors": "^2.8.5",
"electron-squirrel-startup": "^1.0.0",
"express": "^4.17.1",
"internal-ip": "^6.2.0",
"tcp-port-used": "^1.0.2"
},
"devDependencies": {
"#davidwinter/electron-forge-maker-snap": "^2.0.4",
"#electron-forge/cli": "^6.0.0-beta.57",
"#electron-forge/maker-deb": "^6.0.0-beta.57",
"#electron-forge/maker-flatpak": "^6.0.0-beta.57",
"#electron-forge/maker-rpm": "^6.0.0-beta.57",
"#electron-forge/maker-squirrel": "^6.0.0-beta.57",
"#electron-forge/maker-zip": "^6.0.0-beta.57",
"electron": "13.1.2"
}
}
How can i solve this issue?
Solved the issue by adding iproute2 to source and specifying icon dimension. Max supported was 512x512 and i was using 1024x1024
{
"name": "#electron-forge/maker-flatpak",
"config": {
"name": "OpenSpeedTest_Server",
"options": {
"categories": [
"Utility"
],
"icon": {
"512x512": "src/android-chrome-512x512.png"
}
},
"modules": [
{
"name": "zypak",
"sources": [
{
"type": "git",
"url": "https://github.com/refi64/zypak",
"tag": "v2021.02"
}
]
},
{
"name": "iproute2",
"make-install-args": [
"PREFIX=/app",
"CONFDIR=/app/share/iproute2",
"SBINDIR=/app/bin"
],
"sources": [
{
"type": "archive",
"url": "https://www.kernel.org/pub/linux/utils/net/iproute2/iproute2-5.7.0.tar.xz",
"sha256": "725dc7ba94aae54c6f8d4223ca055d9fb4fe89d6994b1c03bfb4411c4dd10f21"
}
],
"cleanup": [
"/include",
"/share/bash-completion",
"/share/man"
]
}
]
}
},

How many libraries can i have in the same angular workspace?

Can I have more than one library in the same angular workspace?
For Example:
lib-shared/
projects/
lib1
lib2
lib3
I tried to create a second library in my worskspace and import it into my app getting the following errors:
core.js:4442 ERROR TypeError: Cannot read property 'bindingStartIndex' of null
at ɵɵelementStart (core.js:14822)
at LsLibHeadToolbarComponent_Template (template.html:1)
at executeTemplate (core.js:7457)
at renderView (core.js:7264)
at renderComponent (core.js:8520)
at renderChildComponents (core.js:7138)
at renderView (core.js:7289)
at renderComponent (core.js:8520)
at renderChildComponents (core.js:7138)
at renderView (core.js:7289)
I noticed a strange thing: in the first library I created (working) in the src folder there are the files:
-public-api.ts
-test.ts
instead in the second library there are the files:
-projects.ts
-test.ts
this is my angular.json of workspace:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ls-lib-menu": {
"projectType": "library",
"root": "projects/ls-lib-menu",
"sourceRoot": "projects/ls-lib-menu/src",
"prefix": "ls-lib-menu",
"architect": {
"build": {
"builder": "#angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/ls-lib-menu/tsconfig.lib.json",
"project": "projects/ls-lib-menu/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/ls-lib-menu/tsconfig.lib.prod.json"
}
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "projects/ls-lib-menu/src/test.ts",
"tsConfig": "projects/ls-lib-menu/tsconfig.spec.json",
"karmaConfig": "projects/ls-lib-menu/karma.conf.js"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/ls-lib-menu/tsconfig.lib.json",
"projects/ls-lib-menu/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"ls-lib-head-toolbar": {
"projectType": "library",
"root": "projects/ls-lib-head-toolbar",
"sourceRoot": "projects/ls-lib-head-toolbar/src",
"prefix": "ls-lib-head-toolbar",
"architect": {
"build": {
"builder": "#angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/ls-lib-head-toolbar/tsconfig.lib.json",
"project": "projects/ls-lib-head-toolbar/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/ls-lib-head-toolbar/tsconfig.lib.prod.json"
}
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "projects/ls-lib-head-toolbar/src/test.ts",
"tsConfig": "projects/ls-lib-head-toolbar/tsconfig.spec.json",
"karmaConfig": "projects/ls-lib-head-toolbar/karma.conf.js"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/ls-lib-head-toolbar/tsconfig.lib.json",
"projects/ls-lib-head-toolbar/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ls-lib-menu",
"cli": {
"analytics": false
}
}
I imported both libraries into the app.module.ts file:
import { LsLibMenuModule } from '../../../../../ls-lib-shared/projects/ls-lib-menu/src/public-api';
import { LsLibHeadToolbarModule } from '../../../../../ls-lib-shared/projects/ls-lib-head-toolbar/src/projects';
Yes, you can have as many as you want. Just make sure you add them to the angular.json, but if you generate the library with the angular-CLI this will be done automatically.
https://angular.io/guide/creating-libraries

My angular 7 app is not able to load chunks from proper folder

I have an ASP.NET MVC application, with front-end is angular-cli (angular 7).
Ever since upgrading from 6 to 7 the paths of the chunks are wrong. Apparently the angular is trying to load chunks(using lazy loading) from the root(/) while it is generated in the dist folder. So it gives me 404 error, although the chunks are there in the dist folder
I have tried using ng build --prod --base-href dist
Also tried changing baseUrl in my ts.config.
Probably there should be some option in angular.json to change this behavior.
here is my angular.json
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"testapp": {
"root": "dist/",
"sourceRoot": "NgSrc",
"projectType": "application",
"architect": {
"build":
{
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "NgSrc/index.html",
"main": "NgSrc/App/main.ts",
"tsConfig": "NgSrc/tsconfig.app.json",
"polyfills": "NgSrc/polyfills.ts",
"assets": [
"NgSrc/assets",
"NgSrc/favicon.ico"
],
"styles": [
"node_modules/angular2-toaster/toaster.min.css"
],
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js"
// "node_modules/angular2-toastr/bundles/angular2-toaster.umd.min.js"
]
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
"fileReplacements": [
{
"replace": "NgSrc/environments/environment.ts",
"with": "NgSrc/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "testapp:build"
},
"configurations": {
"production": {
"browserTarget": "testapp:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "testapp:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "NgSrc/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "NgSrc/polyfills.ts",
"tsConfig": "NgSrc/tsconfig.spec.json",
"scripts": [
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/ng2-toastr/bundles/ng2-toastr.min.js"
],
"styles": [
"node_modules/ng2-toastr/bundles/ng2-toastr.min.css"
],
"assets": [
"NgSrc/assets",
"NgSrc/favicon.ico"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"testapp-e2e": {
"root": "e2e",
"sourceRoot": "e2e",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "testapp:serve"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "testapp",
"schematics": {
"#schematics/angular:component": {
"prefix": "app",
"styleext": "css"
},
"#schematics/angular:directive": {
"prefix": "app"
}
}
}```
For those who are clueless like me, The answer lies in the angular.json configuration file. Apparently, there are 2 properties baseHref & deployUrl that we need to understand. baseHref defines the base URL for the application and deployUrl is URL where files will be deployed. So in order to load chunks from a separate folder, we will need to modify deployUrl.
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"baseHref": "/dist/",
"deployUrl": "/dist/",
"outputPath": "../dist"
...
}
}
}

Not able to import `.scss` file getting error

In angular I am getting following error:
ERROR in ./app/shared-components/header/header.component.scss
Module build failed (from ../node_modules/sass-loader/lib/loader.js):
#import '~styles.scss';
^
File to import not found or unreadable: ~styles.scss.
in D:\IBO\Project\IBO-UI\NG-IBO\src\app\shared-components\header\header.component.scss (line 4, column 1)
Error:
#import '~styles.scss';
here is my angular.json file:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ibo": {
"root": "src",
"sourceRoot": "src",
"projectType": "application",
"prefix": "",
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ibo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src",
"src/assets",
"src/web.config"
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules/bootstrap",
"node_modules/angular-calendar",
"./src/styles"
]
},
"scripts": [
"node_modules/popper.js/dist/umd/popper.min.js",
"node_modules/jquery/dist/jquery.min.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"styles": [
"node_modules/devextreme/dist/css/dx.common.css",
"node_modules/devextreme/dist/css/dx.light.css",
"node_modules/font-awesome/css/font-awesome.min.css",
"src/styles/styles.scss",
],
},
"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,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ibo:build"
},
"configurations": {
"production": {
"browserTarget": "ibo:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ibo: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/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/**"
]
}
}
}
},
"ibo-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "app",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ibo:serve"
},
"configurations": {
"production": {
"devServerTarget": "ibo:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ibo"
}
How to come up with this?
Thanks in advance.
// Angular CLI: 7.3.9
// Node: 10.15.0
// OS: win32 x64
// Angular: 7.2.15
Hi,
Here is how I fixed my problem.
I created file with variables in
src/theme/_project-variables.scss
then inside main.scss and component.scss files i used
#import "~theme/project-variables";
If you don't put "_" in filename it will not render.
Also you need to include this file in every component.scss's where you want to use your variables.

Resources