Arkadiusz Idzikowski staff commented 5 years ago

It's probably a problem with the Angular outputPath. By default your project will be build and stored in dist/project-name and the server doesn't have access to the project assets (you didn't mention how exactly do you run the production app).

Please try to change the outputPath in your angular.json file to dist/

allancmello pro commented 5 years ago

Hi Arkadiusz, I changed the outputPath to dist/ but it doesn't work, the problem persists.

My tsconfig.json:

{ "compileOnSave": false, "compilerOptions": {

        "baseUrl": "./", "outDir": "./dist/out-tsc", 

        "sourceMap": true, 
        "declaration": false, 
        "downlevelIteration": true, 
        "experimentalDecorators": true, 
        "module": "esnext", 
        "moduleResolution": "node", 
        "importHelpers": true, 
        "target": "es2015", 
        "typeRoots": \[ "node\_modules/@types" \], 
        "lib": \[ "es2018", "dom" \] 
}, 
"angularCompilerOptions": { 
        "fullTemplateTypeCheck": true, 
        "strictInjectionParameters": true 
}

}

The outDir is correct?

My original angular.json:

{

"$schema": "./node\_modules/@angular/cli/lib/config/schema.json", 
"version": 1, 
"newProjectRoot": "projects", 
"projects": { 
    "produfarma": { 
            "projectType": "application", 
            "schematics": { 
            "@schematics/angular:component": { "style": "scss" } 
},

  "root": "",
  "sourceRoot": "src",
  "prefix": "app",

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",

      "options": {
        "outputPath": "dist/produfarma/",
        "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": [
          "node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
          "node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
          "node_modules/angular-bootstrap-md/assets/scss/bootstrap/bootstrap.scss",
          "node_modules/angular-bootstrap-md/assets/scss/mdb.scss",
          "node_modules/animate.css/animate.css",
          "src/styles.scss"
        ],
        "scripts": [
          "node_modules/chart.js/dist/Chart.js",
          "node_modules/hammerjs/hammer.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,
          "budgets": [{
              "type": "initial",
              "maximumWarning": "2mb",
              "maximumError": "5mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "6kb",
              "maximumError": "10kb"
            }
          ]
        }
      }
    },
    "serve": {
      "builder": "@angular-devkit/build-angular:dev-server",
      "options": {
        "browserTarget": "produfarma:build"
      },
      "configurations": {
        "production": {
          "browserTarget": "produfarma:build:production"
        }
      }
    },
    "extract-i18n": {
      "builder": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "produfarma: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": [
          "src/styles.scss"
        ],
        "scripts": []
      }
    },
    "lint": {
      "builder": "@angular-devkit/build-angular:tslint",
      "options": {
        "tsConfig": [
          "tsconfig.app.json",
          "tsconfig.spec.json",
          "e2e/tsconfig.json"
        ],
        "exclude": [
          "**/node_modules/**"
        ]
      }
    },
    "e2e": {
      "builder": "@angular-devkit/build-angular:protractor",
      "options": {
        "protractorConfig": "e2e/protractor.conf.js",
        "devServerTarget": "produfarma:serve"
      },
      "configurations": {
        "production": {
          "devServerTarget": "produfarma:serve:production"
        }
      }
    }
  }
}

}, "defaultProject": "produfarma"}

In the provider the index.html path is dist/produfarma

My .htaccess redirection path is:

RewriteEngine onRewriteCond %{HTTPS} off
RewriteCond %{HTTP\_HOST} ^produfarma.com.br$
RewriteRule (.\*) [https://%](https://%){HTTP\_HOST}%{REQUEST\_URI}

RewriteRule ^(.\*) /dist/produfarma/index.html \[NC,L\]

Arkadiusz Idzikowski staff commented 5 years ago

How exactly you do run the live preview of the production build of the application?