'ng4geo-autocomplete' is not a known element:

Question

'ng4geo-autocomplete' is not a known element:

This is in the header.component.html:

 <div>
    <ng4geo-autocomplete (componentCallback)="autoCompleteCallback2($event)"></ng4geo-autocomplete>
 </div>

This is header.component.ts:

import { Component, OnInit } from '@angular/core';
import {  ViewEncapsulation } from '@angular/core';
//import { Ng4GeoautocompleteModule } from '';

import {
    Ng4GeoautocompleteModule
} from 'ng4-geoautocomplete';

//@Component({
//        selector: 'layout-header',
//        templateUrl: 'app/Components/header.component.html'
//    })
@Component({
    selector: 'any-component-name',
    encapsulation: ViewEncapsulation.None,
    template: '<div class="demo"><ng4geo-autocomplete (componentCallback)="autoCompleteCallback1($event)"></ng4geo-autocomplete></div>',

})
export class HeaderComponent {
}

I am installing npm install --save ng4-geoautocomplete on angular4 project. Can anyone tell me what the problem is?

Here is the total error:

"Uncaught (in promise): Error: Template parse errors:
'ng4geo-autocomplete' is not a known element:
1. If 'ng4geo-autocomplete' is an Angular component, then verify that it is part of this module.
2. If 'ng4geo-autocomplete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("         </div>
                                    <div>
                                        [ERROR ->]<ng4geo-autocomplete  (componentCallback)="autoCompleteCallback2($event)"></ng4geo-autocomplete>
   "): ng:///app/Components/header.component.html@195:40
Error: Template parse errors:
'ng4geo-autocomplete' is not a known element:
1. If 'ng4geo-autocomplete' is an Angular component, then verify that it is part of this module.
2. If 'ng4geo-autocomplete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("         </div>
                                    <div>
                                        [ERROR ->]<ng4geo-autocomplete  (componentCallback)="autoCompleteCallback2($event)"></ng4geo-autocomplete>
   "): ng:///app/Components/header.component.html@195:40
    at Error.ZoneAwareError (http://localhost:13244/node_modules/zone.js/dist/zone.js:992:33)
    at ZoneAwareError (http://localhost:13244/node_modules/zone.js/dist/zone.js:989:35)
    at syntaxError (http://localhost:13244/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34)
    at TemplateParser.parse (http://localhost:13244/node_modules/@angular/compiler/bundles/compiler.umd.js:11522:19)
    at JitCompiler._compileTemplate (http://localhost:13244/node_modules/@angular/compiler/bundles/compiler.umd.js:25296:39)
    at eval (http://localhost:13244/node_modules/@angular/compiler/bundles/compiler.umd.js:25220:62)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (http://localhost:13244/node_modules/@angular/compiler/bundles/compiler.umd.js:25220:19)
    at createResult (http://localhost:13244/node_modules/@angular/compiler/bundles/compiler.umd.js:25105:19)
    at ZoneDelegate.invoke (http://localhost:13244/node_modules/zone.js/dist/zone.js:334:26)
    at Zone.run (http://localhost:13244/node_modules/zone.js/dist/zone.js:126:43)
    at http://localhost:13244/node_modules/zone.js/dist/zone.js:713:57
    at ZoneDelegate.invokeTask (http://localhost:13244/node_modules/zone.js/dist/zone.js:367:31)
    at Zone.runTask (http://localhost:13244/node_modules/zone.js/dist/zone.js:166:47)
    at drainMicroTaskQueue (http://localhost:13244/node_modules/zone.js/dist/zone.js:546:35)"

Has the library a d.ts (typings) file? – zgue Dec 01 '17 at 11:35 — zgue, Dec 01 '17 at 11:35

score 1 · Answer 1 · answered Dec 01 '17 at 11:51

The example on the projects github site is a little bit odd. Before you can use the library you have to import the module in your app.module.ts file.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { Ng4GeoautocompleteModule } from 'ng4-geoautocomplete';

@NgModule({
  declarations: [ your declarations ],
  imports: [
    BrowserModule,
    Ng4GeoautocompleteModule
  ],  
  bootstrap: [AppComponent]
})
export class AppModule { }

From there on you should be able to use the libraries components.

'ng4geo-autocomplete' is not a known element:

1 Answers1