Angular 4 - не удалось разрешить субмодуль для маршрутизации

Я создаю webapp с Angular 4. У меня есть модуль маршрутизации верхнего уровня и отдельный модуль маршрутизации для каждого подмодуля (например, HomeModule).

Это моя конфигурация маршрутизации верхнего уровня:

export const ROUTES: Routes = [
  {path: '', loadChildren: './home#HomeModule'},
  {path: '**', component: NotFoundComponent},
];

Когда я запускаю ng server, я получаю странную ошибку, что модуль home не найден. Приложение не работает в браузере.

Странная часть заключается в следующем: когда файл изменяется, а webpack перекомпилирует проект, все работает отлично, а работа маршрутизации -. Ошибка появляется только при запуске ng serve.

Это ошибка, которую я получаю, когда я запускаю ng serve, а не когда проект перекомпилируется из-за изменения файла:

ERROR in Error: Could not resolve module ./home relative to /path/to/my/project/src/app/app.module.ts
    at StaticSymbolResolver.getSymbolByModule (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:31884:30)
    at StaticReflector.resolveExternalReference (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:30350:62)
    at parseLazyRoute (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:28616:55)
    at listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:28578:36)
    at visitLazyRoute (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:29995:47)
    at AotCompiler.listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler/bundles/compiler.umd.js:29963:20)
    at AngularCompilerProgram.listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler-cli/src/transformers/program.js:157:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/path/to/my/project/node_modules/@angular/compiler-cli/src/ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (/path/to/my/project/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:247:66)
    at Promise.resolve.then.then (/path/to/my/project/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:538:50)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)

Спасибо заранее.

Ответы

Ответ 1

Я использовал соглашение об абсолютном пути: app/home#HomeModule и оно не работало.

Затем я попробовал относительный путь конвенции: ./home#HomeModule, и она работала.

... в CLI пути к отложенным маршрутам должны быть относительными из файла, в котором вы находитесь

Источник

Я следовал этому уроку, и он использовал соглашение об абсолютном пути, и он работал.

Хотелось бы знать, почему несоответствие...

ОБНОВИТЬ:

Как упоминал Фридрих, чтобы заставить его работать с использованием абсолютного пути, обновите src/tsconfig.app.json следующим образом:

{
  ...,
  "compilerOptions": {
    ...,
    baseUrl: "./"
  }
}

Ответ 2

Я действительно не нашел решение этой ошибки, но нашел обходное решение, которое не влияет на качество моего кода:

Я изменил

    {path: '', loadChildren: './home#HomeModule'},

к

import { HomeModule } from './home/home.module.ts';

// ...

    {path: '', loadChildren: () => HomeModule},

Ответ 3

У меня возникла та же проблема, и ни один из приведенных выше ответов не сработал для меня. Окончательное решение, которое я нашел, заключалось в использовании абсолютного пути к модулю и имени класса модуля после "#".

    export const ROUTES: Routes = [
       {path: '', loadChildren: 'src/app/pathToYourModule/home.module#HomeModule'},
       {path: '**', component: NotFoundComponent}
     ];

Я начал путь с 'src' и не забудьте удалить '.ts' из пути модуля.

Ответ 4

Вам нужно удалить суффикс .ts из ссылки в файл модуля:  {path: '', loadChildren: 'app/pathToYourModule/home.module # HomeModule'},

Ответ 5

Я столкнулся с подобной проблемой и решил ее, удалив расширение из имени модуля и добавив относительный путь.

Код, выдавший ошибку:

const routes: Routes = [
    {
        path: 'settings',
        loadChildren: 'app/setting/setting.module.ts#SettingsModule'
    }
];

Рабочий код:

const routes: Routes = [
    {
        path: 'settings',
        loadChildren: './setting/setting.module#SettingsModule'
    }
];

Надеюсь, поможет!

Примечание: на угловой версии - 7.0.0

Ответ 6

Попробуйте использовать абсолютный путь вашего модуля с именем файла модуля следующим образом:

export const ROUTES: Routes = [
  {path: '', loadChildren: 'app/pathToYourModule/home.module.ts#HomeModule'},
  {path: '**', component: NotFoundComponent},
];

Ответ 7

Я сталкивался с этой проблемой, для меня я просто забыл добавить .module к имени файла.

У меня было это:

const routes: Routes = [
  /* ... */
  {
    path: 'page-not-found',
    loadChildren: './modules/page-not-found/page-not-found#PageNotFoundModule' // <- page-not-found missing .module
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'page-not-found'
  }
];

Должно быть:

const routes: Routes = [
  /* ... */
  {
    path: 'page-not-found',
    loadChildren: './modules/page-not-found/page-not-found.module#PageNotFoundModule'
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: '**',
    redirectTo: 'page-not-found'
  }
];