构建 Angular 8 项目时出现空白页面，但使用“ng serve”可以完美运行
Posted
技术标签:
【中文标题】构建 Angular 8 项目时出现空白页面，但使用“ng serve”可以完美运行【英文标题】：Blank page when building Angular 8 project but works perfectly using "ng serve" 【发布时间】：2019-12-27 07:16:32 【问题描述】：我的项目正在使用“ng serve”命令，但在构建时只显示一个空白屏幕。此消息显示在控制台中：
Angular 正在开发模式下运行。调用 enableProdMode() 启用生产模式。
没有加载路由，模板中间只有一个空标签。
我尝试了 AOT 和 JIT。生产和发展模式。全部空白
我刚刚在这里发布了这个项目：https://razesheydaei.ir
这是我的 angular.json 文件：
"$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"
还有 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
还有路线：
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 所有文件都使用代码 200 加载。init.js、router.js、render.js、handlers.js、... @SmokeyDawson 我在这里发布了这个项目：razesheydaei.ir 你在哪里托管它？ 我认为问题出在您的路线上。检查那些.. 我看到你有两个不同的组件用于“”路由 MainComponent 和 SimpleComponent。交叉检查您的路线配置.. 【参考方案1】：我认为问题在于您的应用服务器
如果你使用 nginx 试试这个配置
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;
在这里尝试使用 docker 是 dockerfile
FROM nginx:alpine
COPY nginx.conf /etc/nginx/nginx.conf
WORKDIR /usr/share/nginx/html
COPY dist/out-tsc/ .
【讨论】：
我将 Wampserver 与 Apache Web 服务器一起使用以上是关于构建 Angular 8 项目时出现空白页面，但使用“ng serve”可以完美运行的主要内容，如果未能解决你的问题，请参考以下文章