基本上，我试图在我的项目中创建两个不同的子文件夹，src和dist 。以下是我的应用程序中的重要部分:
- 根文件夹:
C:\Server\htdocs\ - 应用程序文件夹:
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
最佳答案
基本标记指定文档中所有相对路径的基本URL。变化:
<base href="/">
进入:
<base href="/src/">
还要确保更正所有样式表和 js 文件的每个路径。
关于javascript - 如何配置 Angular 2 路由器从/src 子文件夹运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38984707/