Question

基本上我试图在我的项目src和dist中创建两个不同的子文件夹。以下是我的应用中的重要部分：

根文件夹：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 ，以便路由器在通过网址请求网页时可以路由到正确的路径。

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

Answer 1

基本标记指定文档中所有相对路径的基本URL。变化：

<base href="/">

进入：

<base href="/src/">

还要确保纠正所有样式表的所有路径。 js文件。

如何配置Angular 2路由器从/ src子文件夹

1 个答案: