Angular 4 - 圖書標記的頁面無法加載CSS

我是Angular的新手，但設法創建了一個靜態網站，http://beta.catatumbo.io。該網站可通過互聯網訪問。使用提供的導航時，一切都很好。但是，遇到有書籤URL的問題。一級書籤（例如http://beta.catatumbo.io/overview）工作正常。第二級（例如http://beta.catatumbo.io/documentation/quick-start）由於未能加載樣式包而無法正確呈現。控制檯在Chrome會顯示以下錯誤：Angular 4 - 圖書標記的頁面無法加載CSS

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 /應用程序文件夾下定義。

所有書籤（第一個&二級）在開發模式（ng serve）下運行正常，但上述問題發生在產品模式（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>

來源

2017-10-20 Sai Pullabhotla

我解決了這個問題你:)移動meta標籤下面的CSS鏈接這樣的。基礎href應該設置在標題中的所有鏈接之上。 enter image description here

來源

2017-10-21 02:39:51 Vuu

我已更新原始帖子以包含'index.html'的代碼。我不提及任何CSS，除了'angular-cli.json'。我在''元素的頂部有''標籤。包裝機制（webpack？）包含樣式包。所以，我無法控制它。同樣，它在'dev'模式下工作正常，但是在'prod'模式下中斷。 –

在你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時hitted的/documentation。

來源

2017-10-21 14:44:39 Hareesh

問題原來，我的index.html缺少</head>標記。由於這個原因，生成的DOM最後有兩個<head>標籤，一個導入樣式包，但沒有<base>。在我修復了index.html以關閉<head>標籤後，所有內容都正常工作。

來源

2017-10-21 14:50:10

Angular 4 - 圖書標記的頁面無法加載CSS

回答

相關問題