如何配置Angular 2路由器從/ src子文件夾運行

基本上我試圖在我的項目中創建兩個不同的子文件夾，src和dist。以下是我的應用程序中的重要位：如何配置Angular 2路由器從/ src子文件夾運行

根文件夾：C:\Server\htdocs\
app文件夾：C:\Server\htdocs\src
的index.html有<base href="/">
使用的router 3.0.0-rc.1

部分system.config.js

var map = { 
    'app':      'src/', 
    '@angular':     'node_modules/@angular', 
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
    'rxjs':      'node_modules/rxjs' 
}; 

var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' } 
};

routes.ts

export const routes: RouterConfig = [ 
    { 
     path: '', 
     component: WebComponent 
    }, 
    { 
     path: 'admin', 
     component: AdminComponent 
    }, 
    { 
     path: 'editor', 
     component: EditorComponent 
    } 
]; 

export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];

如果我嘗試訪問：http://localhost/src/爲應用程序的根路徑，我得到以下錯誤：

platform-browser.umd.js:937 EXCEPTION: Error: Uncaught (in promise): Error: Cannot match any routes: 'src'

我應該如何配置路由器在src/子文件夾下工作？

編輯

如果我嘗試<base href="src/">我得到錯誤：

zone.js:101 GET http://localhost:10080/src/src/src/main.js 404 (Not Found) zone.js:478 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:10080/src/src/src/main.js

如果我嘗試<base href="/src/">，與前斜線和後，我得到錯誤：

zone.js:101 GET http://localhost:10080/src/src/main.js 404 (Not Found) zone.js:478 Unhandled Promise rejection: Error: XHR error (404 Not Found) loading http://localhost:10080/src/src/main.js

編輯2 - index.html的

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <base href="src/"> 
    <meta charset="utf-8"> 
    <title>App 0.1.0</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="/src/main.css"> 
    <!-- <link rel="shortcut icon" href="images/template/favicon.ico" type="image/x-icon" /> --> 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'> 

    <!-- Polyfill(s) for older browsers --> 
    <script src="/node_modules/core-js/client/shim.min.js"></script> 
    <script src="/node_modules/zone.js/dist/zone.js"></script> 
    <script src="/node_modules/reflect-metadata/Reflect.js"></script> 
    <script src="/node_modules/systemjs/dist/system.src.js"></script> 

    <!-- Configure SystemJS --> 
    <script src="/src/systemjs.config.js"></script> 
    <script> 
     System.import('app').catch(function (err) { console.error(err); }); 
    </script> 
</head> 
<body id="body"> 
    <app> 
     <div class="intro-logo"></div> 
    </app> 
</body> 
</html>

編輯3

我試過這樣的組合：

<base href="/src/"> 
<script src="/systemjs.config.js"></script>

現在我得到這個錯誤：

GET http://localhost:10080/systemjs.config.js（未找到）

編輯4

最後我用：

<base href="/src/"> 
<script src="systemjs.config.js"></script>

system.config.js

var map = { 
    'app':      '', 
    '@angular':     '../node_modules/@angular', 
    'angular2-in-memory-web-api': '../node_modules/angular2-in-memory-web-api', 
    'rxjs':      '../node_modules/rxjs' 
};

路由器錯誤消失，並且routerLink工作正常。但是，如果我直接訪問http://localhost:10080/src/admin/路由，則會顯示文件夾內容，我想我必須在Xampp中配置URL重寫。

編輯5

我用下面的的.htaccess文件爲了重定向到的index.html使路由器可以請求通過URL頁面時正確的路徑路由。

RewriteEngine On # Turn on the rewriting engine 
RewriteRule ^src/admin$  src/index.html [NC,L] # Admin 
RewriteRule ^src/editor$ src/index.html [NC,L] # Editor

來源

2016-08-16 Adrian Moisa

您試過將base-href url設置爲？ –

在閱讀您的評論之前，我對此進行了編輯。 –

你可以顯示你的index.html文件嗎？ –

基地標籤指定所有相對路徑文檔中的基本URL。變化：

<base href="/">

分爲：

<base href="/src/">

還要確保每一條路徑來糾正所有樣式& js文件。

來源

2016-08-16 22:13:59

如何配置Angular 2路由器從/ src子文件夾運行

回答

相關問題