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

Question

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

Adr*_*isa 2 javascript angular-ui-router angular

基本上我正在尝试在我的项目中创建两个不同的子文件夹,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' }
};

Run Code Online (Sandbox Code Playgroud)

routes.ts

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

export const APP_ROUTER_PROVIDERS = [provideRouter(routes)];

Run Code Online (Sandbox Code Playgroud)

如果我尝试访问: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>

Run Code Online (Sandbox Code Playgroud)

编辑3

我试过这个组合:

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

Run Code Online (Sandbox Code Playgroud)

现在我收到这个错误:

GET http://localhost:10080/systemjs.config.js (未找到)

编辑4

最后我用过:

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

Run Code Online (Sandbox Code Playgroud)

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'
};

Run Code Online (Sandbox Code Playgroud)

路由器错误消失了,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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Kam*_*iec 5

基本标记指定文档中所有相对路径的基本URL .更改:

<base href="/">

Run Code Online (Sandbox Code Playgroud)

成:

<base href="/src/">

Run Code Online (Sandbox Code Playgroud)

还要确保纠正所有样式表和js文件的每个路径.

归档时间：	9 年，3 月前
查看次数：	2246 次
最近记录：	9 年，3 月前