Susper

As a project grows, it's complexity increases. It suddenly seems to have a higher number of components and linked files. Performing a basic task, such as adding a new page to the website, might take more intricate knowledge. This blog deals with adding a new page to any Angular 2 project, in this case to Susper project. You can also check any of the sample components in the code on the Github Repository for further reference. STEP 1: Use ng g component <component-name> command to generate a new component with your desired name. Make sure the component-name is relevant and describes the page you wish to add. Once the above command is run in the Angular CLI project, it will automatically generate the following files: component-name.html component-name.css component-name.ts component-name.spec.ts file It also adds the new component name to src/app/app.module.ts in the declarations section, after importing it. You can also do all of this manually without the ng g component command too. STEP 2: Write your HTML and CSS files. Ensure that your page looks how you intend it to. Using bootstrap for your CSS classes might help you. Ensure that you link your bootstrap modules in index.html and not in the individual component files. STEP 3: If your page uses any typescript functions, please link your functions to your HTML page, after defining them in typescript. This is how your typescript file might look (This is how it looks in Susper): You may want to import modules you will need first. Notice this snippet of code: export class DemoComponent implements OnInit { constructor() { } ngOnInit() { } } You can define all your variables and functions in the component class. ngOnInit() has already been listed as a demo. Also, note that including anything in the constructor function will run as soon as the page is loaded or initialized. STEP 4: If you have a unit tests in place, then component-name.spec.ts is where they are listed. Make sure to update it. This is the procedure in Susper. Initially, your component-name.spec.ts will look like this: import { async, ComponentFixture, TestBed } from '@angular/core/testing' import { DemoComponent } from './demo.component' describe('DemoComponent', () => { let component: DemoComponent; let fixture: ComponentFixture<DemoComponent>; beforeEach(async(() => {   TestBed.configureTestingModule({     declarations: [ DemoComponent ]   })   .compileComponents(); })); beforeEach(() => {   fixture = TestBed.createComponent(DemoComponent);   component = fixture.componentInstance;   fixture.detectChanges(); }); it('should create', () => {   expect(component).toBeTruthy(); }); });   Here is what you need to add: Add imports under Testbed.configureTestingModule. TIP:  Make sure to import all the modules from their file locations first. imports: [ RouterTestingModule, BrowserModule, CommonModule, FormsModule, HttpModule, JsonpModule, StoreModule.provideStore(reducer), StoreDevtoolsModule.instrumentOnlyWithExtension() ], Add all the other components under the declarations heading.    TIP: Make sure to import all the components first. It should look something like this: declarations: [   AppComponent,   NavbarComponent,   IndexComponent,   ResultsComponent,   NotFoundComponent,   AdvancedsearchComponent,   SearchBarComponent,   FooterNavbarComponent,   AboutComponent,   ContactComponent,   ModalComponent,   InfoboxComponent, DemoComponent, ], })   Now add service providers under the providers heading if any. Finally, add any additional test cases using the standard syntax proved by Jasmine with it…