angular

How to debug an Angular CLI app with the custom webpack builder?

删除回忆录丶 提交于 2021-02-18 19:30:37
问题 I built a repo to expose my issue: https://github.com/franklin626/custom_webpack_undebuggable This Angular CLI app has a custom webpack setup ( webpack.config.js ). It also has a .vscode/launch.json configuration to debug from VS Code upon either ng test (unit tests) or ng serve . I can place breakpoints for my unit tests, but not when running ng serve : In my debug tab in VS Code, I run my "launch Chrome" routine followed by "attach localhost". I place a breakpoint on other.component.ts:14 ,

Materializecss angular 5 dropdown content dynamic generation throws error

ぐ巨炮叔叔 提交于 2021-02-18 19:22:48
问题 When I generate dynamic content with different dropdowns the dropdown throws an error. If I do not generate dynamic dropdown content it works, the problem is with that generation. It throws this error: ERROR TypeError: Cannot set property 'tabIndex' of null html <ul id="content-{{labSystem.system.name}}" class="dropdown-content" *ngFor="let labSystem of nodeLabSystems"> <li> <a href="#!">one</a> </li> </ul> <div class="col s12 m12 l12 xl12 blue-grey lighten-1"> <div id="instrumentStatus">

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory - webpack sample Angular 2

拜拜、爱过 提交于 2021-02-18 19:00:48
问题 I am facing an issue in webpack sample while getting webpack build: FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory package.json "build": "rimraf dist && node_modules\\.bin\\webpack --config config/webpack.prod.js --progress --profile --bail", 回答1: Every single time when i got the same error i managed to solve the issue using the --max_old_space_size option. My guess would be that either --max_old_space_size=4096 is not enough (just use a higher value) or

How to transform array of strings into specific tree structure in Javascript

北战南征 提交于 2021-02-18 18:49:59
问题 I get a list of file paths from the backend, it represents a folder structure and looks like this: paths = ["path/to/file1.doc", "path/to/file2.doc", "foo/bar.doc] The lengths of the paths are arbitrary. In order to use a file tree component (angular2-tree-component) I need to transform this data into the following format: nodes = [ { "name": "path", "children": [ { "name": "to", "children": [ {"name": "file1.doc"}, {"name": "file2.doc"} ] } ] }, { "name": "foo", "children": [ {"name": "bar

Angular 2: Load Component Based on service response

醉酒当歌 提交于 2021-02-18 18:41:08
问题 I have 10 components in my app, while I call Home route I want to load dynamic components base on Home service response. Home page component Code will execute like, Home component - > Call HTTP Service -> returns me list name of array component name [e.g ] -> Now I want to append 2 components in content area Page will render like 回答1: Have you seen the doc about dynamic component loading? It shows how you can dynamically insert components into the DOM. More specifically, there are a few

Angular 2: Load Component Based on service response

倖福魔咒の 提交于 2021-02-18 18:41:05
问题 I have 10 components in my app, while I call Home route I want to load dynamic components base on Home service response. Home page component Code will execute like, Home component - > Call HTTP Service -> returns me list name of array component name [e.g ] -> Now I want to append 2 components in content area Page will render like 回答1: Have you seen the doc about dynamic component loading? It shows how you can dynamically insert components into the DOM. More specifically, there are a few

Include json file in ng-packagr build

别来无恙 提交于 2021-02-18 18:09:45
问题 I want to import json file into my Angular 5 app and then build a lib. I can do the first part by including this code declare module "*.json" { const value: any; export default value; } to typings.d.ts , but when I try to build it it fails with error Cannot find module '../../assets/locale-en.json'. Any way to fix it? 回答1: In the end I just wrote script to convert json file to ts file and added it to script command for packagr build in package.json . package.json scripts: { "packagr": "node .

Inline text editing with Mat-table:

耗尽温柔 提交于 2021-02-18 17:54:26
问题 Does anyone have a good solution to adding inline text editing to a column where you can edit and save and re-edit with mat table like in this example: https://material.io/design/components/data-tables.html#behavior it look like it's still an open issue on gitHub: https://github.com/angular/material2/issues/5982 回答1: inside your matColumnDef you should have a <th></th> and a <td></td> , simply add input to the <td></td> with reactive forms. if you wish it to be practically the same as the

Inline text editing with Mat-table:

五迷三道 提交于 2021-02-18 17:52:08
问题 Does anyone have a good solution to adding inline text editing to a column where you can edit and save and re-edit with mat table like in this example: https://material.io/design/components/data-tables.html#behavior it look like it's still an open issue on gitHub: https://github.com/angular/material2/issues/5982 回答1: inside your matColumnDef you should have a <th></th> and a <td></td> , simply add input to the <td></td> with reactive forms. if you wish it to be practically the same as the

How to Check for a NULL Result from an Angular 5 RxJS Observable during Subscription?

落爺英雄遲暮 提交于 2021-02-18 15:09:25
问题 With RxJS Observables within Angular this.myService.getEmp(personEmpId).subscribe( result => { this.personName = result.person_name; }, error => { console.log("EE:",error); } ); How can I test if my subscription to this service returns a NULL result, i.e. no record was found at all? I tried adding the error part but this did not fire the console message. At the moment, I seem to be getting the following error message: ERROR TypeError: "result is null" 回答1: You can add a filter before