TypeError: _reactNativeLanguages.default.addEventListener is not a function in Jest - unit-testing

I have completed my first react-native app. Now, I want to do unit testing and get code coverage for the whole application using jest. I have used npm packages like i18n-js, react-native-languages.
splash-test.js:
import React from 'react';
import Splash from '../Src/components/authentication/Splash';
import renderer from 'react-test-renderer';
test('renders correctly',()=>{
const tree = renderer.create(
<Splash />
).toJSON();
expect(tree).toMatchSnapshot();
})
env.js:
jest.mock('react-native-languages', () => ({
RNLanguages: {
language: 'en',
languages: ['en'],
},
}));
package.json:
{
"name": "app-name",
"version": "1.0.4",
"private": true,
"rnpm": {
"assets": [
"Src/assets/fonts/"
]
},
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest --coverage --coverageDirectory=output/coverage/jest"
},
"dependencies": {
"i18n-js": "^3.1.0",
"react": "16.6.3",
"react-native": "0.57.8",
"react-native-fast-image-zoom-viewer": "^2.3.0",
"react-native-firebase": "^5.1.1",
"react-native-gifted-chat": "^0.7.2",
"react-native-image-crop-picker": "^0.21.3",
"react-native-image-zoom-viewer": "^2.2.25",
"react-native-languages": "^3.0.1",
"react-native-material-dropdown": "^0.11.1",
"react-native-modal": "^7.0.2",
"react-native-permissions": "^1.1.1",
"react-native-progress": "^3.5.0",
"react-native-restart": "0.0.9",
"react-native-spinkit": "^1.1.1",
"react-native-swiper": "^1.5.14",
"react-native-view-toast": "0.0.1",
"react-navigation": "^3.0.8",
"react-redux": "^6.0.0",
"realm": "^2.22.0",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0",
"rn-fetch-blob": "^0.10.15",
"tipsi-stripe": "^7.1.0"
},
"devDependencies": {
"babel-jest": "^23.6.0",
"jest": "^23.6.0",
"jest-junit": "^6.2.1",
"metro-react-native-babel-preset": "^0.51.0",
"react-test-renderer": "^16.6.3"
},
"jest": {
"preset": "react-native",
"transform": {
"^.+\\.(js)$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
},
"setupFiles": [
"./test/env.js"
],
"coverageReporters": [
"text"
],
"reporters": [
"default",
"jest-junit"
],
"collectCoverageFrom": [
"Src/**/*.{js,jsx}",
"!/node_modules/"
],
"transformIgnorePatterns": [
"node_modules/(?!(react-native|react-native-languages)/)"
]
},
"jest-junit": {
"output": "output/coverage/junit/junit.xml",
"usePathForSuiteName": "true"
}
}
Now, If i give npm test it throws an error as i mentioned in title. Someone tell me how to bypass all the npm modules i have used in the app.
Thanks in advance!

Related

EXPO Error: Fastlane build failed with unknown error

I'm trying to compile my expo development (Not expo go) app, it all works for IOS and android in testing but when i try compiling it for production, only the android compiles successfully the IOS build fails at "Run Fastlane".
I've search and tried different online suggestions but nothing seems to work
has anyone else run into this issue? I've been stuck for days
my error
Build failed: Fastlane build failed with unknown error. See logs for the "Run fastlane" and "Xcode Logs" phases for more information.
Fastlane errors in most cases are not printed at the end of the output, so you may not find any useful information in the last lines of output when looking for an error message.
here is my app.json
{
"expo": {
"name": "myapp",
"scheme": "myapp",
"version": "2.0.0",
"orientation": "portrait",
"icon": "iconIOS.png",
"updates": {
"fallbackToCacheTimeout": 0
},
"assetBundlePatterns": [
"**/*"
],
"plugins": [
[
"react-native-fbsdk-next",
{
"appID": "12",
"clientToken": "12",
"displayName": "12",
"scheme": "12"
}
],
"#react-native-firebase/app",
[
"expo-build-properties",
{
"ios": {
"useFrameworks": "static",
"deploymentTarget": "13.0"
}
}
],
"#react-native-firebase/dynamic-links"
],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "myapp.ai.finance",
"buildNumber": "3",
"use_frameworks": "static",
"googleServicesFile": "./GoogleService-Info.plist",
"associatedDomains": [
"applinks:myapp.site"
],
"infoPlist": {
"NSUserTrackingUsageDescription": "This identifier will be used to deliver personalized ads to you.",
"SKAdNetworkItems": [
{
"SKAdNetworkIdentifier": "v9wttpbfk9.skadnetwork"
},
{
"SKAdNetworkIdentifier": "n38lu8286q.skadnetwork"
}
]
}
},
"android": {
"package": "com.myapp.app",
"googleServicesFile": "./google-services.json",
"versionCode": 3,
"adaptiveIcon": {
"foregroundImage": "./src/assets/icons/myapp.png",
"backgroundColor": "#FFFFFF"
},
"intentFilters": [
{
"action": "VIEW",
"autoVerify": true,
"data": [
{
"scheme": "https",
"host": "*.site.site",
"pathPrefix": "/records"
}
],
"category": [
"BROWSABLE",
"DEFAULT"
]
}
],
"permissions": [
"android.permission.INTERNET"
]
},
"resolutions": {
"#expo/config-plugins": "^5.0.2",
"#expo/prebuild-config": "~5.0.3",
"expo-modules-autolinking": "~1.0.0"
},
"extra": {
"eas": {
"projectId": "id"
}
}
}
}
and here is my package.json
{
"name": "myapp",
"version": "1.0.0",
"scripts": {
"start": "expo start --dev-client",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"dev": "cross-env NODE_OPTIONS='--openssl-legacy-provider' next dev",
"eas-build-pre-install": "npm config set legacy-peer-deps true"
},
"dependencies": {
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#burstware/expo-plaid-link": "^1.0.6",
"#expo/config-plugins": "^5.0.4",
"#expo/dev-server": "^0.1.123",
"#expo/metro-config": "^0.5.1",
"#expo/webpack-config": "^0.17.0",
"#react-native-async-storage/async-storage": "~1.17.3",
"#react-native-community/datetimepicker": "6.2.0",
"#react-native-firebase/app": "^17.0.0",
"#react-native-firebase/dynamic-links": "^17.0.0",
"#react-navigation/bottom-tabs": "^6.4.0",
"#react-navigation/core": "^6.4.1",
"#react-navigation/drawer": "^6.5.0",
"#react-navigation/native": "^6.0.14",
"#react-navigation/native-stack": "^6.9.1",
"#react-navigation/stack": "^6.3.2",
"axios": "^1.1.3",
"cross-env": "^7.0.3",
"expo": "~46.0.19",
"expo-apple-authentication": "~4.3.0",
"expo-auth-session": "~3.7.4",
"expo-build-properties": "~0.3.0",
"expo-dev-client": "^2.0.1",
"expo-device": "~4.3.0",
"expo-linear-gradient": "~11.4.0",
"expo-navigation-bar": "~1.3.0",
"expo-notifications": "~0.16.1",
"expo-random": "~12.3.0",
"expo-splash-screen": "~0.16.2",
"expo-status-bar": "~1.4.0",
"expo-web-browser": "~11.0.0",
"intl": "^1.2.5",
"metro-core": "^0.73.3",
"moment": "^2.29.4",
"node": "^19.6.0",
"react": "18.0.0",
"react-content-loader": "^6.2.0",
"react-dom": "18.0.0",
"react-native": "0.69.6",
"react-native-dotenv": "^3.4.7",
"react-native-event-listeners": "^1.0.7",
"react-native-fbsdk-next": "^11.1.0",
"react-native-gesture-handler": "~2.5.0",
"react-native-modal": "^13.0.1",
"react-native-reanimated": "~2.9.1",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-select-dropdown": "^3.2.1",
"react-native-svg": "12.3.0",
"react-native-svg-charts": "^5.4.0",
"react-native-svg-transformer": "^1.0.0",
"react-native-swipe-list-view": "^3.2.9",
"react-native-vector-icons": "^9.2.0",
"react-native-web": "~0.18.7",
"react-native-web-webview": "^1.0.2",
"react-native-webview": "11.23.0",
"react-redux": "^8.0.5",
"redux": "^4.2.0",
"redux-thunk": "^2.4.2",
"yarn": "^1.22.19"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/react-native": "~0.69.1",
"metro": "^0.73.3",
"typescript": "^4.6.3",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.0",
"webpack-dev-server": "^4.11.1"
},
"private": true
}
eas.json
{
"build": {
"development": {
"developmentClient": true,
"distribution": "internal",
"android": {
"gradleCommand": ":app:assembleDebug"
},
"ios": {
"buildConfiguration": "Debug",
"image": "latest"
}
},
"preview": {
"distribution": "internal"
},
"production": {}
},
"submit": {
"production": {
"ios": {
"appleId": "me#gmail.com",
"ascAppId": "1234",
"appleTeamId": "4321"
}
}
}
}

Error in Amplify installation into existing Vue/Bootstrap project: You may need an appropriate loader to handle this file type

I am trying to install amplify into my vue/bootstrap project. When I add this code as it is instructed in https://docs.amplify.aws/lib/auth/getting-started/q/platform/js#create-authentication-service
import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
I receive this error:
You may need an appropriate loader to handle this file type.
| }
| replaceTraps((oldTraps) => ({
| ...oldTraps,
| get: (target, prop, receiver) => getMethod(target, prop) || oldTraps.get(target, prop, receiver),
| has: (target, prop) => !!getMethod(target, prop) || oldTraps.has(target, prop),
# ./~/#aws-amplify/datastore/lib-esm/storage/adapter/indexeddb.js 76:0-27
# ./~/#aws-amplify/datastore/lib-esm/storage/adapter/getDefaultAdapter/index.js
# ./~/#aws-amplify/datastore/lib-esm/storage/storage.js
# ./~/#aws-amplify/datastore/lib-esm/datastore/datastore.js
# ./~/#aws-amplify/datastore/lib-esm/index.js
# ./~/aws-amplify/lib-esm/index.js
# ./src/main.js
# multi ./build/dev-client ./src/main.js
I think there is problem in my package.json or I am missing something. So here is my package file:
{
"name": "frontend",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"e2e": "node test/e2e/runner.js",
"test": "npm run e2e"
},
"dependencies": {
"#aws-amplify/ui-vue": "^0.2.13",
"aws-amplify": "^3.0.23",
"axios": "^0.19.2",
"bootstrap": "^4.5.2",
"bootstrap-vue": "^2.16.0",
"jquery": "^3.5.1",
"popper.js": "^1.12.9",
"save": "^2.4.0",
"tabletojson": "^2.0.4",
"vue": "^2.6.11",
"vue-router": "^3.0.1"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-plugin-router": "^4.5.3",
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-loader": "^7.1.1",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"babel-register": "^6.22.0",
"chalk": "^2.0.1",
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"cssnano": "^3.10.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.14.1",
"extract-text-webpack-plugin": "^2.0.0",
"file-loader": "^0.11.1",
"friendly-errors-webpack-plugin": "^1.1.3",
"html-webpack-plugin": "^2.28.0",
"http-proxy-middleware": "^0.17.3",
"webpack-bundle-analyzer": "^2.2.1",
"chromedriver": "^2.27.2",
"cross-spawn": "^5.0.1",
"nightwatch": "^0.9.12",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"opn": "^5.1.0",
"optimize-css-assets-webpack-plugin": "^2.0.0",
"ora": "^1.2.0",
"rimraf": "^2.6.0",
"url-loader": "^0.5.8",
"vue-loader": "^13.0.4",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.4.2",
"webpack": "^2.6.1",
"webpack-dev-middleware": "^1.10.0",
"webpack-hot-middleware": "^2.18.0",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
Thank you in advance!
I had the same problem, but I resolved it installing amplify version 1.1.4.
npm install aws-amplify#^1.1.4
I hope it is useful to you.
I'm having THE SAME PROBLEM! I'm also learning VueJS with Academind's Max on Udemy and I'm trying to use Amplify cuz firebase gave me other more confusing errors (he didn't get any and I follow him step by step...)
I hope that someone answers either your or my question for this because I'm really stuck and upset I can't keep practicing now :(

TS default imports with Jest mock

I'm writing tests for react-native with Jest and Typescript, but i'm with a problem when i mock a module that uses export default and export.
my mock is this:
// test.setup.js
jest.mock('react-native-text-input-mask', () => ({
default: 'TextInputMask',
mask: () => {},
unmask: () => {},
}));
but the jest can not use the default e cause error in my code when test is running:
import React, { Component } from 'react'
import { } from 'react-native'
import TextInputMask, { mask } from 'react-native-text-input-mask'
console.log(TextInputMask) // {'default': 'TextInputMask', mask: [Function]}
console.log(mask) // [Function]
export default class Comp extends Component<> {
constructor(props) {
super(props)
}
render(): JSX.Element {
return (
<TextInputMask // error in this line
mask={'[0000]'}
/>
)
}
}
Error in test:
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
How i can mock a module with default export and export ?
my jest config:
// package.json
"devDependencies": {
"#types/fbemitter": "2.0.32",
"#types/jest": "21.1.1",
"#types/prop-types": "15.5.2",
"#types/react": "16.0.9",
"#types/react-intl": "2.3.2",
"#types/react-native": "0.48.9",
"#types/react-navigation": "1.0.20",
"#types/react-redux": "5.0.9",
"#types/react-test-renderer": "15.5.4",
"#types/redux-immutable-state-invariant": "2.0.2",
"#types/redux-mock-store": "0.0.11",
"#types/redux-storage": "4.0.10",
"babel-core": "6.26.0",
"babel-jest": "21.2.0",
"babel-plugin-jest-hoist": "21.2.0",
"babel-plugin-module-resolver": "2.7.1",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-preset-react-native": "4.0.0",
"chai": "4.1.2",
"chai-as-promised": "7.1.1",
"colors": "1.1.2",
"commitizen": "2.9.6",
"cz-conventional-changelog": "2.0.0",
"enzyme": "3.0.0",
"fbemitter": "2.1.1",
"husky": "^0.14.3",
"jest": "21.2.1",
"jest-cli": "21.2.1",
"jest-serializer-enzyme": "1.0.0",
"mocha": "3.5.3",
"plop": "1.9.0",
"prettier": "1.7.3",
"react-addons-test-utils": "15.6.2",
"react-dom": "16.0.0",
"react-native-debugger-open": "0.3.12",
"react-test-renderer": "16.0.0",
"redux-devtools-extension": "2.13.2",
"redux-immutable-state-invariant": "2.1.0",
"redux-mock-store": "1.3.0",
"rimraf": "2.6.2",
"selenium-webdriver": "3.5.0",
"sinon": "4.0.0",
"standard-version": "4.2.0",
"ts-jest": "21.0.1",
"tslint": "5.7.0",
"tslint-config-prettier": "1.5.0",
"tslint-react": "3.2.0",
"typescript": "2.5.3",
"wd": "1.4.1"
},
"jest": {
"preset": "react-native",
"collectCoverage": true,
"collectCoverageFrom": [
"src/**/*.{ts,tsx}",
"!src/**/*.test.{ts,tsx}",
"!src/**/*.d.ts",
"!build/**",
"!**/node_modules/**"
],
"coverageDirectory": "coverage",
"moduleDirectories": [
"node_modules",
"src"
],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__scripts__/assetsTransformer.js",
"^#animations.+\\.(json)$": "<rootDir>/__scripts__/assetsTransformer.js"
},
"moduleFileExtensions": [
"js",
"jsx",
"json",
"ts",
"tsx",
"ios.ts",
"android.ts"
],
"modulePathIgnorePatterns": [
"<rootDir>/build/"
],
"testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"setupFiles": [
"./__scripts__/test-setup.js"
],
"testPathIgnorePatterns": [
"<rootDir>/build/",
"<rootDir>/node_modules/"
],
"transform": {
"^.+\\.js$": "<rootDir>/node_modules/babel-jest",
"^.+\\.tsx?$": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"transformIgnorePatterns": [
"node_modules/(?!react-native|tcomb-form-native|react-navigation|lottie-react-native|jail-monkey|redux-persist/es/storage)"
],
"globals": {
"ts-jest": {
"useBabelrc": true
}
}
},
my TS config:
// tsconfig.json
{
"compilerOptions": {
"target": "es2015",
"module": "es2015",
"jsx": "react-native",
"watch": true,
"allowJs": true,
"sourceMap": true,
"preserveConstEnums": true,
"removeComments": true,
"lib": [
"dom",
"es2017"
],
"diagnostics": false,
"noImplicitAny": false,
"noImplicitUseStrict": false,
"strictNullChecks": false,
"noImplicitThis": false,
"moduleResolution": "node",
"outDir": "./build",
"rootDir": "./src",
"sourceRoot": ".",
"baseUrl": "./src",
"typeRoots": [
"./src/types"
],
"paths": {
"#assets/*": [
"../assets/*"
],
"#animations/*": [
"../animations/*"
]
},
"allowSyntheticDefaultImports": true,
"experimentalDecorators": true
},
"types": [
"react",
"react-native",
"jest"
],
"include": [
"src/**/*"
],
"exclude": [
"index.android.js",
"index.ios.js",
"build",
"app",
"node_modules"
],
"compileOnSave": true
}
I resolve this, creating a mock for the component, like this:
// __mocks__/react-native-text-input-mask.tsx
import React from 'react'
class TextInputMask extends React.Component {
render() {
return null
}
}
const mask = (mask: string, value: string, text: string => {} ) => {}
const unmask = (mask: string, masked: string, unmasked: string => {} ) => {}
const setMask = (node: any, mask: string) => {}
export { mask, unmask, setMask }
export default TextInputMask

Test suite failed to run.ReferenceError: __DEV__ is not defined

Please check my Package.json cause I am unable to find the fault with this. Non of the previous issues in Stackoverflow could helped me
React Native - __DEV__ is not defined
ReferenceError: Can't find variable: __DEV__enter link description here
{
"name": "mobility1",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"mocha": "BABEL_ENV=mocha mocha --require mocha-setup.js --compilers js:babel-core/register --recursive __tests__/mocha",
"mocha:watch": "./mocha.runner.sh",
"test": "jest",
"build:android": "node node_modules/react-native/local-cli/cli.js bundle --entry-file='index.android.js' --bundle-output='./android/app/src/main/assets/index.android.bundle' --dev=false --platform='android' --assets-dest='./android/app/src/main/res/'",
"build:ios": "node node_modules/react-native/local-cli/cli.js bundle --entry-file='index.ios.js' --bundle-output='./ios/ShootstaCue/main.jsbundle' --dev=false --platform='ios' --assets-dest='./ios'"
},
"dependencies": {
"react": "~15.4.0-rc.4",
"react-native": "0.40.0",
"react-native-animatable": "^1.1.0",
"react-native-camera": "^0.6.0",
"react-native-drawer": "^2.3.0",
"react-native-linear-gradient": "^2.0.0",
"react-native-scrollable-tab-view": "^0.7.2",
"react-native-vector-icons": "^4.0.0",
"react-redux": "^5.0.4",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-observable": "^0.14.1",
"redux-persist": "^4.1.0",
"redux-thunk": "^2.2.0",
"reselect": "^2.5.4",
"rxjs": "^5.2.0"
},
"devDependencies": {
"babel-jest": "^20.0.3",
"babel-preset-react-native": "^1.9.2",
"chai": "^3.5.0",
"enzyme": "^2.8.2",
"jest": "^20.0.3",
"jest-react-native": "^18.0.0",
"mocha": "^3.4.1",
"react-addons-test-utils": "15.4.2",
"react-test-renderer": "^15.4.2",
"regenerator-runtime": "^0.10.5",
"remote-redux-devtools": "^0.5.7"
},
"jest": {
"haste": {
"defaultPlatform": "ios",
"platforms": [
"ios",
"android"
],
"providesModuleNodeModules": [
"react-native"
]
}
}
}
I had the same issue, changing jest: {....} to
"jest": {
"preset": "react-native"
},

Angular2 2.4.3 with Angular-CLI 1.0.0-beta.25.5, after upgrade unit tests with karma/jasmine stops working

Recently I updated Angular from 2.0.3 to 2.4.3 and Angular-CLI from 1.0.0-beta.21 to 1.0.0-beta.25.5
After upgrade my unit tests stop working. Below you can find test file, configuration files and test results. Do you have any idea what can be wrong with it? Thanks
test result
$ npm test -- --watch=false
> portal#0.0.0 test /Users/artur/Sites/portal
> ng test "--watch=false"
19 01 2017 08:22:52.703:WARN [karma]: Port 9879 in use
19 01 2017 08:22:52.705:INFO [karma]: Karma v1.4.0 server started at http://0.0.0.0:9880/
19 01 2017 08:22:52.705:INFO [launcher]: Launching browser Chrome with unlimited concurrency
19 01 2017 08:22:52.726:INFO [launcher]: Starting browser Chrome
19 01 2017 08:22:55.619:INFO [Chrome 55.0.2883 (Mac OS X 10.12.2)]: Connected on socket XIi2HWa92rY4uvNvAAAA with id 35735618
Chrome 55.0.2883 (Mac OS X 10.12.2): Executed 0 of 0 ERROR (0.004 secs / 0 secs)
npm ERR! Test failed. See above for more details.
banner.component.spec.ts
/* tslint:disable:no-unused-variable */
import { Component } from '#angular/core';
import { TestBed, async } from '#angular/core/testing';
import { BannerComponent } from './banner.component';
import { RouterTestingModule } from '#angular/router/testing';
#Component({
template: ''
})
class DummyComponent {}
describe('Component: Banner', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
DummyComponent,
BannerComponent
],
imports: [
RouterTestingModule.withRoutes([
{ path: '', component: DummyComponent }
])
],
providers: []
});
});
it('should create an instance', async(() => {
let fixture = TestBed.createComponent(BannerComponent);
let component = fixture.debugElement.componentInstance;
expect(component).toBeTruthy();
}));
});
banner.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-banner',
templateUrl: './banner.component.html',
styleUrls: ['./banner.component.scss'],
styles: [".banner >>> lp-svg svg path { fill: #fcfcfc; }"]
})
export class BannerComponent {}
package.json
{
"name": "portal",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ngc": "./node_modules/.bin/ngc -p ./src",
"start": "./node_modules/.bin/ng serve --host 0.0.0.0 --port 4000",
"build.dev": "./node_modules/.bin/ng build --bh /portal/",
"build.dev.watch": "./node_modules/.bin/ng build --bh /portal/ --watch true",
"build.prod": "./node_modules/.bin/ng build --bh /portal/ --prod --env=prod",
"build.prod.watch": "./node_modules/.bin/ng build --bh /portal/ --prod --env=prod",
"serve.prod": "node lp-server.js",
"lint": "tslint \"src/**/*.ts\"",
"test": "./node_modules/.bin/ng test",
"e2e": "./protractor.sh",
"copy.support-page": "./node_modules/.bin/copyfiles -u 1 ./src/support.html ./dist"
},
"private": true,
"dependencies": {
"#angular/common": "^2.4.3",
"#angular/compiler": "^2.4.3",
"#angular/compiler-cli": "^2.4.3",
"#angular/core": "^2.4.3",
"#angular/forms": "^2.4.3",
"#angular/http": "^2.4.3",
"#angular/platform-browser": "^2.4.3",
"#angular/platform-browser-dynamic": "^2.4.3",
"#angular/platform-server": "^2.4.3",
"#angular/router": "^3.4.3",
"copyfiles": "1.0.0",
"core-js": "2.4.1",
"jquery": "2.2.3",
"perfect-scrollbar": "~0.6.10",
"rxjs": "^5.0.3",
"ts-helpers": "1.1.1",
"typescript": "2.0.2",
"underscore": "1.8.3",
"zone.js": "0.6.23"
},
"devDependencies": {
"#types/jasmine": "^2.5.41",
"angular-cli": "^1.0.0-beta.25.5",
"codelyzer": "^2.0.0-beta.4",
"jasmine-core": "^2.5.2",
"jasmine-spec-reporter": "^3.2.0",
"karma": "^1.4.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.0",
"karma-mocha-reporter": "^2.2.1",
"karma-phantomjs-launcher": "^1.0.2",
"karma-remap-istanbul": "^0.4.0",
"live-server": "1.1.0",
"protractor": "^5.0.0",
"ts-node": "1.2.1",
"tslint": "3.13.0"
}
}
karma.conf.js
// Karma configuration file, see link for more information
// https://karma-runner.github.io/0.13/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', 'angular-cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-phantomjs-launcher'),
require('karma-remap-istanbul'),
require('angular-cli/plugins/karma'),
require('karma-mocha-reporter')
],
files: [
{ pattern: 'src/test.ts', watched: false },
{ pattern: 'src/assets/img/*', watched: false, included: false, served: true, nocache: false }
],
proxies: {
'/portal/assets/img/': '/base/src/assets/img/'
},
preprocessors: {
'./src/test.ts': ['angular-cli']
},
remapIstanbulReporter: {
reports: {
html: 'coverage',
lcovonly: './coverage/coverage.lcov'
}
},
angularCli: {
config: './angular-cli.json',
environment: 'dev'
},
reporters: config.angularCli && config.angularCli.codeCoverage
? ['progress', 'karma-remap-istanbul']
: ['progress'],
port: 9879,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
browserConsoleLogOptions: {
level: 'debug',
format: '%b %T: %m',
terminal: true
},
customLaunchers: {
'PhantomJS_custom': {
base: 'PhantomJS',
options: {
windowName: 'my-window',
settings: {
webSecurityEnabled: false
},
},
flags: ['--load-images=true'],
debug: true
}
},
phantomjsLauncher: {
// Have phantomjs exit if a ResourceError is encountered (useful if karma exits without killing phantom)
exitOnResourceError: true
}
});
};
angular-cli.json
{
"project": {
"version": "1.0.0-beta.25.5",
"name": "ui-lender-portal-v2"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets"],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "lp",
"mobile": false,
"styles": [
"styles.scss",
"../node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css"
],
"scripts": [
"../node_modules/underscore/underscore.js",
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.js",
"./libs/jquery-ui/jquery-ui.min.js",
"./libs/jquery-mobile/jquery.mobile.custom.min.js",
"./libs/slick/slick.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
Finally I created new project with Angular-CLI and copied source files from my project. This helps.