i'm trying to use ionic auto complete with my ionic 3 app ,
how ever , it shows this error message
'ion-auto-complete' is not a known element:
If 'ion-auto-complete' is an Angular component, then verify that it is part of this module.
If 'ion-auto-complete' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component
to suppress this message. ("
[ERROR ->]
what i did is :
npm install ionic2-auto-complete --save
then added
{ AutoCompleteModule } from 'ionic2-auto-complete';
to my app.module.ts
then added
<ion-auto-complete></ion-auto-complete>
to HTML
In addition to add the import in the app.module.ts, you have to declare the AutoCompleteModule in the import section:
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes),
PipesModule,
ComponentsModule,
AutoCompleteModule
],
declarations: [MiPerfilPage]
})
If it doesn't work, try to do the same thing but in the PageModule.ts you want to use it.
You can read this post too:
https://github.com/kadoshms/ionic2-autocomplete/issues/109
I have created new Ionic 3 application using the latest version of Ionic CLI v4.9.0 using below
$ ionic start Ionic3Project blank --type ionic-angular
which create V4 Ionic project by default.
Then I followed steps for Native App Version Plugin here
Faced following console error when imported in app.module.ts file
Uncaught Error: Invalid provider for the NgModule 'AppModule' - only instances of Provider and Type are allowed, got: [StatusBar, ?[object Object]?, ...]
at syntaxError (compiler.js:486)
at compiler.js:15784
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getProvidersMetadata (compiler.js:15752)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15320)
at JitCompiler._loadModules (compiler.js:34413)
at JitCompiler._compileModuleAndComponents (compiler.js:34374)
at JitCompiler.compileModuleAsync (compiler.js:34268)
at CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:239)
at PlatformRef.bootstrapModule (core.js:5578)
app.module.ts file
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '#ionic-native/splash-screen';
import { StatusBar } from '#ionic-native/status-bar';
import { AppVersion } from '#ionic-native/app-version';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
AppVersion, <-- Error [[ts]
Type 'AppVersionOriginal' is not assignable to type 'Provider'.
Type 'AppVersionOriginal' is missing the following properties from type 'FactoryProvider': provide, useFactory [2322]]
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
UPDATE:Finally I found solution and explanation of this issue here :P
This issue is because of ionic new update(releasing ionic 4)
You have to import your plugins for ionic 3 like this:
import { PluginName} from '#ionic-native/pluginName/ngx';
More info here
This error is thrown because of the new update of ionic 4.
The above given solution would work perfectly.
But, this must be done throughout the project to avoid this error.
The other way could be to roll back to plugin's previous version.
I am new to ionic, it seems like a silly question but I need some help
Using some simple button is throwing error. I am using ionic 4.0.
'ion-button' is not a known element:
1. If 'ion-button' is an Angular component, then verify that it is part of this module.
2. If 'ion-button' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
<ion-button color="primary">Primary</ion-button>
I think the solution is importing Ionic module in the respective module imports
import { IonicModule } from '#ionic/angular'; <--add this line
#NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule, <-- add this line
],
})
Try this,
<button ion-button color="primary">Primary</button>
In order to avoid that error message:
Import CUSTOM_ELEMENTS_SCHEMA into app.modules.ts:
import { ErrorHandler, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
Add schema: [CUSTOM_ELEMENTS_SCHEMA] to app.modules.ts as below:
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
HttpClientModule,
MomentModule,
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
I've run into this too. Your solution is not the best one as the new Ionic 4 way is to use <ion-button> (https://beta.ionicframework.com/docs/components/#button).
It does work for me fine in a page I have under /src/app/my-page/my-page.html, but when I put it in /src/shared/components/my-comp/my-comp.html it gives the error. The odd thing is that I have other Ionic elements in the same page <ion-grid>, <ion-row> and <ion-col>. Also, this code used to be in my-page.html where it worked without error.
FYI, MyComponent is in components.module.ts as a declaration and an export. Not sure yet what I am missing...
UPDATE 1: Neither moving the components directory under src nor under src/app made any difference.
UPDATE 2: This is my environment:
ionic (Ionic CLI) : 4.0.6
Ionic Framework : #ionic/angular 4.0.0-beta.2
#angular-devkit/core : 0.7.2
#angular-devkit/schematics : 0.7.2
#angular/cli : 6.1.2
#ionic/ng-toolkit : 1.0.0
#ionic/schematics-angular : 1.0.1
UPDATE 3: Still broken in this environment:
ionic (Ionic CLI) : 4.1.0
Ionic Framework : #ionic/angular 4.0.0-beta.3
#angular-devkit/core : 0.7.2
#angular-devkit/schematics : 0.7.2
#angular/cli : 6.1.2
#ionic/ng-toolkit : 1.0.6
#ionic/schematics-angular : 1.0.5
UPDATE 4: After much trial and error, I had to add schemas: [CUSTOM_ELEMENTS_SCHEMA] to my components.module.ts file. I was able to leave the directory structure as-is. I'm not sure why this is required for this scenario, though.
It seems you are not importing the ionicModule in the component module. So, Import the IonicModulein the module.ts, rest of the things will work fine
Import your custom component in the parent module. for example in your app.module.ts:
declarations: [MyComponent],
exports: [
PopoverComponent,
]
yes try this
<button ion-button color="primary">Primary</button>
In Ionic 5, I have a same problem when I build with --prod option.
Since *.module.ts file is not available in components in Ionic 5, I need to add shared module for components and then add CUSTOM_ELEMENTS_SCHEMA schema to that shared module.
ionic g module modules/shared
cat shared.module
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FooComponent } from '../../components/foo/foocomponent.component'; <== Add your components
#NgModule({
declarations: [FooComponent], <== Add your components
imports: [
CommonModule
],
exports: [FooComponent], <== Add your components
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class SharedModule { }
I was having this problem in a library that I was building
because I forgot to export the module of that was importing the IonicModule and exporting my component.
So, in my module was importing Ionic lib and exporting my component as below.
import { CommonModule } from '#angular/common';
import { NgModule } from '#angular/core';
import { IonicModule } from '#ionic/angular';
import { MyComponent } from './my.component';
#NgModule({
declarations: [
MyComponent,
],
imports: [
CommonModule,
IonicModule,
],
exports: [
MyComponent,
],
})
export class MyModule {
}
And in the public-api.ts file of my lib, I should have something like this
export { MyModule } from './lib/my.module'; // <--- exporting my module
export { MyComponent } from './lib/my.component';
My issue was that there were errors prior to this error that seemed to cascade down. The error I had was some elements in the declarations that should have been in the providers. Also, one of these was marked private in the constructor when it should have been public.
#NgModule({
imports: [
IonicModule,
CommonModule,
FormsModule,
RouterModule.forChild([{ path: '', component: DevicesPage }]),
DevicesPageRoutingModule,
TranslateModule.forChild()
],
declarations: [DevicesPage --> remove BLE, LocationAccuracy, DeviceManagerService ],
providers: [BLE, LocationAccuracy, DeviceManagerService] <--Add
})
I was stuck on this for a little while as well until I realized that the problem was I did not create the Ionic Angular project properly. you have to include --type=angular
https://github.com/ionic-team/ionic-cli
exp:
ionic start myApp tabs --type=angular
I faced similar issue after ionic 4, So I added the CUSTOM_ELEMENTS_SCHEMA in app.modules.ts. Then it worked fine
app.module.ts
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
SpineRestServiceProvider,
FingerprintAIO
],
schemas: [CUSTOM_ELEMENTS_SCHEMA]
Should add in app.module.ts
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '#angular/core';
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
schemas: [CUSTOM_ELEMENTS_SCHEMA] ==> add line**
I'm trying to use camanjs library in my ionic v3 project. I installed it using npm install caman --save (also installed cairo, libjpg and libpng). Now in my project folder I can see a folder named caman in node_modules folder, so in my .ts I write
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Caman } from 'caman';
declare var Caman: any;
#Component({
selector: 'page-filtri',
templateUrl: 'filtri.html'
})
export class FiltriPage {
constructor(public navCtrl: NavController) {
}
addFilter(){
Caman("#image", function(){
this.sinCity();
this.render();
})
}
}
and the html file
<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<button ion-button (click)="addFilter()">Filtro</button>
<img id='image' src="https://firebasestorage....">
</ion-content>
but if I serve I've
ERROR ReferenceError: Caman is not defined
And that's how my node_modules folder looks like
[node_modules folder]
Can you help me?
Why don't you try changing your import to the following:
import * as Caman from 'caman';
You cannot declare both at the same time like this.
import { Caman } from 'caman';
declare var Caman: any;
you only need to use
import { Caman } from 'caman';
But you get the error "Module parse failed: ...." There is nothing wrong with the import it is because of the CamanJs Uses node-canvas. And canvas loads binary files. like "canvas.node". You need to install node-loader https://github.com/webpack-contrib/node-loader to resolve that error.
Dummy question ...
I try to code an angular2 (2.0.0-beta.6) app in Typescript in jsfiddle.
I know that there is other solution online but ...
In fact, my example is very small and the problem is on import module :
import {bootstrap} from 'angular2/platform/browser'
import {Component} from 'angular2/core';
I got the following error :
Uncaught ReferenceError: System is not defined
Uncaught ReferenceError: require is not defined
I try to add some dependencies (require, system ...) but it doesn't work.
And there is no more Self-Executing bundle for recent version (beta-6) of Angular2 (angular2.sfx.dev.js).
Some tests :
https://jsfiddle.net/asicfr/q8bwosfn/1/
https://jsfiddle.net/asicfr/q8bwosfn/3/
https://jsfiddle.net/asicfr/q8bwosfn/4/
https://jsfiddle.net/asicfr/q8bwosfn/5/
https://jsfiddle.net/asicfr/q8bwosfn/6/
In Plunker you can just use the menu
New > Angularjs > 2.0.x (TS)
to get a minimal working Angular2 application
Router
If you want to use the router add in config.js
'#angular/router': {
main: 'router.umd.js',
defaultExtension: 'js'
},
<base href="."> as first child in the <head> of index.html might be necessary as well.
To switch to HashLocationStrategy change main.ts from
import {bootstrap} from '#angular/platform-browser-dynamic';
import {App} from './app';
bootstrap(App, [])
.catch(err => console.error(err));
to
import {bootstrap} from '#angular/platform-browser-dynamic';
import {App} from './app';
import {provide} from '#angular/core'
import {ROUTER_PROVIDERS} from '#angular/router';
import {LocationStrategy, HashLocationStrategy} from '#angular/common';
bootstrap(App, [ROUTER_PROVIDERS, provide(LocationStrategy, {useClass: HasLocationStrategy}])
.catch(err => console.error(err));
If you are not tied to JS Fiddle, consider Plunker instead. The Angular devs keep a bare workspace up to date with new Angular releases at this link.
It is more current than even Plunker's own Angular 2 setup (which you can access from the Plunker menu: New > AngularJS > 2.0.x (TS)
The downside: that setup is in TypeScript, so if you wish to develop with vanilla Javascript (ES5 or ES6), your best bet is to use the Plunker menu option instead.
You need also to include SystemJS JS file. I saw that you missed it. All these includes are necessary:
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/tools/system.js"></script>
<script src="https://code.angularjs.org/tools/typescript.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.3/angular2.dev.js"></script>
You also need then to configure SystemJS with the following code and then import your main module containing the bootstrap function:
System.config({
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true },
packages: {
'app': {
defaultExtension: 'ts'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));