When I start my app it displays an error . All the working of highcharts are worked means 2d as well as 3-d. I able to design 2d as well as 3d-charts, but problem is that this error prints in console.
GET http://localhost:4200/node_modules/highcharts-3d/index.js net::ERR_ABORTED 404 (Not Found)
In app.module.ts:
import { HighchartsChartModule } from 'highcharts-angular';
In component: import * as Highcharts from 'highcharts';
In package.json: "highcharts": "^8.1.2", "highcharts-3d": "^0.1.7", "highcharts-angular": "^2.7.0",
In package-lock.json: "highcharts": { "version": "8.1.2", "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-8.1.2.tgz", "integrity": "sha512-Q124Lj+2+bVY2MKMd7d8uSVAmhZVzWgknUUzUBEC27S94dCyK6PBgahuwiMP/ET4w7qSFBBi4OC77ZUb0Vnuyg==" }, "highcharts-3d": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/highcharts-3d/-/highcharts-3d-0.1.7.tgz", "integrity": "sha1-tRqPhw2Qe0BjWuOetz1F7bkKkfs=" }, "highcharts-angular": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/highcharts-angular/-/highcharts-angular-2.7.0.tgz", "integrity": "sha512-UXH7b+3QfGrsaKGdQ+QvgTVc3sP1LUjKtQWS8CcnKagySLUC/62RiZ3s2IPNwpqkJAedop+6GbV19MNyUUPfFA==", "requires": { "tslib": "^1.10.0" },
Any suggestion will help me. Thanks in advance.
Related
I'm new in TS & angular. Now I have a legacy playwright project, which I'd like to use ngx-logger for logging.
According to many ngx-logger tutorials, I know there might be 3 steps to integrate:
install ngx-logger
npm install --save ngx-logger
import the library in the root module, i.e., app.module.ts
import { LoggerModule, NgxLoggerLevel } from 'ngx-logger';
import LoggerModule.forRoot in your application module. This is where we can configure the logger:
#NgModule({
imports: [
BrowserModule,
HttpClientModule,
LoggerModule.forRoot({
serverLoggingUrl: 'http://localhost:4201/', // Replace with YOUR API
level: NgxLoggerLevel.TRACE,
serverLogLevel: NgxLoggerLevel.ERROR,
disableConsoleLogging: false
})
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
So finally, we can start logging anywhere in the application:
export class AppComponent {
constructor(private logger: NGXLogger) {
this.logger.debug("Debug message");
this.logger.info("Info message");
this.logger.log("Default log message");
this.logger.warn("Warning message");
this.logger.error("Error message");
}
}
However, I'm stuck in step 2&3, because I don't know where to setup these in a playwright project.
In my playwright project, I only have config files like:
~/playwright.config.ts
~/src/config/launch.config.ts
~/src/config/testrunner.config.ts
none of them contains #NgModule I could inject the codes.
Can anyone give me some hints with how to proceed?
Thank in advance.
package.json
{
"name": "portal-test",
"version": "0.0.0",
"private": true,
"description": "Portal Test Automation Suite",
"homepage": "./",
"dependencies": {
"dotenv": "^16.0.0",
"eml-parser": "^1.0.6",
"expect-playwright": "^0.7.1",
"moment": "^2.29.4",
"ngx-logger": "^5.0.11",
"npm": "^7.19.1",
"path": "^0.12.7",
"pdf.js-extract": "^0.1.5",
"pdfreader": "^1.2.11",
"playwright-core": "^1.15.2",
"request-promise": "^4.2.6",
"ts-node": "^10.3.0",
"typescript": "^4.4.3",
"yarn": "^1.22.10"
},
"scripts": {
"compile": "npx tsc --incremental -p tsconfig.json",
"test": "CI_TEST_ENV=uat npx playwright test --config=src/config/testrunner.config.ts --headed",
"test-local": "CI_TEST_ENV=local npx playwright test --config=src/config/testrunner.config.ts --headed",
"test-local-headless": "CI_TEST_ENV=local npx playwright test --config=src/config/testrunner.config.ts",
"test-dev": "CI_TEST_ENV=dev npx playwright test --config=src/config/testrunner.config.ts --headed",
"test-uat": "CI_TEST_ENV=uat npx playwright test --config=src/config/testrunner.config.ts --headed"
},
"devDependencies": {
"#playwright/test": "^1.28.1",
"playwright": "^1.15.2"
},
"extends": []
}
I have been following a tutorial (https://github.com/fullstackreact/food-lookup-demo-rails) to set up a react front end and rails back end. The tutorial itself works fine. However, when I deviate and try some of my own code, things don't work out at all. My deviations are that I am using a different controller and model. However, I have copied everything else from the tutorial.
When I fetch from my local rails api, then I get back the public/index.html file located in the react folder. When I fetch a random api, like:
https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty
then the api is properly consumed and it's json.
When I query the back end by just visiting localhost:3000/api/stories, I get a json output.
Below is the App.js file for React
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
componentDidMount() {
fetch("/api/stories")
// .then(response => response.json())
.then(res => res.json())
.then(json => console.log(json))
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
Here is the controller for the stories api
class StoriesController < ApplicationController
def index
#stories = Story.limit(2)
render(
status: 200,
json: #stories.to_json
)
end
end
following is the package.json, to show that I set the proxy route correctly:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-scripts": "3.4.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"proxy": "http://localhost:3001/"
}
}
thank you for any insights
Base on the tutorial you provide, you should host your API server at localhost:3001. You can check the readme for more information.
I'm trying to install packery-mode with bower. I have this bower.json:
"dependencies": {
"isotope": "^3.0.4",
"isotope-packery": "^2.0.0"
},
"overrides": {
"isotope": {
"main": [
"./dist/isotope.pkgd.js"
],
"dependencies": {}
},
"isotope-packery": {
"main": [
".packery-mode.pkgd.js"
],
"dependencies": {}
},
}
}
And the isotope init:
var $grid = $('.grid').isotope({
layoutMode: 'packery',
itemSelector: '.post'
});
I get an Uncaught Error: No layout mode: packery in the console. Why? packery-mode is present in the main.js (masonry layout works fine).
There was just a typo: missing slash in overrides.
".packery-mode.pkgd.js"
instead
"./packery-mode.pkgd.js"
Sorry for the noise
I'm working an on an Ionic 2 project and my front end code renders as I would expect it on Android and web but by all accounts nothing renders correctly on iOS.
I'm using Xcode 8.0 with an iPhone 6 version 9.3.4 and Mac version 10.12
package.json
{
"name": "ionic-hello-world",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "2.1.1",
"#angular/compiler": "2.1.1",
"#angular/compiler-cli": "2.1.1",
"#angular/core": "2.1.1",
"#angular/forms": "2.1.1",
"#angular/http": "2.1.1",
"#angular/platform-browser": "2.1.1",
"#angular/platform-browser-dynamic": "2.1.1",
"#angular/platform-server": "2.1.1",
"#ionic/storage": "1.1.6",
"#types/parse": "^1.2.32",
"ionic-angular": "2.0.0-rc.4",
"ionic-native": "2.2.11",
"ionicons": "3.0.0",
"rxjs": "5.0.0-beta.12",
"underscore": "^1.8.3",
"moment": "2.10.3",
"sweetalert": "1.1.3",
"zone.js": "0.6.26"
},
"devDependencies": {
"#ionic/app-scripts": "0.0.47",
"typescript": "2.0.9"
},
"cordovaPlugins": [
"cordova-plugin-device",
"cordova-plugin-console",
"cordova-plugin-whitelist",
"cordova-plugin-splashscreen",
"cordova-plugin-statusbar",
"ionic-plugin-keyboard",
"cordova-plugin-facebook4",
"cordova-plugin-nativestorage",
"parse-push-plugin"
],
"cordovaPlatforms": [
"ios",
{
"platform": "ios",
"version": "",
"locator": "ios"
}
],
"description": "CPM: An Ionic project"
}
directory.html
<ion-header class="opaque">
<ion-navbar no-border-bottom>
<ion-title class="navtitle">Directory</ion-title>
</ion-navbar>
<ion-toolbar class ="customtoolbar">
<ion-grid>
<ion-row>
<ion-segment value="filters" *ngFor="let personType of ageGender">
<ion-segment-button value="personType" >{{personType}}</ion-segment-button>
</ion-segment>
</ion-row>
</ion-grid>
</ion-toolbar>
</ion-header>
<ion-content fullscreen class="card-background-page">
<ion-list no-lines >
<ion-item *ngFor="let offer of displayOffers">
<ion-thumbnail item-left>
<img src="{{offer.get('logo')._url}}">
</ion-thumbnail>
<ion-grid>
<ion-row>
<ion-col>
<button class="listButton">Details</button>
</ion-col>
</ion-row>
</ion-grid>
<button ion-button clear item-right>{{offer.get("cashBackPercent")| percent}}</button>
</ion-item>
</ion-list>
</ion-content>
directory.ts
import { Component } from '#angular/core';
import { Parse } from 'parse-js-sdk';
import { DataService } from '../../services/dataService';
#Component({
selector: 'directory',
templateUrl: 'directory.html'
})
export class Directory {
displayOffers: any[];
ageGender: any = ["Women", "Men", "Children"];
constructor(public dataService: DataService) {}
ionViewDidLoad() {
var self = this;
this.dataService.directoryOffers().then(function(offers){
self.displayOffers = offers;
})
}
}
dataService.ts
import { Injectable } from '#angular/core';
import { Parse } from 'parse-js-sdk';
#Injectable()
export class DataService {
constructor() {
}
directoryOffers(): any{
var Offers = Parse.Object.extend("Offer");
var offerQuery = new Parse.Query(Offers);
offerQuery.equalTo("hasContract", true);
offerQuery.notEqualTo("canceled", true);
offerQuery.greaterThanOrEqualTo("untilDate", new Date());
offerQuery.include('vendor');
offerQuery.exists('logo');//display no offers that lack logos!
return offerQuery.find();
}
}
This is how it looks on web/Android:
Here is what you see on iOS:
After 10 hour of work I'm pretty certain that iOS doesn't like the change in scope represented by 'self' instead of 'this' within the query promise. Because of this I'm unable to render the data on the client.
The query returns an A+ promise and as far as I know, there is no way to resolve the promise so that the query result stands outside of the promise so that we can use 'this'. I could be totally wrong but I saw nothing in the 'Promise Resolution Procedure' that indicated otherwise.
There was a problem with the polyfills and Angular 2 being recognized on the iOS web browser.
For newbies, I'll be detailed in my answer.
First find the iOS console log:
1) Open Safari
2) Load (play button) the app via Xcode
3) Go to the develop menu
4) Select your device
5) Right before the app finishes loading you will see an option to go to your app. Do so.
From the hints in the logs I found the real error. After a search I added:
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>
to the head of my index.html above
<script src="cordova.js"></script>.
this is my Component
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'homeView',
templateUrl: '/home/home'
})
export class HomeViewComponent implements OnInit {
ngOnInit(): void {}
}
I am using AngularJS 2 with TypeScript 1.8.5 and trying to create component that will load template from Controller Action.
I am getting this error
main.bundle.js:667 Uncaught Error: Cannot find module ".//home/home"
I also tried it with home/home, the error is almost the same
main.bundle.js:667 Uncaught Error: Cannot find module "./home/home"
Error is not compile time error however - it pops up in browser console when page and the component is being loaded
So as you can see i dont want to load static template like home.template.html - that is working correctly. I want to load an HTML template from asp.net MVC Controller Action. I am not even hitting the debug point in the HomeController Home action.
Is there any way to make this work ? Seems like Angular keeps inserting this './' sign. Is there a way to configure this ? I ve read several tutorials on angular2 + mvc and it seems that this should be possible, but for some reason its not working for me.
My app.routes.ts
import {Routes} from "#angular/router";
import {MainViewComponent} from "../views/main-view/main-view.component";
import {MinorViewComponent} from "../views/minor-view/minor-view.component";
import {HomeViewComponent} from "../views/home-view/home-view.component";
export const ROUTES:Routes = [
// Main redirect
{ path: '', redirectTo: 'mainView', pathMatch: 'full'},
// App views
{path: 'mainView', component: MainViewComponent},
{path: 'minorView', component: MinorViewComponent},
{path: 'homeView', component: HomeViewComponent}
// Handle all other routes
//{path: '**', component: MainViewComponent }
];
app.module.ts
#NgModule({
declarations: [AppComponent],
imports : [
// Angular modules
BrowserModule,
HttpModule,
// Views
MainViewModule,
MinorViewModule,
// Modules
NavigationModule,
FooterModule,
TopnavbarModule,
RouterModule.forRoot(Approutes.ROUTES)
],
providers : [{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap : [AppComponent]
})
export class AppModule {}
EDIT : Some more info :
packages.json
{
"name": "inspinia_angular2_starter",
"version": "1.0.0",
"description": "Inspinia Admin Theme",
"repository": "https://wrapbootstrap.com/theme/inspinia-responsive-admin-theme-WB0R5L90S",
"scripts": {
"typings-install": "typings install",
"postinstall": "npm run typings-install",
"build": "webpack --inline --colors --progress --display-error-details --display-cached",
"server": "webpack-dev-server --inline --colors --progress --display-error-details --display-cached --port 3000 --content-base src",
"start": "npm run server"
},
"dependencies": {
"#angular/common": "2.0.0",
"#angular/compiler": "2.0.0",
"#angular/core": "2.0.0",
"#angular/forms": "2.0.0",
"#angular/http": "2.0.0",
"#angular/platform-browser": "2.0.0",
"#angular/platform-browser-dynamic": "2.0.0",
"#angular/router": "3.0.0",
"#angular/upgrade": "2.0.0",
"angular2-in-memory-web-api": "0.0.20",
"animate.css": "3.1.1",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.6.1",
"ie-shim": "^0.1.0",
"jquery": "^3.1.0",
"metismenu": "^2.5.0",
"pace": "0.0.4",
"pace-progress": "^1.0.2",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.27",
"typings": "^1.3.2",
"zone.js": "^0.6.23"
},
"devDependencies": {
"angular2-template-loader": "^0.4.0",
"awesome-typescript-loader": "^1.1.1",
"bootstrap-webpack": "0.0.5",
"css-loader": "^0.23.1",
"exports-loader": "^0.6.3",
"expose-loader": "^0.7.1",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"imports-loader": "^0.6.5",
"raw-loader": "^0.5.1",
"style-loader": "^0.13.1",
"to-string-loader": "^1.1.4",
"typescript": "~1.8.5",
"url-loader": "^0.5.7",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0",
"webpack-merge": "^0.8.4"
}
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"outDir": "dist",
"rootDir": ".",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node"
},
"exclude": [
"node_modules",
"bower_components"
],
"awesomeTypescriptLoaderOptions": {
"useWebpackText": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
App is built using webpack
main.browser.ts
import {platformBrowserDynamic} from "#angular/platform-browser-dynamic";
import {AppModule} from "../src/app/app.module";
/*
* Bootstrap Angular app with a top level NgModule
*/
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
So, after what seemed like an eternity I finally got the the bottom of this.
The problem was in webpack using angular2-template-loader.
This module is responsible for inlining html template. In other words, it will do a require (using your templateUrl) behind the scenes on the template tag of your component. This, of course, breaks the functionality if you are using actual URLs as templateUrl and not PATHs, therefore the template is not there.
Based on what i read, it seems like the authors wont support this in the future. (If template is not found -> try to load it from URL)
More info here - https://github.com/angular/angular-cli/issues/1605
So, basically I just removed this component from config file :
webpack.config.js
BEFORE
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.css$/,
loader:
AFTER
module: {
loaders: [
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader']
},
{
test: /\.css$/,
loader: