Относительные пути не работают в angular

Когда я нахожусь на `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);

ОБНОВЛЕНИЕ

приложение-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{

}

обзор.маршрутный.модуль:

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, ищите, например, review.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);
    }

}

person sanu0074    schedule 12.09.2017    source источник
comment
что вы используете для обслуживания статических файлов?   -  person valorkin    schedule 18.09.2017
comment
@valorkin на локальном — сервер nodejs, на prod — nginx   -  person sanu0074    schedule 19.09.2017
comment
@ sanu0074 sanu0074, можете ли вы создать небольшой код Stackblitz или воспроизвести эту проблему. что-то не так с маршрутами   -  person Rahul Singh    schedule 20.09.2017
comment
@RahulSingh К сожалению, такой возможности нет. Проект большой, и данные для страниц поступают из бэкенда. Так что я могу только пробовать варианты решения проблем, которые вы можете мне предложить   -  person sanu0074    schedule 20.09.2017
comment
как вы ориентируетесь на пользователей?? можешь показать нам код   -  person JayDeeEss    schedule 21.09.2017
comment
@JayDeeEss Сначала пользователь попадает на страницу /обзор из AppModule. Затем нажмите на ссылку и перейдите на страницу /overview/users. Затем нажмите F5, и эта проблема будет воспроизведена. Я все описал в вопросе! Что ты хочешь, чтобы я дал тебе? Уточняйте конкретнее! Я же написал, что не могу выложить весь проект, потому что он тесно связан с бэкендом.   -  person sanu0074    schedule 21.09.2017
comment
Я думаю, что F5 перезагружает корневой путь приложения. Вы пытались установить маршрут по умолчанию в своем модуле маршрутизации приложений?   -  person Standaa - Remember Monica    schedule 22.09.2017
comment
@Stanislasdrg Я в вопросе все описал по роутингу, посмотри, может чего не хватает?   -  person sanu0074    schedule 22.09.2017
comment
Вы используете свое приложение в режиме dev или prod? И если в режиме prod вам нужен файл .htaccess, если вы используете apache: прочитайте этот официальный документ: angular.io/guide /развертывание   -  person Salim Ibrogimov    schedule 23.09.2017
comment
Приложение @SalimIbrogimov запускается в режиме разработки, сервер тут ни при чем. В prod я использую nodejs с nginx   -  person sanu0074    schedule 23.09.2017


Ответы (2)


В маршрутизации вашего модуля он не улавливает «обзор» из вашей отложенной загрузки 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.

person bgraham    schedule 23.09.2017
comment
Думаю проблема не в том, что angular не видит маршрут. Проблема в создании неправильного URL-адреса для загрузки - person sanu0074; 24.09.2017
comment
Я удаляю "/: в {path: "overview", loadChildren: "app/modules/overview/overview.module#OverviewModule"} и {path: "users", loadChildren: "app/modules/users/users.module#UsersModule"}. Теперь находясь на http://localhost/overview/users и нажимаем F5 - происходит перенаправление на http://localhost/overwiev, но должен загружаться список пользователей. - person sanu0074; 24.09.2017
comment
виноват. Я пропустил, что в вашем обзорном маршруте есть дочерний элемент. Я удалил это и установил маршруты на равных узлах в своем редактировании. Если у вас есть дочерний элемент, вам нужно добавить ‹router-outlet› к вашему ReviewComponent, где будут вложены дочерние элементы. - person bgraham; 24.09.2017
comment
можешь написать пример? Если вам нужны какие-либо другие части моего кода, я предоставлю их вам - person sanu0074; 24.09.2017
comment
Конечно, я могу это сделать, извините, немного занят вчера. Дайте мне немного времени. - person bgraham; 25.09.2017
comment
извините за очень медленный ответ, был занят. я добавил пример - person bgraham; 29.09.2017

У вас есть ведущий / в пути для пользовательского модуля.

Измените это так:

 {path: "users", loadChildren: "app/modules/users/users.module#UsersModule"}
person Steverob2k    schedule 12.09.2017
comment
Ничего не изменилось. похоже проблема не в этом - person sanu0074; 12.09.2017