Angular 6 при перенаправлении на дом, страница перенаправляет, но не загружается - PullRequest
Новая
       6

Angular 6 при перенаправлении на дом, страница перенаправляет, но не загружается

0 голосов
/ 05 июля 2018

Я новичок в Angular, у меня очень большой проект, который я только что перевел из html / css / php / js в веточку / тонкий проект использовал 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>

Ответы [ 2 ]

0 голосов
/ 05 июля 2018 
//Put this path at the end in routes
       {
         path: '**',
         redirectTo: '/home'
       }

Создайте свой файл app.routes.ts, как @Lakmipriya, и решите вашу проблему =>

Путь '**' обозначает все недопустимые пути, поэтому, если пользователь перенаправляет на недопустимый путь, этот фрагмент кода будет вызван, и он будет перенаправлен на /home

0 голосов
/ 05 июля 2018 
 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 таким образом, я думаю, он может работать для вас. И тебе будет хорошо идти.

...