CODEWITHSUNDEEP
javascriptangularangular-ui-router
Adrian Moisa
Adrian Moisa

Reputation: 4373

How to configure Angular 2 router to run from /src subfolder

Basically I'm trying to make two distinct subfolders in my project, src and dist. Here are the important bits in my app:

Part of 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)];

If I try to access: http://localhost/src/ the root path for the app, I get the following error:

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

How should I configure router to work under the src/ subfolder?

Edit

If I try <base href="src/"> I get error:

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

If I try <base href="/src/"> , with slashes in front and back, I get error:

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

Edit 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>

Edit 3

I tried this combination:

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

Now I get this error:

GET http://localhost:10080/systemjs.config.js (not found)

Edit 4

Eventually I used:

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

Router error is gone, and routerLink works fine. However, if I access the http://localhost:10080/src/admin/ route directly, I get shown the folder contents, I guess I have to configure an URL rewrite in Xampp.

Edit 5

I used the following .htaccess file in order to redirect to index.html so that the router can route to the proper path when requesting pages via 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

Upvotes: 2

Views: 2445

Answers (1)

Kamil Myśliwiec
Kamil Myśliwiec

Reputation: 9178

Base tag specifies the base URL for all relative paths in a document. Change:

<base href="/">

Into: 

<base href="/src/">

Also make sure to correct every path to all stylesheets & js files.

Upvotes: 5

Related Questions