Question

我是Angular的新手，但设法创建了一个静态网站http://beta.catatumbo.io。该站点可通过Internet访问。使用提供的导航时，一切都很好用。但是，遇到书签URL的问题。第一级书签（例如http://beta.catatumbo.io/overview）工作正常。由于无法加载样式包，第二级（例如http://beta.catatumbo.io/documentation/quick-start）无法正确呈现。 Chrome中的控制台显示以下错误：

quick-start:1 GET http://beta.catatumbo.io/documentation/styles.ccd5e2c92917dc0c0a9c.bundle.css net::ERR_ABORTED

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

以下是相关代码：

角cli.json

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

  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "../node_modules/prismjs/themes/prism.css"
  ],

routes.ts

以下是路线定义：

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

<!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>

Answer 1

我为你解决了问题:)像这样移动元标记下面的css链接。 Base href应设置在标题中的所有链接之上。 enter image description here

Answer 2

在routes.ts添加children这样的路线中尝试

{
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，请删除mapM_ print (IArr.elems arr)。

Answer 3

问题是我的index.html遗失了</head>标记。因此，生成的DOM最终会有两个<head>标记，一个导入样式包，但没有<base>。修复index.html以关闭<head>标记后，一切正常。

Angular 4 - Book书面页面无法加载CSS

3 个答案: