Recent Entries 4
- pattern critical 112d agoAngular 4 HttpClient Query ParametersI have been looking for a way to pass query parameters into an API call with the new `HttpClientModule`'s `HttpClient` and have yet to find a solution. With the old `Http` module you would write something like this. `getNamespaceLogs(logNamespace) { // Setup log namespace query parameter let params = new URLSearchParams(); params.set('logNamespace', logNamespace); this._Http.get(`${API_URL}/api/v1/data/logs`, { search: params }) } ` This would result in an API call to the following URL: `localhost:3001/api/v1/data/logs?logNamespace=somelogsnamespace` However, the new `HttpClient` `get()` method doesn't have a `search` property, so I am wondering where to pass in the query parameters?
- pattern critical 112d agoImporting lodash into angular2 + typescript applicationI am having a hard time trying to get the lodash modules imported. I've setup my project using npm+gulp, and keep hitting the same wall. I've tried the regular lodash, but also lodash-es. The lodash npm package: (has an index.js file in the package root folder) ``` import * as _ from 'lodash'; ``` Results in: ``` error TS2307: Cannot find module 'lodash'. ``` The lodash-es npm package: (has a default export in lodash.js i the package root folder) ``` import * as _ from 'lodash-es/lodash'; ``` Results in: ``` error TS2307: Cannot find module 'lodash-es'. ``` Both the gulp task and webstorm report the same issue. Funny fact, this returns no error: ``` import 'lodash-es/lodash'; ``` ... but of course there is no "_" ... My tsconfig.json file: ``` { "compilerOptions": { "target": "es5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": false, "noImplicitAny": false }, "exclude": [ "node_modules" ] } ``` My gulpfile.js: ``` var gulp = require('gulp'), ts = require('gulp-typescript'), uglify = require('gulp-uglify'), sourcemaps = require('gulp-sourcemaps'), tsPath = 'app/**/*.ts'; gulp.task('ts', function () { var tscConfig = require('./tsconfig.json'); gulp.src([tsPath]) .pipe(sourcemaps.init()) .pipe(ts(tscConfig.compilerOptions)) .pipe(sourcemaps.write('./../js')); }); gulp.task('watch', function() { gulp.watch([tsPath], ['ts']); }); gulp.task('default', ['ts', 'watch']); ``` If I understood correctly, moduleResolution:'node' in my tsconfig should point the import statements to the node_modules folder, where lodash and lodash-es are installed. I've also tried lots of different ways to import: absolute paths, relative paths, but nothing seems to work. Any ideas? If necessary I can provide a small zip file to illustrate the problem.
- pattern critical 112d agoCan't perform a React state update on an unmounted componentProblem I am writing an application in React and was unable to avoid a super common pitfall, which is calling `setState(...)` after `componentWillUnmount(...)`. I looked very carefully at my code and tried to put some guarding clauses in place, but the problem persisted and I am still observing the warning. Therefore, I've got two questions: - How do I figure out from the stack trace, which particular component and event handler or lifecycle hook is responsible for the rule violation? - Well, how to fix the problem itself, because my code was written with this pitfall in mind and is already trying to prevent it, but some underlying component's still generating the warning. Browser console ``` Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method. in TextLayerInternal (created by Context.Consumer) in TextLayer (created by PageInternal) index.js:1446 d/console[e] index.js:1446 warningWithoutStack react-dom.development.js:520 warnAboutUpdateOnUnmounted react-dom.development.js:18238 scheduleWork react-dom.development.js:19684 enqueueSetState react-dom.development.js:12936 ./node_modules/react/cjs/react.development.js/Component.prototype.setState react.development.js:356 _callee$ TextLayer.js:97 tryCatch runtime.js:63 invoke runtime.js:282 defineIteratorMethods/</prototype[method] runtime.js:116 asyncGeneratorStep asyncToGenerator.js:3 _throw asyncToGenerator.js:29 ``` Code Book.tsx ``` import { throttle } from 'lodash'; import * as React from 'react'; import { AutoWidthPdf } from '../shared/AutoWidthPdf'; import BookCommandPanel from '../shared/BookCommandPanel'; import BookTextPath from '../static/pdf/sde.pdf'; import './Book.css'; const DEFAULT_WIDTH = 140; class Book extends React.Component { setDivSizeThrottleable: () => void; pdfWrapper: HTMLDivElement | null = null;
- pattern critical 112d agoDifferences between Lodash and Underscore.jsWhy would someone prefer either the Lodash or Underscore.js utility library over the other? Lodash seems to be a drop-in replacement for underscore, the latter having been around longer. I think both are brilliant, but I do not know enough about how they work to make an educated comparison, and I would like to know more about the differences.