how to create custom component in angular5. It is not working. about help.form.io

[Navpreet2289]

it worked
when initialized Formio.registerComponent('custom', CustomComponent); in the constructed of the component in which i wanted to use formio.

[avan2s]

Hi @Navpreet2289
i tried with the Angular 6 starter application ( https://github.com/formio/angular-app-starterkit ) to get a custom component to work. But i am not able to import the BaseComponent. The Formio component is working fine when when i adjust the import statement to:

import { Formio } from 'formiojs';

For the BaseComponent
import { BaseComponent } from 'formiojs/build/components/base/Base'

i got the error message - Module not found:
ERROR in src/app/custom/custom.component.ts(2,31): error TS2307: Cannot find module 'formiojs/build/components/base/Base'

I figured out, that the location of the base component has been changed. So i tried to adjust the import statement to the new location:
import * as BaseComponent from 'formiojs/components/base/Base';

Then i extend the CustomComponent from BaseComponent. Now the app starts, but i got a similar error from your first post.

compiler.js:1016 Uncaught Error: Can't resolve all parameters for CustomComponent: (?, ?, ?).
at syntaxError (compiler.js:1016)
at CompileMetadataResolver.push../node_modules/@angular/compiler/fesm5/compiler.js.CompileMetadataResolver._getDependenciesMetadata (compiler.js:10917)

My Code:
`import { Component } from '@angular/core';
import * as BaseComponent from 'formiojs/components/base/Base';
console.log(BaseComponent.default);

@component({
selector: 'app-custom',
template: '<p>My Component</p>'
})
export class CustomComponent extends BaseComponent.default {

constructor(component, options, data) {
super(component, options, data);
}

elementInfo() {
let info = super.elementInfo();
info.type = 'input';
info.changeEvent = 'input';
return info;
}

}`

And App Component:

`import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { FormioResources } from 'angular-formio/resource';
import { FormioAuthService } from 'angular-formio/auth';
import { CustomComponent } from './custom/custom.component';
import { Formio } from 'formiojs';
@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
constructor(
private auth: FormioAuthService,
private router: Router,
public resources: FormioResources
) {
this.auth.onLogin.subscribe(() => {
this.router.navigate(['/home']);
});

this.auth.onLogout.subscribe(() => {
  this.router.navigate(['/auth/login']);
});

this.auth.onRegister.subscribe(() => {
  this.router.navigate(['/home']);
});

console.log(Formio.registerComponent);
Formio.registerComponent('custom', CustomComponent);

}
}`

Do you have any idea or solution?

Thanks a lot for your help :)