Ngx-translate build prod issues in IONIC 4 - ionic-framework

I'm using ngx translate for translation in my ionic 4 project. But when i try to run:
ionic cordova build android -prod
Throws this error:
ERROR in Illegal State: referring to a type without a variable {"filePath":"C:/XXX/XXX/XXX/XXX/PROJECTNAME/node_modules/#ngx-translate/core/ngx-translate-core.d.ts","name":"TranslatePipe","members":[]}
[ERROR] An error occurred while running subprocess ng
My ionic info:
Ionic:
Ionic CLI : 5.2.7 (C:\Users\USER\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : #ionic/angular 4.9.0
#angular-devkit/build-angular : 0.801.3
#angular-devkit/schematics : 8.1.3
#angular/cli : 8.1.3
#ionic/angular-toolkit : 2.0.0
Cordova:
Cordova CLI : 9.0.0 (cordova-lib#9.0.1)
Cordova Platforms : not available
Cordova Plugins : not available
Utility:
cordova-res : 0.6.0
native-run : 0.2.8
System:
Android SDK Tools : 26.1.1 (C:\Users\USER\AppData\Local\Android\Sdk)
NodeJS : v12.5.0 (C:\Program Files\nodejs\node.exe)
npm : 6.9.0
OS : Windows 10
Please help!!!

The accepted answer is a solution to avoid the problem, but when a production build is needed, things are looking bad.
Workaround to achieve this is to access your tsconfig.json and disable fullTemplateTypeCheck to false. Include it, if you can not find it.
"angularCompilerOptions": {
"fullTemplateTypeCheck": false,
...
},

This error actually means that a reference failure is present among your components and modules. That could be a dupliate reference in a module or and submodule or any the like. This would result in ommiting to make a needed variable available. In your case that is the variable of ngx-translate (which your either call in the template or component file).
Setting the fullTemplateTypeCheck to false will help you to get the insights (including code line) about your false module references. But you must fix it yourself. Usually an easy fix. If you are uncertain, run again ng build --prod --verbose to see get more indications about the false relations.

you do not need to write -prod because it converts the file into minified version so device to hard to read. u just need run without -prod
ionic cordova build android
if you want a release APK just run
ionic cordova build android --release
after that, u do not face any issue.

Related

Changes are not getting reflected in Ionic 3 app even after successful build

I met a problem for 3 days with my application ionic 3.
In fact, after builder in prod and release mode, it is always the old version that is always taken into account. the changes do not reflect.
So when mode debug, the changes are well taken.
I tried several solutions may nothing.
Ionic v3
Also i have tried many solutions but no changes
ionic cordova platforms rm android
ionic cordova platforms add android
ionic cordova build android --prod --release --aot
------------no change-------------
I have downgrade the app-scripts version always same
i have delete the www folder and run ionic serve --lab after i run build commande still no change
I need help.
Thanks you in advance
Ionic:
Ionic CLI : 5.2.3
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.1.8
Cordova:
Cordova CLI : 8.1.2 (cordova-lib#8.1.1)
Cordova Platforms : android 7.1.4, ios 4.5.5
Cordova Plugins : cordova-plugin-ionic 3.1.2, cordova-plugin-ionic-webview 1.2.1, (and 18 other plugins)
Utility:
cordova-res : 0.6.0
native-run : 0.2.8
System:
Android SDK Tools : 26.1.1 (C:\Sdk)
NodeJS : v10.15.1 (C:\Program Files\nodejs\node.exe)
npm : 6.4.1
OS : Windows 10
Build pass successfully
remove android platform using
ionic cordova platform rm android remove manually node-modules and
package-lock.json (imp*)
Unistall old Application
npm cache clean --force
finally run npm install
ionic cordova platform add android
ionic cordova build android
As #MD Khali said to remove the platform and add platform again, but if it happens after that you just need to click save 3-4 time. Because I have the same problem in my ionic 3 projects.
Finally I found the solution.
The problem was related to the ionic plugin (appflow).
I had two choices
1. Generate the apk from the appflow platform with the configured branch.
Remove the ionic plugin applflow
I took the choice 1.
Documentation of appflow https://ionicframework.com/appflow

I need to compile an old project (IONIC 2)

I have a project on ionic 2, which I have not touched for 3 years, but the client is asking me to change a simple link. And I can not build the application. What should I take into account to recover this project?
I do not want to migrate to ionic 3 or ionic 4, I just want to change the webservices link and that the application continues in ionic 2.
cli packages: (/usr/local/lib/node_modules)
#ionic/cli-utils : 1.19.2
ionic (Ionic CLI) : 3.20.0
global packages:
cordova (Cordova CLI) : not installed
local packages:
#ionic/app-scripts : 1.1.4
Cordova Platforms : none
Ionic Framework : ionic-angular 2.2.0
System:
Android SDK Tools : 26.1.1
ios-deploy : 1.9.2
Node : v8.9.3
npm : 5.5.1
OS : macOS
Xcode : Xcode 10.1 Build version 10B61
Is it possible to build this old project on ionic 2 on my computer?
EDIT:
when sudo ionic cordova platform add android i get:
`(node:41668) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): CordovaError: Failed to fetch platform cordova-android#7.0.0
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
Error: npm: Command failed with exit code 1 Error output:
npm WARN #ionic/app-scripts#1.1.4 requires a peer of #angular/tsc-wrapped#* but none is installed. You must install peer dependencies yourself.
npm WARN #ionic/cli-plugin-ionic-angular#1.3.1 requires a peer of #ionic/app-scripts#^1.3.7 but none is installed. You must install peer dependencies yourself.
npm ERR! Cannot read property '0' of undefined`
u should install Cordova first, like this,use # plus version number as needed
npm install -g cordova

Ionic3 error on build ios Promise rejected with non-error: 'Error code 65

I am trying to create an ipa file but I have this unreadable error
when I run this command line on my Mac
ionic cordova build ios --prod --release
CordovaError: Promise rejected with non-error: 'Error code 65 for
command: xcodebuild with args:
-exportArchive,-archivePath,MyApp.xcarchive,-exportOptionsPlist,/Users/FSE/myApp04/platforms/ios/exportOptions.plist,-exportPath,/Users/FSE/myApp04/platforms/ios/build/device'
at cli.catch.err (/usr/local/lib/node_modules/cordova/bin/cordova:30:15)
at process.internalTickCallback (internal/process/next_tick.js:77:7)
Ionic:
ionic (Ionic CLI) : 4.3.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : ionic-angular 3.9.2
#ionic/app-scripts : 3.2.0
Cordova:
cordova (Cordova CLI) : 8.1.2 (cordova-lib#8.1.1)
Cordova Platforms : ios 4.5.5
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 4 other plugins)
System:
ios-deploy : 1.9.4
NodeJS : v11.0.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS
Xcode : Xcode 10.1 Build version 10B61
I've solved it like this
ionic cordova build ios -- --buildFlag="-UseModernBuildSystem=0"
The accepted answer is correct. You can also put in build.json file:
{
"ios": {
"release": {
...,
"buildFlag": [
"-UseModernBuildSystem=0"
]
}
}
}
either
ionic cordova build ios -- --buildFlag="-UseModernBuildSystem=0"
or just open
xcode -> File -> Workspace Settings
and change build system to "Legacy Build System"
In my experience the "buildFlag" is not enough, I mean I had:
"ionic cordova run ios -- --buildFlag=\"-UseModernBuildSystem=0\""
... but I was still getting the Error code 65.
To solve the issue you must open the project you find inside "yourproject/platforms/ios" in xcode and check that the signing certificate is ok. To do so just click on the project (first icon on the top-left panel) and check the "Signing" section.
For newer version of xcode, you have to have Legacy Build System. If you already have the Legacy Build System, then uncheck the automatic signing and recheck it. Don't know why but it worked for me.

Without `from` option PostCSS could generate wrong source map or do not find Browserslist config

Witout from option PostCSS could generate wrong source map or do not
find Browserslist config. Set it to CSS file path or to undefined to
prevent this warning
ionic3 project, when I running ionic corodva bulid ios --prod showing this warning for me.
ionic info
cli packages: (/usr/local/lib/node_modules)
#ionic/cli-utils : 1.19.0
ionic (Ionic CLI) : 3.19.0
global packages:
cordova (Cordova CLI) : 7.1.0
local packages:
#ionic/app-scripts : 3.1.7
Cordova Platforms : android 6.3.0 ios 4.4.0
Ionic Framework : ionic-angular 3.9.2
System:
ios-deploy : 1.9.2
Node : v6.11.3
npm : 3.10.10
OS : macOS Sierra
Xcode : Xcode 9.2 Build version 9C40b
Environment Variables:
ANDROID_HOME : not set
Misc:
backend : pro
UPDATE:
I tried to update my npm to 5.5.1 and node to 8.6.0, but still showing.
Finally, this warning solved. Thanks to Suraj Rao
First find sass.js file under /node_modules/#ionic/app-scripts/dist/sass.js.
inside search var postcssOptions and add from: undefined,
Finally should be like this:
var postcssOptions = {
from: undefined,
to: path_1.basename(sassConfig.outFile),
map: autoPrefixerMapOptions
};
Referenceļ¼š workaround.
For whoever directly used PostCSS and met this issue then came here,
Change your
postcss( any_plugins ).process( css )
to
postcss( any_plugins ).process( css, { from: undefined } )
can fix the issue.
For me, adding map: { inline: false } solved my problem.

ionic use video.js throws error

I try to use video.js as my video player, but reaches error:
Uncaught (in promise): Error: Cannot find module "safe-json-parse/tuple" Error: Cannot find module "safe-json-parse/tuple"
Steps I did:
npm install -S video.js
import videojs from 'video.js';
write code in palyer.ts => videojs('my-player', { controls: true});
above error appears when player page is hit.
Anybody has any idea? Or what other 3rd party html5 video player can be easily plugged in?
environment details:
ionic info
global packages:
#ionic/cli-utils : 1.4.0
Cordova CLI : 7.0.1
Ionic CLI : 3.4.0
local packages:
#ionic/app-scripts : 1.3.7
#ionic/cli-plugin-cordova : 1.4.0
#ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms : android 6.2.3
Ionic Framework : ionic-angular 3.3.0
System:
Node : v6.10.3
OS : Linux 4.10
Xcode : not installed
ios-deploy : not installed
ios-sim : not installed
npm : 3.10.10
I did the same thing, I had a safe-json-parse module so thought I was fine, but after doing:
npm install -s safe-json-parse
new files were added and the error was gone.
I downloaded the videojs js and css files to assets/ folder and references them in index.html.
By this way videojs works, though not as elegant as with npm package