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

}

Chloral

what are you using to serve static files? – Caliber

@Caliber on local - nodejs server, on prod - nginx – Chloral

@sanu0074 can you create a small Stackblitz code or replicate this issue . something is wrong with routes – Brahmani

@RahulSingh Unfortunately there is no such possibility. The project is big, and the data for pages come from the backend. So I can only try the options for solving the problems that you can offer me – Chloral

how are you navigating to users ?? can you show us the code – Mangosteen

@Mangosteen First, the user gets to the page /overview from the AppModule. Then click on the link and go to the page /overview /users. Then press F5 and this problem is reproduced. I have described everything in the question! What do you want me to give you? Specify more specifically! I wrote that I can not lay out the whole project, because it is closely related to the backend. – Chloral

I think F5 reloads the app root path. Did you try setting a default route in your app-routing module ? – Lim

@Stanislasdrg I described everything with regard to routing in the question, look, maybe there is not enough of it? – Chloral

Are You running Your app in dev or prod mode? And if in prod mode You need .htaccess file, if You using apache : read this official doc please: angular.io/guide/deployment – Underhand

@SalimIbrogimov app run in dev mode, the server has nothing to do with it. On prod i use nodejs with nginx – Chloral

Answer 1

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

Limerick

I think the problem is not what angular not can see route. Problem in building the wrong URL for downloading – Chloral

I remove "/: in {path: "overview", loadChildren: "app/modules/overview/overview.module#OverviewModule"} and {path: "users", loadChildren: "app/modules/users/users.module#UsersModule"}. Now being on http://localhost/overview/users and press F5 - occurs redirection to http://localhost/overwiev, but should loaded user list. – Chloral

my mistake. I missed that your overview route had a children element in it. I stripped that out and set the routes on equal nodes in my edit. If you have a children element, you will need to create add a <router-outlet> to your OverviewComponent where the children elements will be nested. – Limerick

can you write example? If you need any other parts of my code, I will provide them to you – Chloral

Sure I can do that, sorry a bit busy yesterday. Give me a bit of time. – Limerick

sorry about the super slow reply, been busy. I added an example – Limerick

Answer 2

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"}

Dialogue

Nothing changed. It seems that the problem is not this – Chloral