Question

我对angular并不陌生，我有一个非常大的项目，我刚刚将其使用的 html / css / php / js 转换为 twig / slim strong> apache2 / sql ，但现在我要在 s3 buckets / lambda apis 上托管该项目。

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

但是对于这个更大的项目，当我从无效的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重定向到主页时，页面重定向但未加载

2 个答案: