Relative paths do not work in angular

Question

When I am on http: // localhost / overview , the module loads in this way:

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

But when I go to the page http://localhost/overview/users , and then press F5 (update page), I get an error message:

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

The error occurred due to an invalid URL, it should be like this http://localhost/app/modules/overview/overview.module .

How to make it work correctly?

This is the 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

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

In your routing module, it does not select the “browse” from your lazy AppRouting download. You would think that this is necessary, but it is not.

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

A few changes have been made. Put all the lazy loading into the AppRoutingModule module and add a wrapper class so that the browse section can have its own exit router. You can see how clicking between them works with Overview and Overview 2

Answer 2

You have a master / path for the user module.

Change it like this:

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