Angular 6 重定向到主页时，页面重定向但不加载

Question

我是 angular 的新手，我有一个非常大的项目，我刚刚从 html/css/php/js 转换为 twig/slim 该项目使用 apache2/sql 但现在我将在 s3 buckets/lambda api.

我已经创建了几个基本项目并将其转换为 angular 没有问题，但现在我正在转换这些较大的项目，因此我需要使用模块将项目拆分很多。因此路由很奇怪（我不确定这是否是最好的方法，但我一直在更新它）。

但是对于这个更大的项目，当我从一个无效的 url 被重定向时，我被重定向到 localhost:4200 的索引重定向，但是页面没有加载并且我得到一个错误：

错误开始-->

core.js:1624 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function TypeError: undefined is not a function at Array.map (<anonymous>) at webpackAsyncContext ($_lazy_route_resource lazy namespace object:32) at

错误结束-->

defaultErrorLogger @ core.js:1624

该错误似乎与代码有所不同，但与 TypeError: undefined is not a function

类似

现在我的问题是：

1.为什么会出现此错误，我该如何解决？

2。如果我无法修复它，有没有办法让页面在重定向的初始加载后重新加载

非常感谢任何帮助，干杯！

（这也是我的代码！）

app.module.ts

import { NgModule }     from '@angular/core'; // <-- Import module object
import { AppComponent } from './app.component'; // <-- Main entry point/view
import { RouterModule } from '@angular/router'; // <-- Routing for root
import { routes }       from './app.routes'; // <-- Main router
// | External modules |
import { BrowserModule } from '@angular/platform-browser'; // <-- TODO: Look into what this is for
// | Internal modules |
import { AdminModule }  from './modules/admin/admin.module';
import { HeroesModule } from './modules/heros/heroes.module';
import { HomeModule }   from './modules/home/home.module';
import { TodoModule }   from './modules/todo/todo.module';

// | Provider services |
import { UserService } from './user.service';
import { Logger }      from './logger.service';

@NgModule({
  declarations: [ AppComponent ], // <-- Main entry point
  imports: [
    RouterModule.forRoot(routes), // <-- Main router
    BrowserModule, // <-- TODO: Look into what this is for
    AdminModule, HeroesModule, HomeModule, TodoModule // <-- Internal modules
  ],
  providers: [ Logger, UserService ],
  bootstrap: [ AppComponent ],
})
export class AppModule { } // <-- Export module class

app.routes.ts

import { Routes } from '@angular/router'; // <-- Import routing
// This redirects all routing to module routers.
export const routes: Routes = [
  { path: '', loadChildren: './modules/admin/admin.module#AdminModule' },
  { path: '', loadChildren: './modules/heros/heroes.module#HeroesModule' },
  { path: '', loadChildren: './modules/home/home.module#HomeModule' },
  { path: '', loadChildren: './modules/todo/todo.module#TodoModule' },
]
// This redirects all routing to module routers.

home.module.ts

import { NgModule }     from '@angular/core'; // <-- Import module object
import { CommonModule } from '@angular/common'; // <-- Declaring this module will be used often
import { RouterModule, Routes } from '@angular/router';

// | Internal components |
import { HomeComponent } from './home.component'; // <-- Main entry point

const childRoutes: Routes = [
    { path: '', component: HomeComponent } // <-- Main entry point
];

@NgModule({
  declarations: [
    HomeComponent, // <-- Main entry point
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(childRoutes),
  ],
  providers: []
})
export class HomeModule { } // <-- Export module class

组件是<h1>It works</h1>

生成的基本组件

Answer 1

 const routes: Routes = [

  {
   path: '',
   redirectTo: '/home',
   pathMatch: 'full'

   },


   {
   path: '',
   component: HomeModule,
   children: [
     {
        path: 'admin',
        loadChildren: './admin/admin.module#AdminModule'
     },
      {
        path: 'hero',
        loadChildren: './heros.module#HeroesModule'
       },
     ]      
   }
 ];

按照这种方式设计您的 app.routes.ts 文件，我认为它可能适合您。你会很高兴的。

Answer 2

//Put this path at the end in routes
       {
         path: '**',
         redirectTo: '/home'
       }

按照@Lakmipriya 的要求设计您的app.routes.ts 文件，并解决您的问题=>

路径'**'代表所有无效路径，所以如果用户重新路由到无效路径，这段代码将被命中，他将被重新路由到/home

Angular 6 重定向到主页时，页面重定向但不加载

Angular 6 when redirected to home, page redirects but doesn't load

angular-module

angular

angular-router

angular6