When I inspect the image elasticsearch#sha256:92fca5d2fe565f97ce11209fcd057e95f3f18287757be680dc76590788b84fcf, I am getting the layer information below. There are many repeated layers. Why is this happening?
"RootFS": {
"Type": "layers",
"Layers": [
"sha256:12e469267d21d66ac9dcae33a4d3d202ccb2591869270b95d0aad7516c7d075b",
"sha256:5f70bf18a086007016e948b04aed3b82103a36bea41755b6cddfaf10ace3c6ef",
"sha256:0d78baeff42ffece0dedcf64de6e1fea1e867e274fa36e1ebc5a4ab6af5d45f1",
"sha256:436c692f222877b88632550ce3e11968d3a8d0916d3b4fc6f33d713196a2b891",
"sha256:8e3cccdc82291f3ff62692f62afbcc4455a34a3f8d81b8c5d4775b4fe68c140e",
"sha256:5f70bf18a086007016e948b04aed3b82103a36bea41755b6cddfaf10ace3c6ef",
"sha256:5f70bf18a086007016e948b04aed3b82103a36bea41755b6cddfaf10ace3c6ef",
"sha256:5f70bf18a086007016e948b04aed3b82103a36bea41755b6cddfaf10ace3c6ef",
"sha256:5f70bf18a086007016e948b04aed3b82103a36bea41755b6cddfaf10ace3c6ef",
"sha256:0bdcf95ed87616883f5b746d24ecb71461b3f76b280480282e1f03e97bc7b68b",
"sha256:cbbec3d4fa2d4294d5ecd93fd945634ae7eb992df72b03dff645af0f854f9b19",
"sha256:f87abd9c74bf58896dc6fca32a8a5e06de65509116fc7c24b46c38df394a5d81",
"sha256:a8a2696157358397c52f5f8da7504735f38b041745c4bffb776f8316c2ce6ec7",
"sha256:66ed94e706a71223e5db8d94580750ad110de4d73a6cce56f7d229ece8daff4c",
"sha256:bbaa010363187219166f97c7ac612de3514a04a94fda17d9625e0dddb48120cd",
"sha256:5f70bf18a086007016e948b04aed3b82103a36bea41755b6cddfaf10ace3c6ef",
"sha256:5f70bf18a086007016e948b04aed3b82103a36bea41755b6cddfaf10ace3c6ef",
"sha256:5f70bf18a086007016e948b04aed3b82103a36bea41755b6cddfaf10ace3c6ef",
"sha256:5d248fc15d0e269fc8c45f4812444eae595b0f4c39d6512f6cf2a014ccdf0ff0",
"sha256:22eea9de37a553c8981aff7d65259a368fe2343babb49fd2fef55cd94c3d52d9",
"sha256:5f70bf18a086007016e948b04aed3b82103a36bea41755b6cddfaf10ace3c6ef",
"sha256:5f2c80f758e56ff4ffc6ee807047ae7ad6391270e08c9851d72588906fec6fab",
"sha256:4c9c17a09c33c40659e585bfd15f3ea4e2f762fcd95079b3940d716818e1277d",
"sha256:5f70bf18a086007016e948b04aed3b82103a36bea41755b6cddfaf10ace3c6ef",
"sha256:92d6e040a0969db56ab7766679f10c2c64e9b051d0855f12c02c5ba5030b6a33",
"sha256:5f70bf18a086007016e948b04aed3b82103a36bea41755b6cddfaf10ace3c6ef",
"sha256:5f70bf18a086007016e948b04aed3b82103a36bea41755b6cddfaf10ace3c6ef",
"sha256:5f70bf18a086007016e948b04aed3b82103a36bea41755b6cddfaf10ace3c6ef"
]
},
This is an extremely old image for elasticsearch 2.1.0 built back in 2015. Back then, the manifest schema (v1) had a container and layer created for each change, including metadata only changes that don't result in any change to the filesystem:
$ regctl manifest get elasticsearch#sha256:92fca5d2fe565f97ce11209fcd057e95f3f18287757be680dc76590788b84fcf
{
"schemaVersion": 1,
"name": "library/elasticsearch",
"tag": "2.1.0",
"architecture": "amd64",
"fsLayers": [
{
"blobSum": "sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4"
},
{
"blobSum": "sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4"
},
{
"blobSum": "sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4"
},
{
"blobSum": "sha256:fba6c215477099bd3c0cbbb26a3adec50be32d5794ac3c683c7efe5437665aba"
},
{
"blobSum": "sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4"
},
{
"blobSum": "sha256:338829b4f325b9c13a2ad15381eeec2958e85dcf462df329a14514673d14c114"
},
{
"blobSum": "sha256:a0aa250d5025f9051d2854be2cc30fbb3ef757e7e2c0cd0568c056647ff35240"
},
{
"blobSum": "sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4"
},
{
"blobSum": "sha256:a49c2f7dfc82def14c51751e3cd36176812dc478bb76444938bf11f3d36d8fb8"
},
{
"blobSum": "sha256:4ccacd6bfa15f3ea1c60b284a47b4a8d5b0c50e3525cee39de59e0fbc89984dc"
},
{
"blobSum": "sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4"
},
{
"blobSum": "sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4"
},
{
"blobSum": "sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4"
},
{
"blobSum": "sha256:58d1e1dd0f86b73fd9687a779fc85f35327f4734a1dc1bb81fc05ca4fe96b15b"
},
{
"blobSum": "sha256:5ddab515df02c5c1abbfafa886683eff3d428af67196a168038ceceff2197547"
},
{
"blobSum": "sha256:a91742ab17fc79d25e9cb8e39dc5ecc987648a92af1ef6599e7fc90bf4356f1a"
},
{
"blobSum": "sha256:d34e22497ac0e2e4213dbd2c55013b79d006d0ed06dd76650dc11f1b22bc943f"
},
{
"blobSum": "sha256:20ae76d672fc2b0ab4c6698434e92773d1ce13708b12e71e9c2f70eef2e8e7fb"
},
{
"blobSum": "sha256:2464058c255a21e49f60906f3d012584b359be2839a785c59ea2d216998eff90"
},
{
"blobSum": "sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4"
},
{
"blobSum": "sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4"
},
{
"blobSum": "sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4"
},
{
"blobSum": "sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4"
},
{
"blobSum": "sha256:03f01b5df3859d775ef5c36d4c417b132d9bbd963355db4437b2d49fc70435f2"
},
{
"blobSum": "sha256:78b9e3c01ea48aaa24c846b994ce9cd08b89bbda022dd3af29795dad64206533"
},
{
"blobSum": "sha256:816152842605fe3ede1dc7c47f33e641f74cb4ae0d5c51a6c19cc8d85da934f3"
},
{
"blobSum": "sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4"
},
{
"blobSum": "sha256:d4bce7fd68df2e8bb04e317e7cb7899e981159a4da89339e38c8bf30e6c318f0"
}
],
...
$ regctl blob get elasticsearch sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4 | tar -tvzf -
$
If you look at newer images, the v2 schema adds the ability to flag a history step as an empty layer, so the rootfs has no entry for those.
Related
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"
]
}
]
}
},
I need to get the image upload date from a Docker Registry
I currently use the following https://registry/v2/repository/manifests/tag which gives me Creation Date. This is stale in most cases. I want to know when something was uploaded.
If I can't get this, is there a way to do docker build and specify and date/time which could be used in place of the Creation Date?
An example of the manifest I'm getting which shows the only dates available are the v1Compatibility/created:
{
"schemaVersion": 1,
"name": "users/jesaremi/baseimage",
"tag": "6a69f60507f029f76ff102aa1b89b562d2d784dfdbfef38cb0ed5c0b61a188ff",
"architecture": "amd64",
"fsLayers": [
{
"blobSum": "sha256:a3ed95caeb02ffe68cdd9fd84406680ae93d633cb16422d00e8a7c22955b46d4"
},
{
"blobSum": "sha256:7c9d20b9b6cda1c58bc4f9d6c401386786f584437abbe87e58910f8a9a15386b"
}
],
"history": [
{
"v1Compatibility": "{\"architecture\":\"amd64\",\"config\":{\"Hostname\":\"\",\"Domainname\":\"\",\"User\":\"\",\"AttachStdin\":false,\"AttachStdout\":false,\"AttachStderr\":false,\"Tty\":false,\"OpenStdin\":false,\"StdinOnce\":false,\"Env\":[\"PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin\"],\"Cmd\":[\"sh\"],\"ArgsEscaped\":true,\"Image\":\"sha256:758a17a836a4c09586a291c928d1f0561320e252d07c4749e14338daefe84b18\",\"Volumes\":null,\"WorkingDir\":\"\",\"Entrypoint\":null,\"OnBuild\":null,\"Labels\":null},\"container\":\"e30cd53834b3dfdb989c63cc73f4f31f404c7a6a0c0e9d6b9e3e8451edd72596\",\"container_config\":{\"Hostname\":\"e30cd53834b3\",\"Domainname\":\"\",\"User\":\"\",\"AttachStdin\":false,\"AttachStdout\":false,\"AttachStderr\":false,\"Tty\":false,\"OpenStdin\":false,\"StdinOnce\":false,\"Env\":[\"PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin\"],\"Cmd\":[\"/bin/sh\",\"-c\",\"#(nop) \",\"CMD [\\\"sh\\\"]\"],\"ArgsEscaped\":true,\"Image\":\"sha256:758a17a836a4c09586a291c928d1f0561320e252d07c4749e14338daefe84b18\",\"Volumes\":null,\"WorkingDir\":\"\",\"Entrypoint\":null,\"OnBuild\":null,\"Labels\":{}},\"created\":\"2019-09-04T19:20:16.230463098Z\",\"docker_version\":\"18.06.1-ce\",\"id\":\"a91ec18e2f45c300f1df0a23ac04c1396d791c6c387dd5e16e44dc96a4fc309d\",\"os\":\"linux\",\"parent\":\"bd5fbbc2870744fe1d37bbd120eebe4c441f8401c54b04b8ae0f9f625936f4c3\",\"throwaway\":true}"
},
{
"v1Compatibility": "{\"id\":\"bd5fbbc2870744fe1d37bbd120eebe4c441f8401c54b04b8ae0f9f625936f4c3\",\"created\":\"2019-09-04T19:20:16.080265634Z\",\"container_config\":{\"Cmd\":[\"/bin/sh -c #(nop) ADD file:9151f4d22f19f41b7a289e87aa9cfba3956ffd27746cb3b171b9bd2cb7e6c313 in / \"]}}"
}
],
"signatures": [
{
"header": {
"jwk": {
"crv": "P-256",
"kid": "3NQM:K5YD:M3XF:EKJD:4S64:3772:BJOT:JIMR:NX4R:2XYS:IDNA:NOKL",
"kty": "EC",
"x": "k6pZfyr-dKYLri5KJCL70UmNLCQnfUh2lAC_nDK9PVw",
"y": "MhrKOUbx1sgsbF0kG9d5bfvkVaxaFWiKlWTwgFyHkbQ"
},
"alg": "ES256"
},
"signature": "klE8-cWOS1GZenBB7CPXYUK8VWmqiVQaFfWGgBQPn_L8iayojGEUc9D_06WCUdAqL7upvNIxcCPXJvZMORLn_Q",
"protected": "eyJmb3JtYXRMZW5ndGgiOjIxOTksImZvcm1hdFRhaWwiOiJDbjAiLCJ0aW1lIjoiMjAxOS0xMC0yM1QyMTo0MTozM1oifQ"
}
]
}
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} } }
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"
...
}
}
}
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.