Code Bug Fix: Angular Material Menu module: Export of name ‘matMenu’ not found

Original Source Link

I have a little issue with Angular Material Menu module.

I have this code in my app.module.ts:

import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    SharedModule,
  ],
})
export class AppModule { }

In my shared.module.ts:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatMenuModule } from '@angular/material/menu';
import { ListDropdownComponent } from './list-dropdown/list-dropdown.component';

@NgModule({
  declarations: [
    ListDropdownComponent,
  ],
  imports: [
    MatMenuModule,
  ],
  exports: [
    ListDropdownComponent,
  ],
})
export class SharedModule { }

In my list-dropdown.component.ts:

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';

@Component({
  selector: 'app-list-dropdown',
  templateUrl: './list-dropdown.component.html',
  styleUrls: ['./list-dropdown.component.scss']
})
export class ListDropdownComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
}

In the list-dropdown.component.html:

<button mat-icon-button [matMenuTriggerFor]="menu">
  My dropdown menu
</button>
<mat-menu #menu="matMenu">
  <!-- ... -->
</mat-menu>

Then I have this error message:

Error: Export of name 'matMenu' not found!

I can’t see where is the problem here?

I had the same problem and a server restart fixed it.

Tagged : / / /

Code Bug Fix: /Account/Login Post Method return 500

Original Source Link

i have struggling with this for two days now. my angular app work perfectly with my idenity server implementation. All working good in my local system. but when i hosted it in azure the Identity Server MVC Login Page is returning 500 Error. You can take a look at the url below:

  1. Angular Url: https://oyserms.azurewebsites.net
  2. Identity Server Login Url: https://oysermsauth.azurewebsites.net/Account/Login.

Either using the correct credentials or not the same error display(ERROR: Sorry, there was an error. The error is not specific). Have tried all i could because not result.

Please kindly assist. Thanks

Tagged : / / / /

Code Bug Fix: HTML range input min value not working as expected [closed]

Original Source Link

I’ve used HTML range input in my Angular 7 code and set it’s min and max values to 69 and 200. I want my slider to begin from 69 instead of 0. But now user can slide back to 0. Below is my simple HTML code:

<input formControlName="SealHeight" [(ngModel)]="seal_height" type="range" min="min_height" max="200" class="slider-color">

Below is the screenshot of how it looks like:

Screenshot of range picker

I need that range picker should not show below 69. So that user can not go below mentioned min limit. Thanks!

try sample code in html editor

<input type="range" onchange="this.setAttribute('value',this.value);" min="69" max="200" step="1" value="69" />

set a proper min for it:

<input formControlName="SealHeight" [(ngModel)]="seal_height" type="range" min="69" max="200" class="slider-color">

Tagged : / /

Code Bug Fix: Angular i18n configuration on ng serve

Original Source Link

I am following the guidance on internationalization on https://angular.io/guide/i18n

When configuring my angular.json I configured the serve section as below:

   "serve": { 
        "configurations": {
            "production": {
              "browserTarget": "myproject:build:production"
            },
            "zh": {
              "browserTarget": "myproject:build:zh"
            }
     }

But when I try to use “ng serve –configurations=zh”, keep hitting this

An unhandled exception occurred: Configuration 'zh' is not set in the workspace.

I already setup all the necessary locale files required. Anyone can help?

Tagged : /

Code Bug Fix: How to manage the Strategy user info in NestJS and pass it to the client side in Angular?

Original Source Link

I’m doing a little project in this quarentine time to learn about the backend part of a project. In this case I’m using Angular as client-side and NestJS as back-end.

In this project I’m learning how to login through Steam OpenID. I have used a third party package called “Passport-steam” to get the Strategy to authenticate.

In my client side when I click in the log button i change the window location to the controller where I have the method that automatically calls the Strategy.

window.location.href = `${environment.API}api/auth/steam`;    

This Strategy needs of a return Url wich is “…/api/auth/steam/callback”, another method in the controller.

@Controller('auth')
export class AuthController {
  private readonly logger = new Logger(AuthController.name);
  constructor(private readonly authService: AuthService) {}


  @Get('steam')
  @UseGuards(SteamAuthGuard)
  steamLogin(){ //this method calls the strategy }

  @Get('steam/callback')
  @UseGuards(SteamAuthGuard)
  async steamLoginCallback(@Request() req, @Res() res)
  {
    //This method is called once the user has logged in through steam
    console.log(req.user);
    this.authService.setUserInfo(req.user);
    res.redirect(`${environment.FRONTEND_URL}`);
  }

  @Get('profile')
  getProfile() {
    return this.authService.login();
  }
}

I didn’t have a clue about how to recieve the user profile in the client side because in the callback method, if I redirect to my page I didn’t have any info. I created a profile method to get the user info stored in the callback and then subscribe to it in my client side to get this info. The only problem is that I can’t handle more than one person connected wich is not my intention.

¿How can I pass the user info from the server side to the client side?

Thank you

Tagged : / / / /

Code Bug Fix: How to stop creating a new socket connection when I open a dialog modal in Angular app

Original Source Link

I’m a beginner level developer, using angular 9, nodejs and socketIO for my app.When I route from home page to another page a socket connection is made an a socket.id is created.But I lose that socket.id when I click on a button to open an angular modal as a new socket connection is made.Nothing is emitted on my click.How can prevent creating a new connection on my click and keep my previously created socket.id forever.Please help.

Tagged : / / / /

Code Bug Fix: How to redirect to external URL with response data (from post) after http.post

Original Source Link

this.http.post<any>('https://api.mysite.com/sources', [..body], [...header])
  .subscribe(async res => {
    const someData = res.data;
    const url =  res.url;

    window.location.href = url  
})

This will redirect to specified url but how can I include the someData when the redirection happened?

You can send the data as queryparams

   this.http.post<any>('https://api.mysite.com/sources', [..body], [...header])
      .subscribe(async res => {
         const someData = res.data;
         const url =  res.url;

         window.location.href = url + `?data1=${yourData1}&data2=${yourData2}`
    })

And receive those data when arrive the other application

    private readRedirectionData() {
       const url = window.location.toString();
       const data1 = this.getUrlParameter(url, 'data1');
       const data2 = this.getUrlParameter(url, 'data2');
    }

    private getUrlParameter(url, name) {
       if (!url) {
          return '';
       }
       if (!name) {
          return '';
       }
       name = name.replace(/[[]/, '\[').replace(/[]]/, '\]');
       const regex = new RegExp('[\?&]' + name + '=([^&#]*)');
       const results = regex.exec(url);
       return results === null ? '' : decodeURIComponent(results[1]);
    }

Tagged : / / /

Code Bug Fix: Angular CLI – ng serve – high cpu usage from node process

Original Source Link

I am struggling with an issue where on running any angular app locally the node process linked to ng serve is using well over 100% of my CPU core’s.

My current environment is:

Angular CLI: 7.3.10
Node: 11.15.0
OS: darwin x64 (Mac OS X Catalina 10.15.4)
Angular: 7.2.16

I have come across numerous posts and issues about this where the common solutions appear to be to install fsevents for Mac OS issues.

Things I have tried:

  • Installing XCode Command Line Tools for node-gyp to rebuild fsevents after its installed
  • Install the latest version of fsevents (2.1.3) as an older version is specified as an optional dependency with angular-cli (1.2.13)
    • Using a different node version, tried 12.13.0 and deleting node_modules and doing a clean install. Also tried latest fevents version again
    • Incase its relevant I use nvm also
    • Tried npm rebuild
    • Upgrading one of my apps from Angular 7 to 9, still same behaviour after clean install of dependencies, ensuring fsevents is installed and trying latest version too

No matter what I try, I keep observing high cpu usage, I have seen it creep up too 300-400% at times.

This is really hampering my development and I am hoping someone may have some bright ideas I could try out.

Failing that, I am wondering if I should try uninstalling node completely, getting rid of nvm and starting from scratch.

UPDATE – SOLVED

So I went down the route of removing nvm and node off my machine and installing the latest stable version from nodeJS website.

Doing this made no difference when starting up my apps.

I came across a few posts talking about webpack’s polling behaviour and options to turn this off or to increase the amount of the polling interval.

I found there is a --poll [ms] cli argument that can be used to control this frequency when ng serve is at play.

Using a --poll 1000 arg, I now have two of my apps running, with each one using around 30% of my cpu. So way lower than I have been observing lately but I wanted to see if I could this down lower.

Using a --poll 2000 arg, I now see the node processes for these apps only using around 10-15%.

When detecting changes and recompiling the CPU usage spikes, which I would expect and then drops back to these lower levels.

So for whatever reason fsevents is having no effect on my machine, it’s still being installed when npm i my app dependencies, and I have installed it globally in case this a difference.

Anyway, I’m happier now, albeit I wish I understood why this problem occurred in the first place!

¯_(ツ)_/¯

In Angular development context; transpilation/compilation causes CPU spike. When this happens too frequent, your system is in trouble.

There are certain ways to relieve the pain a little;

  • Turn off file change detection / live-reload / auto compilation entirely

ng serve --live-reload false or ng serve --no-live-reload etc. depending on your Angular CLI version

  • Have a better change detection, react only when really needed

npm install fsevents

npm rebuild fsevents

npm serve

  • Forget change detection, check changes based on a time interval

ng serve --poll [ms]

CPU management is tricky, there can be many reasons for this problem. These are only a few possibilities closely related to Angular development. I hope this answer provides some options to try to the ones having the same trouble.

it seems i managed to resolve the problem:
delete the /node_module and install again

in my case that helped
i found the advise here:
https://gitmemory.com/issue/angular/angular-cli/14748/501608887

Try using below command

node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve

Tagged : / / / /

Code Bug Fix: Angular shared string change not responsive to BACK browser button

Original Source Link

I am sharing String data between several unrelated Angular components via shared service by injecting the service in the constructor of each component and then subscribing to it. The String then changes via functions in each component. I use this String as a Title of the page (i.e. to mark on the next page, which was the source).

It all works fine until I press the back button in the browser. The page contents go to the previous page, but the title (String from shared data service) remains the same.

How can also the charged string return to the previous version?

Tagged : / /

Code Bug Fix: How to have the property file to control whole app with server condition implemented

Original Source Link

Every one, I have a confused scenario on my page implementation.

 1. Each of the page has number of if conditions 
 2. Each of the page has number of child components
 3. Each of the page has number of user interactive button.

All above already controlled by .ts file. so each of the page has number of implementation of mixing above.

Now the business requires a level of user condition. meaning business provides no.of condition against the each user for feature in page.

Now I am in the position to implement my angular logic which is already developed and business logic just i received it.

But I am looking for clean and neat solution for it. any one share me your though about it?

my idea :

Like to keep both business and angular logic in one property file and sharing across app. though i do not have any idea about it. needs help.

if any one have better clean approach/experience to handle please help me. we are nearly 30 member team.

Thanks in advance.

Tagged : /