相对路径不起作用

Question

当我在` http:// localhost/overview '时,模块沿着这条路径加载:

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

但是当我转向页面http://localhost/overview/users然后按F5(刷新页面)时,我收到错误:

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

发生错误是因为URL不正确,他应该是这样http://localhost/app/modules/overview/overview.module.

如何让它正常工作？

这是项目结构:

这是systemjs tsconfig:

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

这是systemjs配置:

(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{

}

用户-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 { }

在我使用的组件中module.id,查找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

在您的模块路由中，它不会从您的 AppRouting 延迟加载中获取“概述”。你可能认为应该这样做，但事实并非如此。

将您的路线更改为：

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

和

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

编辑： https://plnkr.co/edit/pxQLNiFqltjxFtynGEgr ?p=preview

做了一些改变。将所有延迟加载放入 AppRoutingModule 中，并添加一个包装类，以便概述部分可以拥有自己的路由器出口。您可以通过“概览”和“概览 2”了解如何在它们之间单击