Question

我正在使用Angular 4构建一个webapp。我有一个顶级路由模块和一个单独的路由模块，用于每个子模块（例如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)

提前致谢。

Answer 1

我使用的是绝对路径约定：app/home#HomeModule并且不是正在工作。

然后我尝试了相对路径约定：./home#HomeModule并且它有效。

...在CLI中，延迟路由的路径应该与您在
中的文件相对

Source

我遵循了这个Tutorial并且它使用了绝对路径约定并且它起作用了。

很想知道为什么会出现不一致......

<强>更新

作为Friedrich mentioned，要使其使用绝对路径，请更新src/tsconfig.app.json，如下所示：

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

Answer 2

我遇到了同样的问题，上面的答案对我都不起作用，我发现的最终解决方案是使用模块的绝对路径和'＃'之后的模块类名称。

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

我从'src'开始路径，不要忘记从模块路径中删除'.ts'。

Answer 3

您必须从模块文件的引用中删除.ts后缀： {路径：＆＃39;＆＃39;，loadChildren：＆＃39; app / pathToYourModule / home.module＃HomeModule＆＃39;}，

Answer 4

我也遇到了类似的问题，并通过从模块名称中删除扩展名并添加了相对路径来解决。

抛出错误的代码：

body {
  overflow: hidden;
}

.box {
  width: calc(33.3% - 4px);
  display: inline-block;
  border-radius: 5px;
  border: 2px solid #333;
  border: #000 border-color: #e6e600;
  margin: -2px;
  border-radius: 0%;

}

.box {
  height: 15vh;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background-size:contain;
}

.box002 {
  position: absolute;
  top: 27.3vh;
  left: 72.98vw;
  cursor: pointer;
}

.box002 img {
  width: 14.0vw;
  height: 23.0vh;
  border-radius: 50%;
}
p{
font: "Courier New", Courier, monospace;
font-size:30px;

 color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
                 0px -5px 35px rgba(255,255,255,0.3);

color: #005ce6;
text-align: center;
}

工作代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container2">
  <div class="containerr">
    <div class="pic" id="content">
      <div id="container">

        <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="10">
          <p name="values"></p>
        </div>
        <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="11">
          <p name="values"></p>
        </div>
        <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)" id="12">
          <p name="values"></p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="box002" draggable="true" ondragstart="drag(event)" id="2">
  <img src="" draggable="true" id="slide" border="rounded" />
</div>

希望有帮助！

注意：在Angular版本上-7.0.0

Answer 5

尝试使用模块的绝对路径和模块文件名，如下所示：

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

Answer 6

更新

从Angular 8+开始，有一种用于延迟加载模块的新语法，这是我在查看较早的代码示例时遇到的问题。

以前：

 const routes: Routes = [
   { path: 'dashboard', loadChildren: './dashboard/dashboard.module#DashboardModule' }
 ];

从Angular 8+开始：

  const routes: Routes = [
    {
      path: 'dashboard', 
      loadChildren: () =>
        import('./dashboard/dashboard.module').then(m => m.DashboardModule)
    }
  ];

Michael Hoffmann explains here

从Angular 8开始，我们可以使用浏览器的内置动态导入功能来加载Angular中异步的JavaScript模块。可以使用新的import（...）语法为loadChildren在路由配置中定义延迟加载的模块：

Answer 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'
  }
];

Answer 8

对于那些无法找到解决方案的人，只需从loadChildren行中删除“ .ts”扩展名即可。

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

到

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

Answer 9

我有一个类似的问题，需要几天的时间才能解决，但最终我还是重新检查了每个语句/路径的结构。以下是我之前的经历：

      {
    path: 'payments',
    loadChildren: './pages/service-payments/service-payments.module#ServicePaymentsPageModule'
  }

然后我如下更改路径：

      {
    path: 'payments',
    loadChildren: '../service-payments/service-payments.module#ServicePaymentsPageModule'
  }

我希望它对以后的人有所帮助。

Angular 4 - 无法解析路由的子模块

9 个答案: