Angular 5:在ng build --prod之后没有CSS出现并且无法转到其他页面 [英] Angular 5 : no css appearing and can't go to other pages after ng build --prod
问题描述
在终端中运行ng build -- prod命令后，没有CSS出现，并且无法浏览除索引之外的其他页面. dist下的index.html如下所示:
No css are being appeared and unable to browse other pages except the index, after I run the ng build -- prod command in terminal. The index.html under dist is looks below:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ShoptoMyDoor</title>
<base href="/">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition skin-black-light sidebar-mini">
我的.angular-cli.json文件看起来像(部分粘贴在这里，如果需要的话，将发布完整的文件内容):
My .angular-cli.json file is look like (partially pasted here, will post the full file content if requested):
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "angular"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.scss",
"assets/css/bootstrap.min.css",
"assets/css/font-awesome.min.css",
"assets/css/ionicons.min.css",
"assets/css/theme.min.css",
"assets/css/all-skins.min.css",
"assets/css/morris.css",
"assets/css/jquery-jvectormap.css",
"assets/css/bootstrap-datepicker.min.css",
"assets/css/daterangepicker.css",
"assets/css/bootstrap3-wysihtml5.min.css",
"assets/css/style.css"],
当我尝试通过键入" http://localhost/ngAngular/dist/进行浏览时"，那里没有CSS和JS.另外，当我尝试访问" http://localhost/ngAngular/dist/admin/book "或" http://localhost/ngAngular/dist/admin/product "，则显示404找不到错误.
When I try to browse the same by typing "http://localhost/ngAngular/dist/", no css and js there. Also, when I tried to access the path like "http://localhost/ngAngular/dist/admin/book" or "http://localhost/ngAngular/dist/admin/product", it shows 404 Not Found error.
更新版本1:
我的src/app/下的 app-routing.ts 如下:
My app-routing.ts under src/app/ is below:
const appRoutes: Routes = [
{path: 'login', component: LoginComponent},
{path: 'admin/login', component: AdminLoginComponent},
{path: '', redirectTo: '/login', pathMatch: 'full'},
{path: 'register', component: RegisterComponent},
{path: '**', component: PageNotFoundComponent}
];
在/admin/文件夹下，我的admin-routing.module.ts如下:
Under /admin/ folder, my admin-routing.module.ts is below:
const adminRoutes: Routes = [
{
path: 'admin',
component: AdminComponent,
canActivate: [AuthGuardService],
children: [
{
path: '',
canActivateChild: [AuthGuardService],
children: [
{path: 'book', component: BookComponent},
{path: 'product', component: ProductComponent},
{path: 'addbook', component: AddbookComponent},
{path: '', component: AdminDashboardComponent},
{path: 'update-product/:id', component: UpdateProductComponent}
],
}
]
}
];
推荐答案
尝试使用相对路径作为基础
try using relative path for base
<base href="./">
这篇关于Angular 5:在ng build --prod之后没有CSS出现并且无法转到其他页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
