URL not found when refreshing angular page and setting sourceMap to true

I'm runnign a multi-project app with angular When refreshing the page I get an

The requested URL was not found on this server.
​

error. I've tried a lot of .htaccess configurations and none of them worked when setting sourceMap to true in angular.json. The server is apache and my current .htaccess file is

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>


I get a AH00687 error code

here is my angular.json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"synestez.io": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"preserveSymlinks": true,
"outputPath": "dist/synestez.io",
"index": "src/index.html",
"browser": "src/main.ts",
"polyfills": [
"src/polyfills.ts",
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob":"**/*",
"input":"projects/sequencer/src/assets/",
"output":"/assets/"
},{
"glob":"**/*",
"input":"projects/store/src/assets/",
"output":"/assets/"
},{
"glob":"**/*",
"input":"projects/dj-mixer/src/assets/",
"output":"/assets/"
},{
"glob":"**/*",
"input":"projects/worklet-generator/src/assets/",
"output":"/assets/"
}
],
"styles": [
"projects/sequencer/src/styles.scss",
"projects/dj-mixer/src/styles.scss",
"projects/worklet-generator/src/styles.scss",
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"projects/sequencer/src/assets/styles/",
"projects/dj-mixer/src/assets/styles/",
"projects/worklet-generator/src/assets/styles/"
]
},
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all",
"fileReplacements":[ {
"replace":"src/environments/environments.ts",
"with":"src/environments/environment.production.ts"
} ]
},
"staging": {
"optimization": true,
"extractLicenses": false,
"sourceMap": true,
"fileReplacements":[
{
"replace": "src/environments/environments.ts",
"with": "src/environments/environment.staging.ts"
},
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
]
}
},
"defaultConfiguration": "staging"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "synestez.io:buildroduction"
},
"staging": {
"buildTarget": "synestez.io:build:staging"
}
},
"defaultConfiguration": "development",
"styles": [
"projects/sequencer/src/styles.scss",
"src/styles.scss"
],
"stylePreprocessorOptions": {
"includePaths": [
"projects/sequencer/src/assets/styles/",
"projects/dj-mixer/src/assets/styles/",
"projects/worklet-generator/src/assets/styles/"
]
},"assets": [
"src/favicon.ico",
"src/assets",
{
"glob":"**/*",
"input":"projects/sequencer/src/assets/",
"output":"/assets/"
},{
"glob":"**/*",
"input":"projects/store/src/assets/",
"output":"/assets/"
},{
"glob":"**/*",
"input":"projects/dj-mixer/src/assets/",
"output":"/assets/"
},{
"glob":"**/*",
"input":"projects/worklet-generator/src/assets/",
"output":"/assets/"
}
]
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "synestez.io:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:jest",
"options": {
"polyfills": [
"src/polyfills.ts",
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
},
"store": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "projects/store",
"sourceRoot": "projects/store/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"preserveSymlinks": true,
"outputPath": "dist/store",
"index": "projects/store/src/index.html",
"browser": "projects/store/src/main.ts",
"polyfills": [
"src/polyfills.ts",
"zone.js"
],
"tsConfig": "projects/store/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"projects/store/src/favicon.ico",
"projects/store/src/assets"
],
"styles": [
"projects/store/src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": false
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "store:buildroduction"
},
"development": {
"buildTarget": "store:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "store:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"src/polyfills.ts",
"zone.js",
"zone.js/testing"
],
"tsConfig": "projects/store/tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
"projects/store/src/favicon.ico",
"projects/store/src/assets"
],
"styles": [
"projects/store/src/styles.scss"
],
"scripts": []
}
}
}
},
"sequencer": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "projects/sequencer",
"sourceRoot": "projects/sequencer/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"preserveSymlinks": true,
"outputPath": "dist/sequencer",
"index": "projects/sequencer/src/index.html",
"browser": "projects/sequencer/src/main.ts",
"polyfills": [
"src/polyfills.ts",
"zone.js"
],
"tsConfig": "projects/sequencer/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"projects/sequencer/src/favicon.ico",
"projects/sequencer/src/assets"
],
"styles": [
"projects/sequencer/src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": false
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "sequencer:buildroduction"
},
"development": {
"buildTarget": "sequencer:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "sequencer:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:jest",
"options": {
"polyfills": [
"src/polyfills.ts",
"zone.js",
"zone.js/testing"
],
"tsConfig": "projects/sequencer/tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
"projects/sequencer/src/favicon.ico",
"projects/sequencer/src/assets"
],
"styles": [
"projects/sequencer/src/styles.scss"
],
"scripts": []
}
}
}
},
"dj-mixer": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "projects/dj-mixer",
"sourceRoot": "projects/dj-mixer/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"preserveSymlinks": true,
"outputPath": "dist/dj-mixer",
"index": "projects/dj-mixer/src/index.html",
"browser": "projects/dj-mixer/src/main.ts",
"polyfills": [
"src/polyfills.ts",
"zone.js"
],
"tsConfig": "projects/dj-mixer/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"projects/dj-mixer/src/favicon.ico",
"projects/dj-mixer/src/assets"
],
"styles": [
"projects/dj-mixer/src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": false
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",

"configurations": {
"production": {
"buildTarget": "dj-mixer:buildroduction"
},
"development": {
"buildTarget": "dj-mixer:build:development"

}
},
"defaultConfiguration": "development",
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "dj-mixer:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"src/polyfills.ts",
"zone.js",
"zone.js/testing"
],
"tsConfig": "projects/dj-mixer/tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
"projects/dj-mixer/src/favicon.ico",
"projects/dj-mixer/src/assets"
],
"styles": [
"projects/dj-mixer/src/styles.scss"
],
"scripts": []
}
}
}
},
"worklet-generator": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "projects/worklet-generator",
"sourceRoot": "projects/worklet-generator/src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"preserveSymlinks": true,
"outputPath": "dist/worklet-generator",
"index": "projects/worklet-generator/src/index.html",
"browser": "projects/worklet-generator/src/main.ts",
"polyfills": [
"src/polyfills.ts",
"zone.js"
],
"tsConfig": "projects/worklet-generator/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"projects/worklet-generator/src/favicon.ico",
"projects/worklet-generator/src/assets"
],
"styles": [
"projects/worklet-generator/src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": false
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "worklet-generator:buildroduction"
},
"development": {
"buildTarget": "worklet-generator:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "worklet-generator:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"src/polyfills.ts",
"zone.js",
"zone.js/testing"
],
"tsConfig": "projects/worklet-generator/tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
"projects/worklet-generator/src/favicon.ico",
"projects/worklet-generator/src/assets"
],
"styles": [
"projects/worklet-generator/src/styles.scss"
],
"scripts": []
}
}
}
}
}
}

Continue reading...