I have recently created an Angular 5 application and have been debugging it without encountering any compile errors. Everything was working fine initially when I only used one route.ts file and one app.module.ts file for the entire project. However, as the project started to grow, I realized that maintaining this structure would become more complex. This led me to restructure my folders, but now every time I navigate to other URLs, it redirects me back to the home page.
In terms of my new folder structure, I have created separate app modules and route modules for each specific function. The home page and login page are designed with different layouts. For example, the authentication routes are handled by auth-routing.module.ts which is then imported into auth.module.ts. Similarly, I have an app-routing.module.ts to manage the main routes, which in turn is imported into app.module.ts.
Here's a glimpse of my folder structure:
https://i.sstatic.net/YXRVD.png
auth-routing.modules.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { NoAuthGuard } from '../auth/no-auth-guard.service';
import { HomeAuthResolver } from '../layout/home-auth-resolver.service';
import { AuthComponent } from '../auth/components/index';
const routes: Routes = [
{ path: 'login', component: AuthComponent},
{ path: 'register', component: AuthComponent }
];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AuthRoutingModule { }auth.module.ts
import { ModuleWithProviders, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
import { AuthRoutingModule } from './auth-routing.module';
import { AuthComponent} from './components/index';
@NgModule({
declarations: [
AuthComponent
],
imports: [
BrowserModule,
AuthRoutingModule
],
providers: [ ]
})
export class AuthModule { }app-routing.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from '@angular/router';
import { NoAuthGuard } from './auth/no-auth-guard.service';
import { HomeAuthResolver } from './layout/home-auth-resolver.service';
import {LayoutComponent, PUBLIC_ROUTES } from './layout/index';
const routes: Routes = [
{ path: '', component: LayoutComponent, data: { title: 'Secure Views' }, children: PUBLIC_ROUTES },
{ path: '**', component: LayoutComponent, data: { title: 'Secure Views' }, children: PUBLIC_ROUTES }
];
@NgModule({
imports: [
CommonModule,
RouterModule.forRoot(routes)
],
exports: [RouterModule]
})
export class AppRoutingModule { }app.module.ts
import { ModuleWithProviders, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
//modules
import { AppRoutingModule } from './app-routing.module';
import { AuthModule } from './auth/auth.module';
// Layouts
import { AppComponent } from './app.component';
import { LayoutComponent, HomeAuthResolver } from './layout/index';
//child components
import { HomeComponent } from './home/home.component';
//shared components
import { ApiService, AuthGuard, FooterComponent, HeaderComponent } from './shared';
@NgModule({
declarations: [
AppComponent,
FooterComponent,
HeaderComponent,
LayoutComponent,
HomeComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
AuthModule
],
providers: [
ApiService,
AuthGuard,
HomeAuthResolver,
],
bootstrap: [AppComponent]
})
export class AppModule { }