How to import json file in ionic2 - json

I want to import a json file in my Ionic2 project. In my home.ts file I have
import * as data from '../../assets/i18n/en.json';
In my declarations.d.ts in the src folder, I have:
declare module '*.json' {
const value: any;
export default value;
}
declare module '*';
When I do "ionic serve" I got the following error and page does not load in the browser.
C:\Users\cju\Documents\Projects\Bus-DriverApp-Tabs>ionic serve
> ionic-hello-world# ionic:serve C:\Users\cju\Documents\Projects\Bus-DriverApp-Tabs
> ionic-app-scripts serve
[14:20:18] ionic-app-scripts 0.0.45
[14:20:18] watch started ...
[14:20:18] build dev started ...
[14:20:18] clean started ...
[14:20:18] clean finished in 5 ms
[14:20:18] copy started ...
[14:20:18] transpile started ...
[14:20:22] build dev failed: Cannot read property 'indexOf' of undefined
[14:20:22] copy finished in 4.45 s
[14:20:23] watch ready in 4.48 s
[14:20:23] dev server running: http://localhost:8100/
Here is my ionic info.
C:\Users\ccc\Documents\Projects\Bus-DriverApp-Tabs>ionic info
Your system information:
ordova CLI: 6.4.0
Ionic Framework Version: 2.0.0-rc.3
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.45
ios-deploy version: Not installed
ios-sim version: Not installed
OS: Windows 7 Node Version: v6.9.1
Xcode version: Not installed
I have google searched around, but could not solve it.

Create your localization files in www/assets/i18n/:
www/assets/i18n/es.json
JSON file should look like this:
{
"key" : "Translation for Key",
"nested": {
"user": "User",
"signIn": "Sign In",
"signUp": "Sign Up"
}
}
app.ts and setup the required configuration. First of all the required imports.
Now add provider and pipe to ionicBootstrap method

Related

spring boot with gradle not starting up

I am trying to build sample hello application using gradle build in Spring tool suite facing below design time error.
I have grade version 4.10.2 installed on my machine.
Error Msg:
Description Resource Path Location Type
Could not run build action using Gradle distribution 'https://services.gradle.org/distributions/gradle-4.10.2-bin.zip'.
Build file 'C:\TFS\Study\Springboot\GradleExamples\workspace\Gradle_Hello\build.gradle' line: 14
Plugin [id: 'org.springframework.boot', version: '2.1.2.RELEASE'] was not found in any of the following sources:
- Gradle Core Plugins (plugin is not in 'org.gradle' namespace)
- Plugin Repositories (could not resolve plugin artifact 'org.springframework.boot:org.springframework.boot.gradle.plugin:2.1.2.RELEASE')
Searched in the following repositories:
Gradle Central Plugin Repository
Plugin [id: 'org.springframework.boot', version: '2.1.2.RELEASE'] was not found in any of the following sources:
- Gradle Core Plugins (plugin is not in 'org.gradle' namespace)
- Plugin Repositories (could not resolve plugin artifact 'org.springframework.boot:org.springframework.boot.gradle.plugin:2.1.2.RELEASE')
Searched in the following repositories:
Gradle Central Plugin Repository build.gradle /Gradle_Hello line 14 Gradle Error Marker
Next time, please include your build.gradle file.
I believe your problem is caused by the fact you are trying to apply the plugin:'org.springframework.boot' without telling your gradle script where to find that plugin. Your buildscript (build.gradle file) actually depends on the org.springframework.boot plugin, however since it can't find it (and doesn't even know what it is), you are getting this issue.
you can fix that issue by adding the following code at the top of your file:
buildscript {
repositories {
mavenCentral()
}
dependencies {
// You are telling gradle that this script (Not the project) depends on the
// following plugin
classpath "org.springframework.boot:spring-boot-gradle-plugin:2.1.2.RELEASE"
}
}
apply plugin: "org.springframework.boot"
// The rest of your build.gradle file
I had the same problem, so I changed to Gradle 6.5 and also add settings.gradle file in the same dir as your build.gradle with the following info.
// settings.gradle
pluginManagement {
plugins {
id "org.springframework.cloud.contract" version "${verifierVersion}"
}
repositories {
// to pick from local .m2
mavenLocal()
// for snapshots
maven { url "https://repo.spring.io/snapshot" }
// for milestones
maven { url "https://repo.spring.io/milestone" }
// for GA versions
gradlePluginPortal()
}
}
In addition make sure that you can connect to your repositories. In my case if was a internal nexus server and gradle wasn't able to connect to the repositories because of SSL certificate missing from JDK truststore. I added the nexus SSL certificate in to the JDK truststore and it resolved

Node.js Lambda - Using TypeORM with MySql

I'm trying to build some lambda's in node.js and I am using TypeORM with MySql. I have installed all required node modules but when I deploy lambda (via serverless) and test it, I get errors as follows.
Using gulp to build and package .zip.
Log output from test lambda:
START RequestId: 671bed10-81b0-11e7-af34-251688cfdd Version: $LATEST
2017-08-15T11:53:50.594Z 671bed10-81b0-11e7-af34-251688cfdd
(node:1) UnhandledPromiseRejectionWarning: Unhandled promise rejection
(rejection id: 2): DriverPackageNotInstalledError: Mysql package has
not been found installed. Try to install it: npm install mysql --save
2017-08-15T11:53:50.596Z 671bed10-81b0-11e7-af34-251688cfdd Method:
"GET"
2017-08-15T11:53:50.596Z 671bed10-81b0-11e7-af34-251688cfdd Started
....
2017-08-15T11:53:50.596Z 671bed10-81b0-11e7-af34-251688cfdd
Finished ....
2017-08-15T11:53:50.596Z 671bed10-81b0-11e7-af34-251688cfdd
(node:1) PromiseRejectionHandledWarning: Promise rejection was handled
asynchronously (rejection id: 2)
2017-08-15T11:53:50.597Z 671bed10-81b0-11e7-af34-251688cfddb2
Console error: { DriverPackageNotInstalledError: Mysql package has not
been found installed. Try to install it: npm install mysql --save
at t.Error (native)
at new t (/var/task/index.js:1:48637)
at e.loadDependencies (/var/task/index.js:1:314938)
at new e (/var/task/index.js:1:311241)
at e.createDriver (/var/task/index.js:1:111709)
at e.create (/var/task/index.js:1:104246)
at e.<anonymous> (/var/task/index.js:1:110994)
at r (/var/task/index.js:1:103453)
at Object.next (/var/task/index.js:1:102788)
at /var/task/index.js:1:102697
name: 'DriverPackageNotInstalledError',
message: 'Mysql package has not been found installed. Try to install
it: npm install mysql --save' }
END RequestId: 671bed10-81b0-11e7-af34-251688cfdd
REPORT RequestId: 671bed10-81b0-11e7-af34-251688cfdd Duration: 8.71
ms Billed Duration: 100 ms Memory Size: 1024 MB Max Memory
Used: 39 MB
My research has led me to believe that it won't package correctly because its a native module. But i'm not sure. If so is there anyway to get native node modules to work with lambda's??
Any help would be much appreciated, thanks.
EDIT
Folder Structure:
deploy
-- dev
---- serverless.yml
---- PROJECT.zip
-- test
---- serverless.yml
---- PROJECT.zip
-- prod
---- serverless.yml
---- PROJECT.zip
node_modules
-- *
---- *
src
-- api
---- User
------ index.ts
-- data
---- User.ts
-- models
---- User.ts
gulpfile.js
index.ts
package.json
tsconfig.json
tslint.json
Gulp file calls a function from aws-lambda-typescript module that has numerous gulp tasks.
const gulp = require('gulp');
const awsLambdaTypescript = require('aws-lambda-typescript');
awsLambdaTypescript.registerBuildGulpTasks(gulp, __dirname);
Gulp packages .zip in a dist folder and then i copy to deploy>dev and then serverless deploy.
Thanks for your help!
I had a similar issue while testing the lambdas using the Serverless framework. I was using TypeORM and Postgres. So instead of mysql package I used the pg package, but got similar error: pg package has not been found installed.
After investigating for sometime I found that while building the code it was not including the pg package. The pg package was used internally and there was no reference of it in my code. So I thought this could be a reason why it is not being included in the build. To test this I added a reference to the pg package in my code by simply adding a console log.
import * as pg from 'pg';
console.log('This is just to add the reference : ', pg);
And it worked.
I think while packaging, the pg/mysql package is being excluded due to tree shaking or some dead code elimination mechanism. So just try to add a reference of the package in your code and see if it works or not.
import * as mysql from 'mysql';
console.log('This is just to add the reference : ', mysql);
I know it's late to answer but I hope this helps someone in future.
Most likely something is wrong with your packaging process. I'd check the following items:
Check your package.json if mysql is there.
Check the zip file inside your .serverless directory to see if it includes your node_modules.
Download the lambda package that you uploaded and again check if node_modules are there.

Importing angular-translate imports an empty object

I'm using JSPM 0.16.42 which uses SystemJS, I've tried both angular-translate and angular-route, both of which are on github endpoints.
However, for both of them angular throws the same error
argument module is not a function
when using them in ES6 syntax as follows:
import AngularRoute from 'angular-route';
angular.module('app', [AngularRoute]);
I'm using babel as a transpiler. The object I get back from the import seems to be empty. Following is the relevant part of my config.js file:
System.config({
baseURL: "/",
defaultJSExtensions: true,
transpiler: "babel",
babelOptions: {
"optional": [
"runtime",
"optimisation.modules.system"
]
},
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
map: {
"angular-route": "github:angular/bower-angular-route#1.5.8",
"angular-translate": "github:angular-translate/bower-angular-translate#2.11.1",
}...
EDIT: When I tried to install angular-translate with an npm endpoint I got the error http://errors.angularjs.org/1.5.8/$injector/unpr?p0=e
on the following line in angular.js
return new ErrorConstructor(message);
which I guess is a bit of progress but still doesn't solve my issue obviously
EDIT#2: I got angular-route to work with the help of #artem by using the npm endpoint, for some reason the github endpoint did not work so I used jspm install npm:angular-route. Further investigation is needed as to why the github package did not work and the npm package did
EDIT#3: I have overriden the package configuration as you can see below, though that didn't help
"npm:angular-translate#2.11.1": {
"format": "global",
"dependencies": {
"angular": ">=1.2.26"
},
"shim": {
"angular-translate": {
"deps": "angular"
}
}
}
I eventually fixed it by installing angular-translate as well as angular-route via their npm endpoints instead of the default (github) endpoints, using
jspm install npm:angular-route
&
jspm install npm:angular-translate -o '{dependencies: { angular: ">=1.2.26" } }'
The override for angular-translate was needed since jspm did not understand the original dependency syntax correctly which was angular: ">= 1.2.26 <=1.6" as described in this github issue
Here is not-so-minimal, not-really-self-contained example for angular-translate with systemjs:
npm install jspm
./node_modules/.bin/jspm install github:angular-translate/angular-translate
keep pressing <ENTER>, accepting all the default values
create file test.js
import AngularTranslate from 'angular-translate/angular-translate';
console.log(AngularTranslate);
create file index.html
<!doctype html>
<html>
<head>
<script src="jspm_packages/system.src.js"></script>
<script src="config.js"></script>
<script>
System.import('./test.js');
</script>
</head>
<body>
</body>
</html>
open it in the browser:
Failed to load resource: the server responded with a status of 404 (File not found)
undefined:1 Uncaught (in promise) Error: (SystemJS) XHR error (404 File not found) loading
http://localhost:8035/jspm_packages/github/angular-translate/angular-translate#2.11.1.js(…)
Why that file isn't there? It's supposed to be created by jspm, if you had installed angular-translate from npm it would have contained
module.exports = require("npm:angular-translate#2.11.1/dist/angular-translate.js");
which is just a redirect from symbolic package name (the name of that .js file) to that package main file, as specified in package.json:
"main": "dist/angular-translate.js",
But angular-translate is from github, there is no dist there. That's why jspm did not create the redirect file - there is nothing to redirect to.
No problem, just build it from the source we got from github:
cd jspm_packages/github/angular-translate/angular-translate#2.11.1/
npm install
npm run-script build
cd ../../../..
and fix mapping in config.js:
map: {
"angular-translate/angular-translate": "github:angular-translate/angular-translate#2.11.1/dist/angular-translate",
open index.html in the browser again:
system.src.js:122 Uncaught (in promise) Error: (SystemJS) angular is not defined(…)
No problem, angular is already installed as angular-translate dependency, just tell systemjs when and how to load it.
add to config.js:
meta: {
"angular-translate/angular-translate": {
"deps": ["angular"]
}
},
map: {
"angular": "github:angular-translate/angular-translate#2.11.1/node_modules/angular/angular",
NOTE: You don't need to specify format for angular-translate. SystemJS auto-detects it correctly - it could be loaded as either 'amd' or 'cjs', but it will not work as 'global'. Also, you probably did not start by installing angular-translate, so you already have angular.js file and mapping in place somewhere.
Open index.html in the browser again. It prints in the console:
pascalprecht.translate
Yes angular-translate exports a string - seems to be typical for angular1 modules.
I have no experience with angular.js, so I declare it a success and stop here.
PS Why angular-route worked when you install it from npm, and did not work from github?
When installed from npm, jspm created a file named jspm_packages/npm/angular-route#1.5.8.js, containing
module.exports = require("npm:angular-route#1.5.8/index.js");
because package.json for angular-route has
"main": "index.js",
which is correct and works for you.
When installed from github, jspm created similar file jspm_packages/github/angular/bower-angular-route#1.5.8.js, but this time it points to a different file
module.exports = require("github:angular/bower-angular-route#1.5.8/angular-route");
because someone put an override in jspm registry there at https://github.com/jspm/registry/blob/master/package-overrides/github/angular/bower-angular-route%401.3.0.json
because bower.json for bower-angular-route has
"main": "./angular-route.js",
Maybe it's an oversight, maybe it's correct and works for them - I don't know.
TL;DR It's not a good idea to use package manager for installing software, if the software was not packaged properly for that package manager.

Polymer starter kit unit testing

I'm trying out polymer-starter-kit for the first time. Using yeoman generator I have scaffolded the basic project. When I run the unit test using Web Component Tester, am getting the following error.
Error: Could not request headers from http://selenium-release.storage.googleapis.com/2.47/IEDriverServer_x64_2.46.0.zip
Following is the stdout when I run gulp test:local
[12:39:44] Using gulpfile
~\tryout\js\polymer\admin-portal-client\gulpfile.js [12:39:44]
Starting 'wct:local'... Starting Selenium server for local browsers
---------- selenium-standalone installation starting
--- selenium install: from: http://selenium-release.storage.googleapis.com/2.47/selenium-server-standalone-2.47.1.jar
to:
C:\Users\ninpv1\tryout\js\polymer\admin-portal-client\node_modules\web-component-tester\node_modules\wct-local\node_modules\selenium-standalone.selenium\se
lenium-server\2.47.1-server.jar
--- chrome install: from: http://chromedriver.storage.googleapis.com/2.16/chromedriver_win32.zip
to:
C:\Users\ninpv1\tryout\js\polymer\admin-portal-client\node_modules\web-component-tester\node_modules\wct-local\node_modules\selenium-standalone.selenium\ch
romedriver\2.16-x64-chromedriver
--- ie install: from: http://selenium-release.storage.googleapis.com/2.47/IEDriverServer_x64_2.46.0.zip
to:
C:\Users\ninpv1\tryout\js\polymer\admin-portal-client\node_modules\web-component-tester\node_modules\wct-local\node_modules\selenium-standalone.selenium\ie
driver\2.46.0-x64-IEDriverServer.exe
--- File from http://chromedriver.storage.googleapis.com/2.16/chromedriver_win32.zip
has already been downloaded
--- File from http://selenium-release.storage.googleapis.com/2.47/selenium-server-standalone-2.47.1.jar
has already been downloaded [12:40:10]
'wct:local' errored after 26 s
[12:40:10] Error: Could not request headers from
http://selenium-release.storage.googleapis.com/2.47/IEDriverServer_x64_2.46.0.zip:
Node version : v0.12.7
npm version : 2.11.3
OS : Windows 7
What could be wrong ?
Because this file http://selenium-release.storage.googleapis.com/2.47/IEDriverServer_x64_2.46.0.zip doesn't exist on that link. Just try to browse it on your browser on all 3 files. You will find this is the only one that doesn't exist. However, http://selenium-release.storage.googleapis.com/2.47/IEDriverServer_x64_2.47.0.zip does exist.
Update: Looks like someone already opened an issue.
https://github.com/Polymer/web-component-tester/issues/206

jasmine-reporters modifySuiteName not work?

I'm using protractor with jasmine-reporters 2.0.7
I tried to use the modifySuiteName option to modify suite names.
This is what in my conf.js:
multiCapabilities: [{
browserName: 'firefox'
}, {
browserName: 'chrome'
}],
onPrepare: function() {
var jasmineReporters = require('jasmine-reporters');
return browser.getProcessedConfig().then(function(config) {
var browserName = config.capabilities.browserName;
jasmine.getEnv().addReporter(
new jasmineReporters.JUnitXmlReporter({
savePath: 'c://scripts',
filePrefix: browserName,
consolidateAll: true,
modifySuiteName: function(generatedSuiteName, suite) {
return browserName+ '.' + generatedSuiteName;}
}));
});
},
I suppose to see
testsuite name="chrome.Demo App"
in chrome.xml
and
testsuite name="firefox.Demo App"
in firefox.xml
But I can only see
testsuite name="Demo App"
in both files.
Is there anything wrong in my code?
Okay now I figure out that my issue is caused by a stupid mistake.
I'm using windows 8 and running cmd under the folder c:\scripts.
I'm so new to nodejs and npm that during the set-up process I used npm install --save-dev jasmine-reporters#^2.0.0 and few days later I used npm install -g jasmine-reporters#latest
So there are 2 jasmine-reporters in my system, one in C:\Users\xxx\AppData\Roaming\npm\node_modules\jasmine-reporters
and another in C:\scripts\node_modules\jasmine-reporters,
with version 2.0.7 and 2.0.0 in package.json, respectively.
I just update my jasmine-reporters in C:\scripts\node_modules to 2.0.7 and the script finally works!
Thanks for your time, I really appreciate it.
As far as i see, there is no fault in your code. If your code is generating chrome and firefox xml's then everything with your configuration should be fine. Your code is working perfectly fine in my protractor. I am using Jasmine 2.3.1 with protractor 2.1.0. Try updating your protractor and jasmine framework to the latest version and then run your test suite. To update your jasmine run the below command -
npm update -g jasmine
Also if you have not added the framework tag after multiCapabilities tag in your conf.js file then you should be doing so as shown below -
framework: 'jasmine2',
Hope this solves your issue.