文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >角4-图书标记页无法加载CSS

问角4-图书标记页无法加载CSS
EN

Stack Overflow用户
提问于 2017-10-20 22:11:40
回答 3查看 194关注 0票数 0

我刚接触到“角”，但成功地创建了一个静态网站，http://beta.catatumbo.io。本网站可通过互联网访问。当使用所提供的导航时，一切都工作得很好。但是，遇到一个带有书签URL的问题。一级书签(例如http://beta.catatumbo.io/overview)工作良好。第二级(例如http://beta.catatumbo.io/documentation/quick-start)由于未能加载样式包而无法正确呈现。Chrome中的控制台显示了以下错误：

代码语言：javascript
复制
quick-start:1 GET http://beta.catatumbo.io/documentation/styles.ccd5e2c92917dc0c0a9c.bundle.css net::ERR_ABORTED

不确定为什么请求要在documentation文件夹中而不是root (/)中寻找样式包。

以下是相关守则：

angular-cli.json

设置样式数组以加载以下CSS文件。

代码语言：javascript
复制
  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/prismjs/themes/prism.css"
  ],

routes.ts

以下是路线的定义：

代码语言：javascript
复制
export const APP_ROUTES: Routes = [
  {path: '', component: HomeComponent, data: {title: 'Catatumbo - JPA like Persistence Framework for Google Cloud Datastore'}},
  {path: 'home', component: HomeComponent, data: {title: 'Catatumbo - JPA like Persistence Framework for Google Cloud Datastore'}},
  {path: 'overview', component: OverviewComponent, data: {title: 'Overview & Features | Catatumbo'}},
  {path: 'documentation', component: DocumentationComponent, data: {title: 'Documentation | Catatumbo'}},
  {path: 'documentation/quick-start', component: QuickStartComponent, data: {title: 'Quick Start | Catatumbo'}},
  {path: 'documentation/video-tutorials', component: VideoTutorialsComponent, data: {title: 'Video Tutorials | Catatumbo'}},
  {path: 'documentation/api-documentation', component: ApiDocumentaionComponent, data: {title: 'API Documentation | Catatumbo'}},
  {path: 'documentation/release-notes', component: ReleaseNotesComponent, data: {title: 'Release Notes | Catatumbo'}},
  {path: 'source-code', component: SourceCodeComponent, data: {title: 'Source Code | Catatumbo'}},
  {path: 'support', component: SupportComponent, data: {title: 'Support | Catatumbo'}},
  {path: 'about', component: AboutComponent, data: {title: 'About the Author | Catatumbo'}},
  {path: '**', redirectTo: ''}
];

上述所有组件都直接在src/app文件夹下定义。

在开发模式(ng serve)中运行时，所有书签(第一级和第二级)都可以正常工作，但上述问题发生在prod模式(ng serve --prod)中。所以看来包装出了问题，否则我肯定做错了。任何帮助都是非常感谢的。

index.html

代码语言：javascript
复制
<!doctype html>
<html lang="en">
<head>
  <base href="/">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Catatumbo.Io</title>
  <link rel="shortcut icon" href="/assets/favicon.ico">
  <link rel="icon" sizes="16x16 32x32 64x64" href="/favicon.ico">
  <link rel="icon" type="image/png" sizes="196x196" href="./assets/favicon-192.png">
  <link rel="icon" type="image/png" sizes="160x160" href="./assets/favicon-160.png">
  <link rel="icon" type="image/png" sizes="96x96" href="./assets/favicon-96.png">
  <link rel="icon" type="image/png" sizes="64x64" href="./assets/favicon-64.png">
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16.png">
  <link rel="apple-touch-icon" href="./assets/favicon-57.png">
  <link rel="apple-touch-icon" sizes="114x114" href="./assets/favicon-114.png">
  <link rel="apple-touch-icon" sizes="72x72" href="./assets/favicon-72.png">
  <link rel="apple-touch-icon" sizes="144x144" href="./assets/favicon-144.png">
  <link rel="apple-touch-icon" sizes="60x60" href="./assets/favicon-60.png">
  <link rel="apple-touch-icon" sizes="120x120" href="./assets/favicon-120.png">
  <link rel="apple-touch-icon" sizes="76x76" href="./assets/favicon-76.png">
  <link rel="apple-touch-icon" sizes="152x152" href="./assets/favicon-152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon-180.png">
<body>
<!-- Begin Google Analytics -->
<script>
  (function (i, s, o, g, r, a, m) {
    i['GoogleAnalyticsObject'] = r;
    i[r] = i[r] || function () {
      (i[r].q = i[r].q || []).push(arguments)
    }, i[r].l = 1 * new Date();
    a = s.createElement(o),
      m = s.getElementsByTagName(o)[0];
    a.async = 1;
    a.src = g;
    m.parentNode.insertBefore(a, m)
  })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
  ga('create', 'UA-21739301-2', 'auto');
</script>
<!-- End Google Analytics -->

<app-root></app-root>
</body>
</html>
angular
bootstrap-4
angular-router
EN

回答 3

Stack Overflow用户

发布于 2017-10-21 02:39:51

我为您解决了这个问题:)将css链接移到元标记下面，如下所示。基本的href应该首先设置在标题中的所有链接。在这里输入图像描述

票数 0
EN

Stack Overflow用户

发布于 2017-10-21 14:44:39

在您的routes.ts中添加这样的children路由并尝试

代码语言：javascript
复制
{
path: 'documentation', 
component: DocumentationComponent, 
data: {title: 'Documentation | Catatumbo'},
children:[
    {
      path: '',
      redirectTo: 'quick-start',
      pathMatch:'full'
    },
    {
        path: 'quick-start', 
        component: QuickStartComponent, 
        data: {title: 'Quick Start | Catatumbo'}
    },
    {
        path: 'video-tutorials', 
        component: VideoTutorialsComponent, 
        data: {title: 'Video Tutorials | Catatumbo'}
    },
    {
        path: 'api-documentation', 
        component: ApiDocumentaionComponent, 
        data: {title: 'API Documentation | Catatumbo'}
    }
]
},

如果不想在redirectTo: 'quick-start'插入时将/documentation重定向到documentation/quick-start，则删除/documentation。

票数 0
EN

Stack Overflow用户

发布于 2017-10-21 14:50:10

问题是我的index.html缺少了</head>标记。因此，生成的DOM最终有两个<head>标记，一个导入样式包，但它没有<base>。在修复了index.html以关闭<head>标记之后，一切都很好。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/46858022

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档