Ionic, The pipe 'translate' could not be found, only in AoT Compiler - ionic-framework

I have a problem with ngx-translate within a Ionic App when I try to build a production release.
During development translations work fine with
ionic serve
and
ionic cordova build android
but if I try to make a production build using
ionic cordova build android --prod --release
or for the PWA
ionic build --prod
I get some errors like
[17:47:15] typescript error
The pipe 'translate' could not be found ( ... )
Versions:
ngx-translate: 8.0.0
Ionic: 3.9.2
Angular: 5.2.10
I checked with: https://github.com/ngx-translate/core/tree/v8.0.0 and can't find what I am doing wrong.
In app.module:
// https://github.com/ngx-translate/core#1-import-the-translatemodule
// AoT requires an exported function for factories
export function createTranslateLoader(http: Http) {
return new TranslateHttpLoader( http, './assets/i18n/', '.json' );
}
#NgModule( {
...
imports: [
...
TranslateModule.forRoot( {
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [ Http ]
}
}
),
...
And in one of my pages which produce this error:
import { TranslateModule, TranslateService, TranslatePipe } from '#ngx-translate/core';
#NgModule({
imports: [
TranslateModule
],
exports: [
TranslateModule
]
})
export class ContactPage { ... }
Searching through SO produced mainly the hint to import & export the TranslateModule in the page as well as importing the TranslatePipe, but both of these changes didn't solve my problem. How do I configure the translation module so that it works in a production build?

OK, solved it. I added the import & export statement of the TranslateModule to the page class, but correct is to add it the the corresponding module.
In my example:
Wrong:
contact.ts
#NgModule({
imports: [
TranslateModule
],
exports: [
TranslateModule
]
})
export class ContactsPage {...}
Correct:
contact.module.ts
#NgModule( {
...
imports : [
...
TranslateModule
],
exports : [
TranslateModule
]
} )
export class ContactsPageModule {
}

Related

Testing Angular Web components(Custom Elements) with protractor

When we use the angular custom element tag in the index.html and run our e2e tests using protractor, it causes timeout as angular is not found in the page as for Angular web components there are only entryComponents and no bootstrap component. Because building the angular application for deploying as a custom element doesn't need bootstrapping of component.
To build our angular project for production with customElement and also test the same module in protractor with boostraping the component , below tweak in module bootstrap will work.
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule
],
providers: [],
entryComponents: [AppComponent]
})
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap(appRef: ApplicationRef): void {
if (environment.production) {
const aboutSystemCustomElement = createCustomElement(AppComponent, { injector: this.injector });
customElements.define('custom-app-component', AppComponent);
} else {
appRef.bootstrap(AppComponent);
}
}
}

Open device settings with Ionic Capacitor

I’m trying to find a way to open the settings/preferences app with capacitor but I’m unsuccessful.
App.canOpenUrl({ url: 'com.apple.Preferences' }) is failing with error message -canOpenURL: failed for URL: "com.apple.Preferences" - error: "Invalid input URL"
I’m not sure if I’m doing it wrong or if it’s even possible with capacitor to open native app…?
this article shows how to open the facebook app, but nothing about native app
There's now a capacitor plugin for this, capacitor native settings.
It's similar to the cordova plugin but you have to call the correct function for each platform (iOS or Android) instead of using a single function for both.
for someone with the same problem
Install:
cordova-open-native-settings
$ npm install cordova-open-native-settings
$ npm install #ionic-native/open-native-settings
$ ionic cap sync
app.module.ts
// ...
import { OpenNativeSettings } from '#ionic-native/open-native-settings/ngx';
#NgModule({
declarations: [
// ...
],
entryComponents: [
// ...
],
imports: [
// ...
],
providers: [
// ...
OpenNativeSettings,
],
bootstrap: [AppComponent]
})
export class AppModule {}
whatever.page.ts
// ...
import { OpenNativeSettings } from '#ionic-native/open-native-settings/ngx';
#Component({
selector: 'app-whatever',
templateUrl: './whatever.page.html',
styleUrls: ['./whatever.page.scss'],
})
export class PopoverComponent implements OnInit {
constructor(
// ...
private nativeSettings: OpenNativeSettings
) { }
phoneSettings() {
this.nativeSettings
.open('settings')
.then( res => {
console.log(res);
})
.catch( err => {
console.log(err);
})
}
}

Ionic button showing 'ion-button' is not a known element

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**

ionic 3: Error: Module build failed: Error: ENOENT: no such file or directory, open

I created ionic 3 project template 'tabs' using ionic start ionTutorial tabs (tabs which were generated: home/about/contact)
Then I added my own tabs using
ionic g page (tabs: project/notifications/settings).
Then I deleted home about and contact folders from /src/pages
I updated files:
tabs.html (there were changed tabTitle and tabIcon only) and
tabs.ts
import { Component } from '#angular/core';
import { ProjectPage } from '../project/project';
import { NotificationsPage } from '../notifications/notifications';
import { SettingsPage } from '../settings/settings';
#Component({...})
export class TabsPage {
tab1Root = ProjectPage;
tab2Root = NotificationsPage;
tab3Root = SettingsPage;
constructor() { }
}
and app.module.ts
//this was updated (3x import)
import { ProjectPage } from '../pages/project/project';
import { NotificationsPage } from '../pages/notifications/notifications';
import { SettingsPage } from '../pages/settings/settings';
import { TabsPage } from '../pages/tabs/tabs';
#NgModule({
declarations: [
MyApp,
ProjectPage, //this was updated
NotificationsPage, //this was updated
SettingsPage, //this was updated
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp)
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
ProjectPage, //this was updated
NotificationsPage, //this was updated
SettingsPage, //this was updated
TabsPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
I received an error
Error: Module build failed: Error: ENOENT: no such file or directory, open
'\src\pages\about\about.ts'
After that I closed web browser and I tried to run ionic serve again and here are results
Starting app-scripts server: --address 0.0.0.0 --port 8100 --livereload-port 35729 --dev-logger-port 53703 --nobrowser
watch started ...
build dev started ...
and the command line 'is back'.
In my case the solution was to remove all files from www/build folder and restart dev server. The app is working fine now.

Lazy loading 3rd party component in loaded page (Ionic)

The app working when i run ionic cordova run android --device but gives error when i try ionic cordova run android --prod --release
I am trying use ng2-qrcode into my lazy loaded page
Error: Unexpected value 'QRCodeComponent in
D:/qrstore/node_modules/ng2-qrcode/dist/ng2-qrcode.d.ts' declared by
the module 'ItemDetailPageModule in
D:/qrstore/src/pages/item-detail/item-detail.module.ts'. Please add a #Pipe/#Directive/#Component annotation.
at Error (native)
at syntaxError (D:\qrstore\node_modules\#angular\compiler\bundles\compiler.umd.js:1729:34)
at D:\qrstore\node_modules\#angular\compiler\bundles\compiler.umd.js:15625:40
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (D:\qrstore\node_modules\#angular\compiler\bundles\compiler.umd.js:15607:54)
at addNgModule (D:\qrstore\node_modules\#angular\compiler\bundles\compiler.umd.js:24403:58)
at D:\qrstore\node_modules\#angular\compiler\bundles\compiler.umd.js:24414:14
at Array.forEach (native)
at _createNgModules (D:\qrstore\node_modules\#angular\compiler\bundles\compiler.umd.js:24413:26)
at analyzeNgModules (D:\qrstore\node_modules\#angular\compiler\bundles\compiler.umd.js:24288:14)
ionic info
#ionic/cli-utils : 1.12.0
ionic (Ionic CLI) : 3.12.0
global packages:
cordova (Cordova CLI) : 7.0.1
local packages:
#ionic/app-scripts : 3.0.0
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.7.1
System:
Android SDK Tools : 25.2.3
Node : v6.9.4
npm : 3.10.8
OS : Windows 10
Misc:
backend : pro
item detail module
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ItemDetailPage } from './item-detail';
import { HttpModule, Http } from '#angular/http';
//native
import { File } from '#ionic-native/file';
import { FilePath } from '#ionic-native/file-path';
import { SQLite } from '#ionic-native/sqlite';
//providers
import { ItemsProvider, LabelsProvider, SQLiteDatabaseProvider } from '../../providers/providers';
//components
import { ItemCreatePage } from '../item-create/item-create';
import { QRCodeComponent } from 'ng2-qrcode'
//directive
import { AbsoluteDragDirective } from '../../directives/absolute-drag/absolute-drag';
#NgModule({
declarations: [
ItemDetailPage,
QRCodeComponent,
AbsoluteDragDirective
],
imports: [
IonicPageModule.forChild(ItemDetailPage),
HttpModule
],
exports: [
ItemDetailPage
],
entryComponents: []
,
providers:[
ItemsProvider,
SQLite,
SQLiteDatabaseProvider,
File,
FilePath
]
})
export class ItemDetailPageModule {}
ng2-qrcode is no longer maintained and does not work with the AoT compiler of angular (which is used when you build your app with --prod). But there is a drop in replacement which is built for usage in Ionic3/Angular4+ projects which use the AoT compiler: angularx-qrcode. It is based on the same library and provides the same API.
Add it as follows:
npm install angularx-qrcode --save
And to use it import it in your NgModule:
import { QRCodeModule } from 'angularx-qrcode';
And then add it to the imports array:
imports: [
QRCodeModule
],
I'm the author of angularx-qrcode mentioned above.
For those coming here and using the angularx-qrcode-package, I prepared a working angular-app for angular5/6 to have an easier start:
https://github.com/Cordobo/angularx-qrcode-sample-app
master-branch: latest angular, at the time of posting angular6
angular5-branch: you guessed it, is for angular5
HTH