Angular - Child component issue

Question

I am trying to create a common component that only contains a primeng dropdown that will be used inside many other components.

The dropdown is the trackingsystem.component.

I am trying to nest trackingsystem.component in my projectheader.component

It works fine when i physically have both components in the same folder, but I want to move all of these common components to a common subfolder.

When the child component is in a different folder I get the error, "If 'trackingsystem' is an Angular component, then verify that it is part of this module."

I have read the solutions in many other Stack overflow links. This question is not a duplicate of the below even though the error is similar.

If '<selector>' is an Angular component, then verify that it is part of this module

Angular2 RC6: '<component> is not a known element'

trackingsystem.component.ts

import { Component, OnInit } from '@angular/core';
import { TrackingSystem } from '../../_models/index';
import { TrackingSystemService } from '../../_services/index';
import { ToastrService } from 'toastr-ng2';
import { InputTextModule, DataTableModule, ButtonModule, DialogModule, DropdownModule } from 'primeng/primeng';
import { SelectItem } from 'primeng/api';
import { NgModule } from '@angular/core';


@Component({
    templateUrl: './trackingsystem.component.html'
})


@NgModule({
    declarations: [
        TrackingSystemComponent
    ],
exports: [
    TrackingSystemComponent
]})

projectheader.component projecttest works correctly it is in the same folder as projectheader

<div class="header ui-g-12">
    <h2>
        Create new Project
    </h2>
</div>
<table>
    <tr>Customer:<td></td>some customer name<td></tr>
    <tr>etc:<td></td>rest of fields that should be captured<td></tr>
    <tr><strong>save</strong><td></td><strong>cancel</strong><td></tr>
</table>   
</div>
<trackingsystem></trackingsystem>
<projecttest></projecttest>

projectheader.component parsed to relevant fields

import { Component, OnInit, ViewChild, NgModule } from '@angular/core';
import { MenuItem, DataTable, LazyLoadEvent, DropdownModule, ContextMenuModule } from "primeng/primeng";
import { Observable } from 'rxjs/Observable';
import { ProjectHeader } from '../../_models/index';
import { ExcelService } from '../../_services/excel.service'
import { ProjectHeaderService } from '../../_services/index';
import { TrackingSystemComponent } from '../_common/trackingsystem/trackingsystem.component';

class ProjectHeaderinfo implements ProjectHeader {
constructor( list of parameters)}

@Component({
selector: 'projectheader',
templateUrl: './projectheader.component.html',
styleUrls: ['./projectheader.component.css']
})

@NgModule({
imports: [TrackingSystemComponent]})
export class ProjectHeaderComponent implements OnInit { }

app.module.shared.ts Parsed to relevant fields

import { ProjectHeaderComponent } from './components/dsfluidtest/projectheader.component';
import { ProjectHeaderService } from './_services/index';
import { TrackingSystemComponent } from './components/_common/trackingsystem/trackingsystem.component';
import { TrackingSystemService } from './_services/index';

@NgModule({
declarations: [
    AppComponent,
    ProjectHeaderComponent,
    ProjectTestComponent,
    TrackingSystemComponent              
],
providers: [ProjectHeaderService,  AuthService, TrackingSystemService,
    { provide: LocationStrategy, useClass: HashLocationStrategy },
    { provide: RequestOptions, useClass: AppBaseRequestOptions }],
imports: [
  //TrackingSystemComponent, //Also tried leaving this uncommented
DropdownModule, // and other such modules 
    RouterModule.forRoot([
        { path: 'projectheader', component: ProjectHeaderComponent },
        { path: 'projecttest', component: ProjectTestComponent },
         { path: 'trackingsystem', component: TrackingSystemComponent }
    ])
]
})
export class AppModuleShared {}//This is blank in my app

You don’t define a `selector` in your `@Component` annotation for the tracking system component. — Pace, Apr 06 '18 at 19:43

Mirko Acimovic · Answer 1 · 2018-04-06T19:56:07.260

1

Your main App module should import primeng dropdown, your track system component and header to be sure that they are available in whole application scope. Then your header should import only your track system component and finally your track system component should only import primeng dropdown. Of course all paths are RELATIVE TO FILE THAT IMPORTS THEM be sure to check that first. Hope that might help you. Tracking system should not be a module rather a component.

@Component({
  selector:'tracksystem',
  templateUrl: '<path>'
})
export class TrackSystemComponent {}

edited Apr 06 '18 at 19:56

answered Apr 06 '18 at 19:48

Mirko Acimovic

508
2
9

Thanks for the help. The selector was the issue. I did not include all of the imports in the app.module for readability purposes. I am importing the primeng dropdown there, but it is not pictured. – Jay F Apr 06 '18 at 19:58

Angular - Child component issue

1 Answers1