Relative paths not work in angular

Question

When I'm on the `http://localhost/overview', the module is loaded along this path:

http://localhost/app/modules/overview/overview.module.js

But when I turn to the page http://localhost/overview/users and then I press F5 (refresh page), I get error:

Error: Unexpected token <
  Evaluating http://localhost/overview/app/modules/overview/overview.module

The error occurred because the URL is not correct, he should be so http://localhost/app/modules/overview/overview.module.

How to make it work properly?

This is project structure:

This is systemjs tsconfig:

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  }
}

This is systemjs config:

(function (global) {
    System.config({
        baseURL: "/",
        paths: {
            'npm:': '/node_modules/'
        },
        map: {
            app: 'app',

            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

            '@angular/material': 'npm:@angular/material/bundles/material.umd.js',

            // CDK individual packages
            '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js',
            '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js',
            '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js',
            '@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js',
            '@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js',
            '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js',
            '@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',
            '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js',
            '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js',
            '@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js',
            '@angular/cdk/rxjs': 'npm:@angular/cdk/bundles/cdk-rxjs.umd.js',
            '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js',
            '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.js',
            '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.js',
            '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.js',

            'rxjs': 'npm:rxjs'
            //Custom
        },
        packages: {
            app: {
                main: './bootstrap.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

UPDATE

app-routing.module:

import {RouterModule, Routes} from "@angular/router";
import {NgModule} from "@angular/core";
import {LoginFormComponent} from "./modules/auth/login-form/login-form.component";

const routes :Routes = [
    {path: "auth", component: LoginFormComponent},
    {path: "overview", loadChildren: "./app/modules/overview/overview.module#OverviewModule"}
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule{

}

overview.routing.module:

import {RouterModule, Routes} from "@angular/router";
import {NgModule} from "@angular/core";
import {OverviewComponent} from "./overview/overview.component";

const routes :Routes = [
    {path: "", component: OverviewComponent, children:[
        {path: "users", loadChildren: "/app/modules/users/users.module#UsersModule"}
    ]}
];

@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class OverviewRoutingModule{

}

users-routing.module:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {UsersListComponent} from "./users-list/users-list.component";
import {UserElementComponent} from "./user-element/user-element.component";

const routes: Routes = [
    {path: "", component: UsersListComponent},
    {path: ":id", component: UserElementComponent},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UsersRoutingModule { }

In components I use module.id, look for exaple overview.component.ts:

@Component({
    selector: "overview",
    moduleId: module.id,
    templateUrl: "./overview.component.html",
    providers:[
        OverviewService
    ]
})
export class OverviewComponent implements OnInit {

    constructor(private overviewService :OverviewService) {}

    public ngOnInit() {
        let data = this.overviewService.getOverview();
        Log.info(data);
    }

}

Answer 1

You have a leading / in the path for the user module.

Change it to be this:

 {path: "users", loadChildren: "app/modules/users/users.module#UsersModule"}

Answer 2

In your Module routing, it doesn't pick up on the "overview" from your AppRouting lazy loading. You'd think it should, but it doesn't.

change your routes to this:

const routes :Routes = [
        {path: "overview", component: OverviewComponent, pathMatch: 'full' }, 
        {path: "overview/users", loadChildren: "app/modules/users/users.module#UsersModule"}
    ]}
];

and

const routes: Routes = [
    {path: "overview/users", component: UsersListComponent},
    {path: "overview/users/:id", component: UserElementComponent},
];

Edit: https://plnkr.co/edit/pxQLNiFqltjxFtynGEgr?p=preview

Made a few changes. Put all the lazy loading into the AppRoutingModule, and added a wrapper class so Overview section can have its own router-outlet. You can see how clicking between them works with Overview and Overview 2