Blank page when building Angular 8 project but works perfectly using "ng serve"

Question

My project is working with "ng serve" command but shows just a blank screen when building. And this message is shown in the console:

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

No route is loaded and there is just an empty tag in the middle of the template.

I tried both AOT and JIT. production and development modes. All blank

I just published the project here: https://razesheydaei.ir

This is my angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ui": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ui",
            "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/assets/bower_components/bootstrap/css/bootstrap.min.css",
              "src/assets/icon/themify-icons/themify-icons.css",
              "src/assets/css/jquery.mCustomScrollbar.css",
              "src/assets/pages/chart/radial/css/radial.css",
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
              "node_modules/ngx-toastr/toastr.css",
              "src/assets/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"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "ui:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "ui:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "ui: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.css"],
            "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": "ui:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "ui:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "ui"
}

And the 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
  }
}

And the routes:

const routes: Routes = [
  {
    path: '',
    component: MainComponent,
    canActivate: [AuthGuard],

    children: [
      {
        path: 'user',
        loadChildren: () => import('./systems/user/user.module').then(mod => mod.UserModule)
      },
      {
        path: 'usergroup',
        loadChildren: () => import('./systems/user-group/user-group.module').then(mod => mod.UserGroupModule)
      },
      {
        path: 'flight',
        loadChildren: () => import('./systems/flight/flight.module').then(mod => mod.FlightModule)
      }
    ]
  },
  {
    path: '',
    component: SimpleComponent,
    children: [
      {
        path: '',
        component: LoginComponent
      },
      {
        path: 'login',
        component: LoginComponent
      }
    ]
  },
  {
    path: '**',
    component: LoginComponent
  }
];

@SmokeyDawson All files are loaded with code 200. init.js, router.js, render.js, handlers.js,... — rostamiani, Aug 22 '19 at 02:58
@SmokeyDawson I published the project here: https://razesheydaei.ir — rostamiani, Aug 22 '19 at 03:15
I tested in Wampserver on my local computer and a shared hosting. — rostamiani, Aug 22 '19 at 03:23
I think the issue is with your Routes. Check those.. I see you have two different Components for the ' ' route MainComponent and SimpleComponent. Cross check your routes configuration.. — Manish, Aug 22 '19 at 03:27
@Manish That's right. It's working with one single route. But how should I write these routes and why it's working with ng serve? — rostamiani, Aug 25 '19 at 05:40
@rostamiani to write these routes you need to have different routes for each Component. Or if you wish to load different components on the same route that should be conditional. Also if would prefer to have different routes and use route guards to check if the route can be activated else redirect. — Manish, Aug 26 '19 at 03:41

score 0 · Answer 1 · answered Aug 22 '19 at 03:26

I think the problem is your app server

if you using nginx try this config

      worker_processes  1;

      events {
          worker_connections  1024;
      }

      http {
          server {
              listen 80;
              server_name  localhost;
              access_log off;

              root   /usr/share/nginx/html;
              index  index.html index.htm;
              include /etc/nginx/mime.types;

              gzip on;
              gzip_min_length 1000;
              gzip_proxied expired no-cache no-store private auth;
              gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;

              location / {
                  try_files $uri $uri/ /index.html;
              }
          }
      }

and try with docker here is dockerfile

FROM nginx:alpine

COPY nginx.conf /etc/nginx/nginx.conf

WORKDIR /usr/share/nginx/html
COPY dist/out-tsc/ .

I'm using Wampserver with Apache web server – rostamiani Aug 22 '19 at 04:07 — rostamiani, Aug 22 '19 at 04:07

Blank page when building Angular 8 project but works perfectly using "ng serve"

1 Answers1