Importing a component from another component

angular angular2-components
Yozki picture Yozki · Feb 15, 2017 · Viewed 10.9k times · Source

I'm trying to call a child component's function from a parent component.

As I understand, the best way to go about this is to use ViewChild.

I understand the logic of it all, but for some reason I can't import the child component into the parent component, it gives me the error:

Cannot find module '../claim-header/claim-header.component'.

This is the import section in my parent component: (Claim)

import { ClaimHeaderComponent } from '../claim-header/claim-header.component';

I've tried them all:

import { ClaimHeaderComponent } from './claim-header';
import { ClaimHeaderComponent } from './claim-header/claim-header';
import { ClaimHeaderComponent } from '../claim-header';
import { ClaimHeaderComponent } from '../../components/claim-header-component';

etc.

For reference, the rest of the imports work fine as long as they're not components:

import { ClaimDetail } from '../../modules/models/claim';
import { ClaimsService } from '../../modules/services/claims.service';

This is the declaration of my child component:

@Component({
    moduleId: module.id,
    selector: 'fhp-claim-header',
    templateUrl: 'claim-header.component.html'
})

export class ClaimHeaderComponent implements OnInit {
   ...
}

And my folder layout:

Folder layout

Answer

Aravind picture Aravind · Feb 15, 2017

You should be using 

../claim-header/claim-header.component

Explanation.

./ refers to the root folder of the underlying folder -> Components folder

enter image description here

My folder structure for your demo

enter image description here

Related questions

How to call another components function in angular2

I have two components as follows and I want to call a function from another component. Both components are included in the third parent component using directive. Component 1: @component( selector:'com1' ) export class com1{ function1(){...} } Component 2: @component( selector:'com2…

Read More
Angular - What is the meanings of module.id in component?

In an Angular app, I have seen that @Component has property moduleId. What does it mean? And when module.id is not defined anywhere, the app still works. How can it still work? @Component({ moduleId: module.id, selector: 'ng-app', templateUrl: …

Read More
Pass variable to custom component

I have my custom component: @Component({ selector: 'my-custom-component', templateUrl: './my-custom-component.html', styleUrls: ['./my-custom-component.css'] }) export class MyCustomComponent { constructor() { console.log('myCustomComponent'); } } I can use it like this: <my-custom-component></my-custom-component> But how I can pass …

Read More