I am new to angular and trying to setup it locally. I am facing an error and trying to fix from last 1 day.
Here is the error i am getting:
ERROR in multi ./scss/styles.scss ../node_modules/font-awesome/css/font-awesome.css ./scss/font-awesome.scss
Module not found: Error: Can't resolve 'D:\angular\my-app\scss\font-awesome.scss' in 'D:\miet\miet-app'
ERROR in multi ./scss/styles.scss ../node_modules/font-awesome/css/font-awesome.css ./scss/font-awesome.scss
Module not found: Error: Can't resolve 'D:\angular\my-app\scss\styles.scss' in 'D:\miet\miet-app'
ERROR in multi ./scss/styles.scss ../node_modules/font-awesome/css/font-awesome.css ./scss/font-awesome.scss
Module not found: Error: Can't resolve 'D:\angular\node_modules\font-awesome\css\font-awesome.css' in 'D:\angular\my-app
My folder structure is D:\miet\miet-app and inside this folder i have node_modules and src folders
Here is my angular.json file:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"miet-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"#schematics/angular:component": {
"styleext": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/miet-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"scss/styles.scss",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/font-awesome/scss/font-awesome.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"../node_modules/bootstrap/scss",
"scss"
]
},
"scripts": []
},
"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": "miet-app:build"
},
"configurations": {
"production": {
"browserTarget": "miet-app:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "miet-app: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/**"
]
}
}
}
},
"miet-app-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "miet-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "miet-app:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "miet-app"
}
I have placed my font-awesome files inside src/scss/font-awesome and in node_module/font-awesome
Here is my app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { AngularFontAwesomeModule } from 'angular-font-awesome';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AngularFontAwesomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Can anyone help me where i am wrong.
Thanks
Try:
npm --depth 9999 update
npm rebuild node-sass
If doesn't work remove node_modules folder and repeat commands above.
Related
I've the following workspace configuration
{
"folders": [
{
"path": "."
}
],
"launch": {
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "docker-compose:launch:chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMaps": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
},
"preLaunchTask": "docker:compose:up",
"postDebugTask": "docker:compose:down"
},
],
},
"tasks": {
"version": "2.0.0",
"tasks": [
{
"label": "npm:install",
"type": "shell",
"command": "npm install",
"linux": {
"command": "if [ -d ${workspaceFolder}/node_modules ]; then npm install fi"
},
"windows": {
"command": "cmd",
"args": ["/C","if not exist ${workspaceFolder}/node_modules npm install"]
},
"options": {"cwd":"${workspaceFolder}"}
},
{
"type": "docker-compose",
"label": "docker:compose:up",
"dependsOn": ["npm:install"],
"isBackground": true,
"dockerCompose": {
"up": {
"detached": true,
"build": true,
"customOptions": "",
"services": [
"site"
]
},
"files": [
"${workspaceFolder}/docker-compose.yaml"
]
}
},
{
"type": "docker-compose",
"label": "docker:compose:down",
"dockerCompose": {
"down": {
"removeVolumes":false
},
"files": [
"${workspaceFolder}/docker-compose.yaml"
]
},
},
]
},
"settings": {
"terminal.integrated.cwd": "${workspaceFolder}"
}
}
The launch("docker-compose:launch:chrome") configuration is not launching the chrome and I think thats happening because it thinks the task is not finished.
As far I know this should be checked using the problemMatcher, for vuejs as an example i can have the following problemMatcher:
"problemMatcher": [{
"base": "$tsc-watch",
"background": {
"activeOnStart": true,
"beginsPattern": "Starting development server",
"endsPattern": "Compiled successfully"
}
}],
How can i achive the same results using docker-compose?
I mean, is there a way to only launch chrome browser when the npm run serve command is finished?
When I am trying to ng build the angular project, it failed generating ES5 bundle. But ng serve is working well.
Generating ES5 bundles for differential loading...
An unhandled exception occurred: Call retries were exceeded
See "C:\Users\Users\AppData\Local\Temp\ng-NswrgZ\angular-errors.log" for further details.
npm ERR! code ELIFECYCLE
npm ERR! syscall spawn
npm ERR! file C:\WINDOWS\system32\cmd.exe
npm ERR! errno ENOENT
npm ERR! initial-angular-project#0.0.0 build: `ng build`
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the initial-angular-project#0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Users\AppData\Roaming\npm-cache\_logs\2020-10-29T10_43_34_845Z-debug.log
angular-errors.log file message error:
[error] Error: Call retries were exceeded
at ChildProcessWorker.initialize (E:\Work_Cord\InitialAngularProject\node_modules\jest-worker\build\workers\ChildProcessWorker.js:193:21)
at ChildProcessWorker._onExit (E:\Work_Cord\InitialAngularProject\node_modules\jest-worker\build\workers\ChildProcessWorker.js:274:12)
at ChildProcess.emit (events.js:315:20)
at Process.ChildProcess._handle.onexit (internal/child_process.js:275:12)
angular.json file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"InitialAngularProject": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/InitialAngularProject/browser",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"allowedCommonJsDependencies": [
"file-saver",
"rxjs/internal/Observable",
"js-sha256",
"devextreme",
"devextreme-angular"
],
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/devextreme/dist/css/dx.common.css",
"node_modules/devextreme/dist/css/dx.light.css",
"./node_modules/#angular/material/prebuilt-themes/purple-green.css",
"./node_modules/bootstrap/dist/css/bootstrap.css",
"src/styles.scss"
],
"scripts": [
"./node_modules/jquery/dist/jquery.js",
"./node_modules/bootstrap/dist/js/bootstrap.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,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "10mb",
"maximumError": "10mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "InitialAngularProject:build",
"port": 4201
},
"configurations": {
"production": {
"browserTarget": "InitialAngularProject:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "InitialAngularProject: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": [
"./node_modules/#angular/material/prebuilt-themes/purple-green.css",
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json",
"tsconfig.server.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "InitialAngularProject:serve"
},
"configurations": {
"production": {
"devServerTarget": "InitialAngularProject:serve:production"
}
}
},
"server": {
"builder": "#angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/InitialAngularProject/server",
"main": "src/main.server.ts",
"tsConfig": "tsconfig.server.json"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"app-shell": {
"builder": "#angular-devkit/build-angular:app-shell",
"options": {
"browserTarget": "InitialAngularProject:build",
"serverTarget": "InitialAngularProject:server",
"route": "app-shell-path"
},
"configurations": {
"production": {
"browserTarget": "InitialAngularProject:build:production",
"serverTarget": "InitialAngularProject:server:production"
}
}
}
}
}
},
"defaultProject": "InitialAngularProject",
"cli": {
"analytics": "05fad134-b906-4d6c-81e2-8fd3f3ad3a2e"
}
}
I have tried a few method but it kept failing. Please refer to the link below.
https://javascriptforwp.com/forums/topic/npm-err-code-elifecycle-on-terminal/
https://github.com/Autodesk-Forge/forge-boilers.nodejs/issues/7
How to solve npm error "npm ERR! code ELIFECYCLE"
I am trying to apply sass based styling to my angular project but the styles are not being applied and in the console of the browser this message appears:
"Refused to apply style from 'http://localhost:4200/dest-list.component.scss' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled'.
I have looked almost every related query but not found a solution, the files for styling i am using are .scss
//Here is Angular.json file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"first-app": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "tourmet",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/first-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"node_modules/bootstrap/dist/css/style.css"
],
"scripts": []
},
"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"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "first-app:build"
},
"configurations": {
"production": {
"browserTarget": "first-app:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "first-app: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"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"defaults":{
"styleExt":"scss",
"component":{}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "first-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "first-app:serve:production"
}
}
}
}
}},
"defaultProject": "first-app"
}
I have analysed little bit more on your issue. Looks like your angular.json file is corrupted. I have corrected the issues and included the scss styling in schematics. So Please use the following angular.json file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"first-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/first-app",
"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.scss",
"node_modules/bootstrap/dist/css/bootstrap.min.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"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "first-app:build"
},
"configurations": {
"production": {
"browserTarget": "first-app:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "first-app: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/**"
]
}
}
}
},
"first-app-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "first-app:serve"
},
"configurations": {
"production": {
"devServerTarget": "first-app:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "first-app"
}
The above will work definitely. But to avoid the same error in future. I recommend the following steps
Update your angular CLI again.
When you are creating new project using angular cli. You should follow the
ng new second-app --style=scss
For your existing project try running the following command to convert your css to scss
ng set defaults.styleExt scss
By following the first two steps will rectify your scss error. But the third step is also essential in case if you are switching from css to .scss.
Hope it helps and will work.
When i tried to access the local Json data in angular 5 using httpclient was not able to fetch the data but when tried to access the same with the web server it is working. i have added the api folder in the angular-cli.json file and still not able to access the json.
employee.component.ts
import {Component} from "#angular/core"
import {EmployeeService} from './employee.service'
#Component({
selector:'app-employee',
templateUrl:'./employee.component.html'
})
export class EmployeeComponent {
list:any
data:any
constructor(private employee:EmployeeService){}
ngOnInit() {
this.employee.getEmployee().subscribe(list=>{
this.data= this.list.data
console.log(this.list)
})
}
}
employee.service.ts
import {Injectable} from "#angular/core";
import {HttpClient} from "#angular/common/http";
import "rxjs/add/operator/map";
#Injectable()
export class EmployeeService {
url: string = "src/app/api/employee.json"
constructor(private http: HttpClient) {}
getEmployee() {
return this.http.get(this.url)
}
}
employee.json
{
"data": [
{
"id": 66896,
"name":"Vinay",
"phone": "9620529048",
"address":{
"city":"Bangalore",
"street":"ABC street",
"state":"Karnataka",
"PostCode":"560076"
}
},
{
"id": 66923,
"name":"John",
"phone": "7720808609",
"address":{
"city":"Hyderabad",
"street":"PQR street",
"state":"UttarPradesh",
"PostCode":"412114"
}
},
{
"id": 66898,
"name":"Vijay",
"phone": "8888830456",
"address":{
"city":"Pune",
"street":"XYZ street",
"state":"Maharastra",
"PostCode":"411067"
}
}
]
}
path for json file - src->app->api->employee.json
Can someone share their knowledge so that i can solve this issue
please find my angular-cli.json file
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"demo": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/demo",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/app/api/employee.json",
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.css"
],
"scripts": []
},
"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": "demo:build"
},
"configurations": {
"production": {
"browserTarget": "demo:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "demo: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": [
"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/**"
]
}
}
}
},
"demo-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "demo:serve"
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "demo"
}
Look at the angular-in-memory-web-api, it serves to simulate a data server, it intercepts HTTP requests.
Angular has done a great tutorial : https://angular.io/tutorial/toh-pt6
I try to add service worker to my project after updating to angular 5 and have some problems. I add imports to app.module.ts:
import {ServiceWorkerModule} from '#angular/service-worker';
import {environment} from '../environments/environment';
...
environment.production ? ServiceWorkerModule.register('/ngsw-worker.js') : [],
execute $ ng set apps.0.serviceWorker=true to allow service workers in project
generate config:
{
"index": "/index.html",
"assetGroups": [
{
"name": "app",
"installMode": "prefetch",
"resources": {
"files": [
"/index.html"
],
"versionedFiles": [
"/*.bundle.css",
"/*.bundle.js",
"/*.chunk.js"
]
}
},
{
"name": "assets",
"installMode": "lazy",
"updateMode": "prefetch",
"resources": {
"files": [
"/assets/**"
]
}
}
],
"dataGroups": [
{
"name": "api-performance",
"urls": [
"/",
"/main",
"/login",
"/select-content"
],
"cacheConfig": {
"strategy": "performance",
"maxSize": 100,
"maxAge": "3d"
}
}
]
}
And manifest:
{
"name": "App",
"short_name": "App",
"start_url": "/login",
"theme_color": "#00a2e8",
"background_color": "#00a2e8",
"display": "standalone",
"icons": [
{
"src": "assets\/icons\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
},
{
"src": "assets\/icons\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
},
{
"src": "assets\/icons\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
},
{
"src": "assets\/icons\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "assets\/icons\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "assets\/icons\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
}
]
}
Then build it in production:
ng build --prod --aot=false --build-optimizer=false
Http-server run in SSL mode, but lsit of service workers in chrome dev-tools is clear. What's wrong? May be this flags broke it --aot=false --build-optimizer=false?
Seems to be a problem in registering service worker in module where also importing AngularFire2. I found solution how to register SW in main.ts, that's work:
platformBrowserDynamic().bootstrapModule(AppModule).then(() => {
if ('serviceWorker' in navigator && environment.production) {
navigator.serviceWorker.register('ngsw-worker.js');
}
}).catch(err => console.log(err));