camilogiraldo

/** This assumes you have @angular/cli installed **/

/** creating our Angular application **/

ng new fancy-app --routing

camilogiraldo

/** Creating our HomeComponent **/

ng generate component HomeComponent --spec=false

/** Creating our BigFeatureComponent **//

ng generate component BigFeatureComponent --spec=false

camilogiraldo

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponentComponent } from './home-component/home-component.component';
import { BigFeatureComponentComponent } from './big-feature-component/big-feature-component.component';

// New code 
const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'home'},
  { path: 'home', component: HomeComponentComponent},
  { path: 'bigComponent', component: BigFeatureComponentComponent}

camilogiraldo

<a routerLink='/home'>Home</a>
<a routerLink='/bigComponent'>Feature</a>
<h1>
  Home Component
</h1>
<p>
  Home component will be the first screen when the user visits our page.
</p>

camilogiraldo

<a routerLink='/home'>Home</a>
<a routerLink='/bigComponent'>Feature</a>
<h1>
  Big Feature here.
</h1>
<p>
  Here is where the big feature of our fancy app will reside. 
</p>

camilogiraldo

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponentComponent } from './home-component/home-component.component';
import { BigFeatureComponentComponent } from './big-feature-component/big-feature-component.component';

@NgModule({
  declarations: [

camilogiraldo

//Generate a new module, the one that will be lazy loaded

ng generate module big-module --routing

camilogiraldo

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponentComponent } from './home-component/home-component.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'home'},
  { path: 'home', component: HomeComponentComponent},
  { path: 'bigComponent', loadChildren: './big-module/big-module.module#BigModuleModule'}   // Code modified
];

camilogiraldo

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { BigFeatureComponentComponent } from './big-feature-component/big-feature-component.component';

const routes: Routes = [
  { path: '', component: BigFeatureComponentComponent}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],

camilogiraldo

// create form-data.ts under app/shared/interface/form-data.ts

export interface FormData {
  controlName: string;
  controlType: string;
  valueType?: string;
  currentValue?: string;
  placeholder?: string;
  options?: Array<{
    optionName: string;