Where communities thrive

  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
Repo info
  • Feb 23 2020 00:49
    qdouble removed as member
  • Feb 23 2020 00:49
    govi2010 removed as member
  • Feb 23 2020 00:49
    lanovoy removed as member
  • Feb 23 2020 00:49
    d3viant0ne removed as member
  • Feb 23 2020 00:49
    shlomiassaf removed as member
  • Feb 23 2020 00:49
    mastertinner removed as member
  • Feb 23 2020 00:49
    colinskow removed as member
  • Feb 23 2020 00:49
    matthewdenobrega removed as member
  • Feb 23 2020 00:49
    dotcs removed as member
  • Feb 23 2020 00:49
    DanWahlin removed as member
  • Feb 23 2020 00:49
    Foxandxss removed as member
  • Feb 23 2020 00:49
    niieani removed as member
  • Feb 23 2020 00:49
    katallaxie removed as member
  • Feb 23 2020 00:49
    kentcdodds removed as member
  • Feb 23 2020 00:49
    jeffbcross removed as member
  • Feb 23 2020 00:49
    jimthedev removed as member
  • Feb 23 2020 00:49
    carlosliu removed as member
  • Feb 23 2020 00:41
    PatrickJS commented #1686
  • Feb 22 2020 22:23
    kamil-kielczewski commented #1686
  • Feb 22 2020 22:23
    kamil-kielczewski commented #1686
I'm building my project using your starter project. I'd like to ask you for how to integrate future changes into my project repository. How should I clone or fork or whichever action in order to keep updated my project with yours? I hope I've explained so well.
Robin Bank
Does this starter pack support bundling multi page apps. It was working great with Angular4/Aot but now that ngcwebpack proxies ngTools, does that mean you can only pass in a single entry point (in the starter it passes 'entry.main')
Thuyet Le Van

Hi All, i'm trying build a tree menu and render it to view. bellow my code

this.menu = this.renderTreeMenu(data)

private renderTreeMenu(data: []) {
    let html = "";
    html += '<ul>';
    for (let i = 0; i < data.length; i++) {
        let element = data[i];
        html += '<li><a (click)="handleClick()">' + data[i].name + '</a>';
        if (data[i].children && data[i].children.length > 0) {
            html += this.renderTreeMenu(data[i].children)
        html += '</li>';
    html += '</ul>';

    return html;


pls for me ask, how can i handle binding event click for this case?

Tony Xavier
Please suggest a good customizable Angular 2 Calculator plugin ?
Michael Lehmann
Does the current version of angular2-webpack-starter work together with Clarity ?


  • using the below example, I am trying to implement appDyanmics in my code.
  • but for some reason its not going inside constructor code constructor(public appRoutes:Router) {
  • I kept debugger and saw in the if statement still it didnt go inside.
  • can you tell me how to fix it.
  • providing my code below

import { ModuleWithProviders, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Router, Event, NavigationStart, NavigationEnd } from '@angular/router';
import { Base } from './components/base/base';
import { LoadingMain } from './components/Loading/Loadingmain';
import { LoadingsWithoutFOXinfo } from './components/Loading/Loadings-without-FOXinfo';
import { LoadingsWithoutEpisodes } from './components/Loading/Loadings-without-episodes';
import { LoadingsWithoutFormat } from './components/Loading/Loadings-without-format';
import { LoadingsWithOverlaps } from './components/Loading/Loadings-with-overlaps';
import { AiringFOXInfoPopup } from './components/Loading/airing-FOXinfo-popup';

import { Listings } from './components/listings/listings';

import { ScoringsMain } from './components/Scorings/ScoringsMain';
import { ScoringFOXTBA } from './components/Scorings/ScoringFOXTBA';
import { ScoringBallChange } from './components/Scorings/ScoringBallChange';
import { ScoringOnAirOperations } from './components/Scorings/ScoringOnAirOperations';
import { ScoringVDS } from './components/Scorings/ScoringVDS';
import { ScoringBookedNotBooked } from './components/Scorings/ScoringBookedNotBooked';
import { ScoringOriginalRepeat } from './components/Scorings/ScoringOriginalRepeat';
import { ScoringNPSC } from './components/Scorings/ScoringNPSC';
import { phoneManagement } from './components/phone/phone-maintenance';

const appRoutes: Routes = [
path: '',
redirectTo: 'jumping',
pathMatch: 'full'

    path: 'FlyingManagement',
    component: FlyingsHeader,
    children: [
        { path: '', redirectTo: 'FlyingSearch', pathMatch: 'full' },
        { path: 'FlyingSearch', component: FlyingSearch },
            path: 'FlyingMain/:id', component: FlyingMain,
            children: [
                { path: '', redirectTo: 'Base', component: FlyingCreateFill, pathMatch: 'full' },
                { path: 'FlyingCreateFill', component: FlyingCreateFill, canDeactivate: [CanDeactivateGuard] },
                { path: 'FlyingRights', component: FlyingRights, canDeactivate: [CanDeactivateGuard] },
                { path: 'FlyingDeliverySpecs', component: FlyingDeliverySpecs, canDeactivate: [CanDeactivateGuard] },
                { path: 'FlyingDocuments', component: FlyingDocuments, canDeactivate: [CanDeactivateGuard] },
                { path: 'FlyingAllocation', component: FlyingAllocation, canDeactivate: [CanDeactivateGuard] },
                { path: 'FlyingPayments', component: FlyingPayments, canDeactivate: [CanDeactivateGuard] },
                { path: 'FlyingNotes', component: FlyingNotes, canDeactivate: [CanDeactivateGuard] },
                { path: 'Base', component: Base, canDeactivate: [CanDeactivateGuard] }


    path: 'Playing',
    component: Development


    path: 'Loadings',
    component: LoadingMain,
    children: [
        { path: '', redirectTo: 'LoadingsWithoutFOXinfo', pathMatch: 'full' },
        { path: 'LoadingsWithoutFOXinfo', component: LoadingsWithoutFOXinfo },
        { path: 'LoadingsWithoutEpisodes', component: LoadingsWithoutEpisodes, canDeactivate: [CanDeactivateGuard] },
        { path: 'LoadingsWithoutFormat', component: LoadingsWithoutFormat, canDeactivate: [CanDeactivateGuard] },
        { path: 'LoadingsWithOverlaps', component: LoadingsWithOverlaps, canDeactivate: [CanDeactivateGuard] },
    path: 'SearchListings',
    component: Listings
    path: 'Forecasting',
    component: Development
    path: 'development',
    component: Development
    path: 'Base',
    component: Base
    path: 'Profitability',
    component: Development


export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
//export class AppRoutingModule { }

do you guys know any open source end user web tracking tool


  • I am using appdyanmics in my app for monitoring user activity.
  • but the problem is it doesnt show how much time user has clicked the button.
  • so using rxjs I have wrote a click event.
  • this click event shows the mouse event and how to pass this mouse event in appdyanmics payload, so that I can generate a report usimg appdyanmics.
  • providing my code changes below

appdyanmics Reference links:


sample appdynamics angular app https://github.com/derrekyoung/appd-sampleapp-angular2

<script src="https://cdn.appdynamics.com/adrum/adrum-latest.js"></script>


import { Component } from '@angular/core';
import {Subject} from 'rxjs/Subject';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'AppDynamics Sample App for Angular 2';

    click = new Subject();

    ngOnInit() {





    <!-- Navigation with router directives-->
      <a [routerLink]="['/']">Home</a>
      <a [routerLink]="['/names']">Names</a>
      <a [routerLink]="['/posts']">Posts</a>
      <a [routerLink]="['/photos']">Photos</a>
    <!-- <button (click)="new Subject()" type="button">Click Me!</button> -->

    <button (click)="click.next($event)">Click Me!</button> 



appdynamics request payload

  "vr": "",
  "dt": "R",
  "rg": "0",
  "es": [{
    "eg": "1",
    "et": 2,
    "eu": "0://1/2/",
    "ts": 1515610064377,
    "mg": "2",
    "au": "0://3/",
    "at": 3,
    "pp": 3,
    "mx": {
      "PLC": 1,
      "FBT": 48,
      "DDT": 0,
      "DPT": 4,
      "PLT": 52,
      "ARE": 0
    "md": "GET",
    "xs": 200,
    "si": 18
  "ai": "d4e7ef50_b4f3_1dd7_5cdf_49a60ff5635d",
  "gs": ["bbe438d0_0c94_63d9_2c22_700343b560b5", "cde9c933_e332_41ce_9333_5021c1502265", "4e6a7f03_4588_49e2_6c25_d8a3a1f3fe90"],
  "up": ["http", "jsonplaceholder.typicode.com", "users", "localhost:4200"]


  • right now I am passing hard coded value for my name.
  • I am trying to pass the dynamic username for my name key inside my scriprt tag from sportsService.
  • its working fine in my ts file.
  • but its not working fine in my html file.
  • I am getting an error. ---> Uncaught TypeError: Cannot read property 'marksSession' of undefined
  • can you guys tell me how to pass inside script tag of .html.
  • providing my code below


        (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',intercomSettings);}else{var d=document;var i=function(){i.c(arguments)};i.q=[];i.c=function(args){i.q.push(args)};w.Intercom=i;function l(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/APP_ID';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);}if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})()

        let players=this.sportsService.marksSession();
        console.log("players--->" + players);
        if(players) {
            this.userId = players.user_players.SSO[0];

        Intercom('trackEvent', 'share-link');

        window.intercomSettings = {
            app_id: 'APP_ID',
            name: "Jane Doe", // Full name
            email: "customer@example.com", // Email address
            created_at: 1312182000 // Signup date as a Unix timestamp


import { sportsService } from '../../services/sports.service';

constructor(public sportsService : sportsService){


ngOnInit() {    

        let that =this;
        let players=this.sportsService.marksSession();
        if(players) {
            this.userId = players.user_players.SSO[0];
Mohamad Nimer
Hi, ever since I’ve upgraded to ng5, I cannot run my tests anymore. I am getting a "Failed to exec tslint script” error when running npm run tslint "src/**/*.ts” but the log doesn’t indicate any specific issues - how do I debug this?
Hi guys, we have serious performance issues in IE, app works fine in edge, chrome, every browser but IE
has anyone experience something like this?
^^ I am still struggling with the above - any idea how to solve the issue?
does this project include backend_
Finally upgraded HtmlElementsPlugin
Hello everyone,
I've built one admin panel using Angular, I can see myself that a lot of improvements can be done to the existing project. I wanted to start with the project setup itself. While reading through articles, I found few named as Angular + Webpack, when I execute the ng serve it returns in the terminal as webpack compiled successfully. My question is, when angular uses webpack by default, what is the point of having a custom boilerplate like this. Does it offer any advantage over the angular-cli build?
Hello folks!
Is there some kind of guide, how to upgrade project from angular2-webpack-starter version 2.x.x to 4.x.x or 5.x.x?
Did anyone faced this error?
Please add a @Pipe/@Directive/@Component annotation.
Hi, how is it possible to add an additional angular environment besides prod and dev?
hi my angular app became very slow because of ngFor ...any suggessions to make it faster? Im using infinite scrolling and appending new data to a variable used in ngFor.
becoming more slow when scolling down more, violation 'mousedown' handler took 4567ms
Mahmoud Faour
Hello, how i can add a modal to edit data and save what i edited n angular 2. ?
Vincent M...
@naveen21f You are probably binding each ngFor a deep object cause Angular deep watching the changes and apply the changes during every mouse event
@naveen21f please create directive which use virtual scroller.
Alexandre Pardo
Hello! I'm using Webpack Starter with version 4.4 and need to upgrade it to 6, ideally. Where can I find info to assist me on this?
Alexandre Pardo
@naveen21f are you using the trackBy on your ngFor? Check here: https://angular.io/guide/structural-directives#inside-ngfor and specially here: https://angular.io/guide/template-syntax#ngfor-with-trackby
Hello everyone
Alexandre Pardo
Yo @govi2010
@sinner47 Angular cli uses webpack. But sometime we want control in out hand. So this webpack configuration helps to extend this same code to PhoneGap or Electron App anything you want to. I always like to keep control in my hand to utilize same code to generate mobile , desktop and web application. There are many more advantage also......
@aledpardo Yo. . . . . Let me know if you need help
@abelokon955 yes you can .
@naveen21f Please use virtual scroller concept for huge ngfor
José G. Ramírez

Hello everyone!

Afternoon (GMT-4: 00) ;)

Of interest, I'm professionally available from Dominican Republic as
Full-Stack Developer / FrontEnd Developer / UX Designer (C#/JS-based with TypeScript) -MEAN included!- in 100% remote mode and full time. :thumbsup:

If some are interested,
:heavy_check_mark: Please see my professional profile LinkedIn: http://bit.ly/koaltares
:heavy_check_mark: My Certification Profile (Microsoft): http://www.mycertprofile.com/Profile/4713626917
:heavy_check_mark: Member Microsoft: https://www.mcp.microsoft.com/Anonymous//Transcript/Validate

Transcript: ID (1138190) - Password: koaltaresmcp

Thanks for your observations and attentions.

Is there a channel regarding #Jobs?

Thanks a lot :thumbsup:

Manuel de la Pena
hello, I was wondering if someone could point me to the location or an example on how to add extra steps on the installation and uninstallation of an app
I need to execute a small script when installing the app and undo the changes when I uninstall it
Benoît Nadaud
Hi all, i'm looking for informations about adding components / modules to angular-starter ? Can we use CLI ? is there is another way ?
Hello, I have the same question above as @sinner47 , how is this different than the default setup generated by angular-cli? I read the answer by @govi2010 above, but I don't find it clear. Ok, so you want to have control, what does this mean? That you want to fine-tune all the involved configuration files (including webpack) yourself? Can't you do this with the CLI-generated structure too?
Just to be clear, no critique/offense meant :)
Olga Grabek
@1antares1 Can you remove your post? For sure this is not the right place to advertise yourself and you cluttering the discussion. After all you’re not a spammer, aren’t you?
Olga Grabek
@digeomel Personally I think this started has less advantages these days as Angular CLI maturated. When we started a project 1,5 year ago, CLI was still unreliable, so we decided to go with this starter. We just felt more comfortable without Angular CLI “magic”. I think this is still argument today. If you want to know what the webpack is doing with our code or you need really fine control during build or development process, you can choose such starter. Then you have all webpack config files and you can modify them. However, there is a cost. There is no upgrade guides. With every new version of Angular you have to struggle yourself with upgrading all dependencies, which is pain in the neck. You have no generators until you provide them yourself. To sum up, right now I think I would go with Angular CLI which seems to be better option.
Loi Hoang
can help me
Screen Shot 2018-08-17 at 12.49.32 PM.png
Hi all! I'm new using this angular starter, but cant use ng g c... is there other way to generate components?
How would I include JS files from the node_modules folders? In a non webpack app, you can add a set of scripts to the "scripts" property in the angular.json file. Is there something equivalent in webpack?