Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • 16:23
    dylhunn edited #46073
  • 16:22
    ngbot[bot] milestoned #46073
  • 16:22
    ngbot[bot] milestoned #46073
  • 16:22
    dylhunn labeled #46073
  • 16:22
    dylhunn labeled #46073
  • 16:22
    dylhunn labeled #46073
  • 16:22
    dylhunn labeled #46073
  • 16:22
    dylhunn opened #46073
  • 16:21
    atscott closed #46061
  • 16:21
    atscott commented #46061
  • 16:13
    jessicajaniuk labeled #45997
  • 16:13
    jessicajaniuk unlabeled #45997
  • 16:11
    Bleyobeth starred angular/angular
  • 16:06
    angular-automatic-lock-bot[bot] locked #15439
  • 16:06
    angular-automatic-lock-bot[bot] commented #15439
  • 16:06
    angular-automatic-lock-bot[bot] locked #45676
  • 16:06
    angular-automatic-lock-bot[bot] commented #45676
  • 16:06
    angular-automatic-lock-bot[bot] locked #45682
  • 16:06
    angular-automatic-lock-bot[bot] commented #45682
  • 16:06
    angular-automatic-lock-bot[bot] locked #45680
robert-brower-impaq
@robert-brower-impaq
image.png
Jack Devlin
@jackdevlin23
Im trying to imbed GiftUP on my angular app
But nothing shows when I load the page
Should I place the below code directly into the html file / should it be surrounded by anything
Any help greatly appreciated
<div class="gift-up-target" data-site-id="XXXXXXXXXXXXXXXXXXXXXXXXXXXX" data-platform="Other"></div>
<script type="text/javascript">
    (function(g, i, f, t, u, p, s) {
        g[u] = g[u] || function() {
            (g[u].q = g[u].q || []).push(arguments)
        };
        p = i.createElement(f);
        p.async = 1;
        p.src = t;
        s = i.getElementsByTagName(f)[0];
        s.parentNode.insertBefore(p, s);
    })(window, document, "script", "https://cdn.giftup.app/dist/gift-up.js", "giftup");
</script>
freshdev1
@freshdev1
Hello Guys. I am stuck in a routing issue, which I surely suspect is a trivial issue, but I don't know why I can't make any sense where I am doing wrong.
My app-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  // Fallback when no prior route is matched
  { path: '**', redirectTo: '', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule],
  providers: [],
})
export class AppRoutingModule {}
My home-routing.module.ts:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { marker } from '@biesbjerg/ngx-translate-extract-marker';

import { HomeComponent } from './home.component';
import { Shell } from '@app/shell/shell.service';

const routes: Routes = [
  Shell.childRoutes([
    { path: '', redirectTo: '/home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent, data: { title: marker('Home') } },
    {
      path: 'epass',
      loadChildren: () => import('epass/PassModule').then((m) => m.PassModule),
    },
  ]),
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: [],
})
export class HomeRoutingModule {}
and shell.service.ts:
import { Routes, Route } from '@angular/router';

import { AuthenticationGuard } from '@app/auth';
import { ShellComponent } from './shell.component';

/**
 * Provides helper methods to create routes.
 */
export class Shell {
  /**
   * Creates routes using the shell component and authentication.
   * @param routes The routes to add.
   * @return The new route using shell as the base.
   */
  static childRoutes(routes: Routes): Route {
    return {
      path: '',
      component: ShellComponent,
      children: [...routes],
      canActivate: [AuthenticationGuard],
    };
  }
}
Now the issue is that if I am navigating to epass it will not work. It will always navigate to home.
Can anyone suggest me what is wrong in the above routes?
freshdev1
@freshdev1
Any idea guys?
Zerounodue
@Zerounodue
try to remove your "Fallback when no prior route is matched" or move it at the end of HomeRoutingModule
1 reply
artart37
@artart37
Hi everyone. Although not directly related to Angular, but still: is SASS transpiled to CSS in the server-side?
artart37
@artart37
Hi everyone. Although not directly related to Angular, but still: is SASS transpiled to CSS in the server-side?
I understand that yes, it is, but would be great having a confirmation and a bit of more insight into this
tjmcdevitt
@tjmcdevitt
Hi, is it possible to upgrade from Angular from 2.2.0 to 12.1.0?
Norby125
@Norby125
Hi, is it possible to include type definition files in ng packagr build? I'm using module federation and I outsourced all my host navigations into an NX library that I would like to deploy independently from the host, therefore I need to define typescript modules to bypass typescript error that those modules does not exist. I tried to add types within tsconfig, but it couldn't make it work.
Filipe Abreu
@filipe-abreu
@tjmcdevitt My case is a little more critical... I need to migrate an app from 1.3.15 to 12.x
2 replies
RFMV34
@RFMV34

Hi, I have problem and do not know how to solve it... I have component that implements ControlValueAccessor, Validator and I have formArray there, I create items like this

add(): void {
    this.columnsFormArray.push(this.fb.group({
      value: ['', Validators.required],
      columnName: [null, Validators.required]
    }));
  }

But my control in validate method is always valid

validate(control: AbstractControl): ValidationErrors {
      console.log(control.value);
      console.log(control.valid);
      return control.valid ? null : {invalid: true};
    }

I do not know why, any advice please?

1 reply
robert-brower-impaq
@robert-brower-impaq
I'm using angular localization. Is the base href supposed to effect index.html scripts? I'm guessing not or I am doing something wrong. My scripts are in the same folder as index.html which is in either de/ or en-GB/ as they both get built. But the browser is requesting the scripts from the root of those two folders.
image.png
i get 404 because the requests don't contain the locale in the url
image.png
javaexpt
@javaexpt

Working:
xhr.open('POST', "employee.jsp?empId=123", true);
xhr.send();

Not-working:
xhr.send(params); where params is 'empId=123'
Not sure what is the different between the two.

Can someone please explain.

Omri
@omridevk
Hi, wanted to share a cool library I wrote that helps managing keyboards in your application:
https://github.com/omridevk/ng-keyboard-shortcuts
@javaexpt why use XHR in the first place?
Antonio Canzanella
@AntoCanza
Hey can i post a job opportunity? it's really a good one.
javaexpt
@javaexpt
@omridevk It's a pretty old code works in IE browser version 5 and 6.0 so need to stick with it
Andy
@ITAndy23
Hi guys, looking for a good reference of documentation or your favorite videos to explain observables and the best practice of cases to use them. I've watched some videos already. The subject(pun intended) is still a little unclear for me. I'm coming from an angularjs and React background.
Thanks
Nadeem Ahmad
@nikxco
try this one @ITAndy23 https://rxjs.dev/
keeshii
@keeshii:matrix.org
[m]

Observables are a bit more complicated than promises. I remeber I also had problems at the beginning. Try to analyse following example. It's the search input which triggers a http request with debounce and cancels it when new search occurs.

https://github.com/ngrx/platform/blob/master/projects/example-app/src/app/books/effects/book.effects.ts

keeshii
@keeshii:matrix.org
[m]

And for the reference I like to use this page. Everything in one place with nice images:

http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html

Nadeem Ahmad
@nikxco
I'm having issues while using i18n along with SSR, I'm able to generate different folders for each locale, but while running any of the main.js files I'm getting the following error
Error: Failed to lookup view "index" in views directory "/Users/nikx/Documents/GitHub/marqit-a/dist/web/browser" at Function.render (/Users/nikx/Documents/GitHub/marqit-a/dist/web/server/es/main.js:3:1143463) at ServerResponse.render (/Users/nikx/Documents/GitHub/marqit-a/dist/web/server/es/main.js:3:1162378) at /Users/nikx/Documents/GitHub/marqit-a/dist/web/server/es/main.js:3:4624215

Following two lines are confusing because main.js files is in dist/web/server/es/ while its looking for the views in dist/web/browser

Error: Failed to lookup view "index" in views directory "/Users/nikx/Documents/GitHub/marqit-a/dist/web/browser" at Function.render

/Users/nikx/Documents/GitHub/marqit-a/dist/web/server/es/main.js:3:4624215

Nadeem Ahmad
@nikxco
image.png
Ayz Pat
@AyzPat
Hi guys, I am using exifr package to fetch the details of the image . The gps details in particular are reflecting when uploaded from the laptop , but when I use an android phone - version 11+ (version 10 and below works fine) , the gps data is nulll . [using same image in both cases]. , I found there is some manifest allow-media-location but I am unable to set it using angular . a suggestion or solution will be really grateful... I am using a normal PWA for the same (not a hybrid app)
Mohammed
@MrHamoud01
hi
RakeshJanapareddy
@RakeshJanapareddy
hello ...how to authorize django endpoints in angular
Sander Schnydrig
@sschnydrig_gitlab

Hello there. Is anyone else suddenly getting hundreds of warnings in DevTools like this?
DevTools failed to load source map: Could not load content for http://localhost:8100/runtime.js.map: Connection error: net::ERR_CONNECTION_REFUSED

or this one
DevTools failed to load source map: Could not load content for webpack:///node_modules/rxjs/_esm5/internal/Observer.js.map: Fetch through target failed: Unsupported URL scheme; Fallback: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME

lovelyBestDev
@lovelyBestDev
Hello Everyone. I started to learn Angular before a few days. I am referencing angular.io. But I have any problems. In using HttpClientModule (in "hero" project), I code add(), delete(), .. some functions in heroes.component.ts file. I don't know where can I access to database in. I mean, if I want to change any features of add() function, where I going?
freshdev1
@freshdev1

Hello Guys. i am trying to encapsulate the mat-sidenav in one of my component. But it doesn't accept it.

sliding-panel.component.html

<mat-sidenav-container #sideNavContainer>
  <mat-sidenav #sideNav 
    mode="mode" 
    position="position" 
    disableClose="disableClose" 
    opened="opened" 
    (closedStart)="openedStart"
    (openedChange)="openedChange"
    (closedStart)="closedStart"> 
  </mat-sidenav>

</mat-sidenav-container>
sliding-panel.component.ts:
@Component({
  selector: 'app-atlp-sliding-panel',
  templateUrl: './atlp-sliding-panel.component.html',
  styleUrls: ['./atlp-sliding-panel.component.scss'],
})
export class AtlpSlidingPanelComponent implements OnInit, IAtlpSlidingPanelComponent {
  @ViewChild('sideNavContainer') sidenavContainer!: MatSidenavContainer;
  @ViewChild('sideNav') sideNav!: MatSidenav;

  /* Properties for side nav starts here */
  @Input() mode!: MatDrawerMode;
  @Input() position: 'start' | 'end';
  @Input() disableClose: boolean;
  @Input() opened: boolean;
  /* Properties ends here */

  /* Properties for side nav container starts here */
  @Input() autosize!: boolean;
  @Input() hasBackdrop: boolean;
  /* Properties for side nav container ends here */

  /* Events for sidenav starts here */
  @Output() closedStart: Observable<void>;
  @Output() openedChange: EventEmitter<boolean>;
  @Output() openedStart: Observable<void>;
  /* Events for sidenav ends here */

  constructor() {
    log.info('Sliding Panel constructor called.');

    //this.mode = 'over';
    this.position = 'end';
    this.disableClose = true;
    this.opened = false;

    this.hasBackdrop = false;

    this.closedStart = of(undefined);
    this.openedChange = new EventEmitter(true);
    this.openedStart = of(undefined);

    log.info('Sliding Panel constructor ended.');
  }
during build, angular cli throws the following error:
Error: src/app/@components/atlp-sliding-panel/atlp-sliding-panel.component.html:3:5 - error TS2322: Type '"mode"' is not assignable to type 'MatDrawerMode'.

3     mode="mode"
      ~~~~
1 reply
RakeshJanapareddy
@RakeshJanapareddy
any one can help me...how to do jwt authentication in angular...please
freshdev1
@freshdev1
what is it you need help with @RakeshJanapareddy
you need to set header? or what you need to achieve?
RakeshJanapareddy
@RakeshJanapareddy
I have Django rest api's with jwt authentication... how to authorize that rest api's in angular
@freshdev1 I have Django rest api's with jwt authentication... how to authorize that rest api's in angular
freshdev1
@freshdev1
first you have to login... probably it will be a post call with username and password, in return you will receive the access_token
you can use this access token and attach it to the authorization header using the interceptor like below:
import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';

import { CredentialsService } from '../../auth';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(private _credService: CredentialsService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    let tokenObj = this._credService.credentials;

    let reqToken = request.clone({
      setHeaders: { Authorization: `Bearer ${tokenObj?.token}` },
    });
    return next.handle(reqToken);
  }
}
@RakeshJanapareddy ^