Question

当我在“http://localhost/overview＆＃39;”时，模块会沿着这条路径加载：

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

发生错误是因为网址不正确，他应该是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 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);

更新

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

您在用户模块的路径中有一个前导/。

将其更改为：

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

Answer 2

在您的模块路由中，它没有了解＆＃34;概述＆＃34;来自你的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，并添加一个包装类，以便Overview部分可以拥有自己的路由器插座。您可以看到它们之间的点击如何与概述和概述2一起使用

相对路径不起作用

2 个答案: