1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Build not work, but dev it´s work

allancmello pro asked 4 years ago

Expected behaviorenter image description here

Actual behavior

run: ng build --prod

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.runtime-es2015.edb2fcf2778e7bf1d426.js

enter image description here

ambient dev:

enter image description here

What's wrong?

Arkadiusz Idzikowski staff commented 4 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 4 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 4 years ago

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

allancmello pro answered 4 years ago

the live preview this run http://produfarma.com.br

this rule it was modified for:

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

my directory in provider is:

enter image description here

Arkadiusz Idzikowski staff commented 4 years ago

It looks like your server cannot find the application assets (probably because it uses wrong path). You need to modify outputPath and/or baseHref parameters in your build options. I won't be able to provide the proper configuration parameters because I don't know how is your server configured and how exactly is your production application served.

Please take a look at the official Angular deployment guide: https://angular.io/guide/deployment#the-base-tag
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 8.8.0
  • Device: Desktop
  • Browser: all
  • OS: Windows
  • Provided sample code: No
  • Provided link: No
Tags
build-prod angular
About author
allancmello
Pro User 140Support score
26Questions 9Answers 0Snippets