Discussion for angular (2+) - need help? create a stackblitz with your issue to get help faster using this template: https://stackblitz.com/fork/angular-issue-repro2
<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>
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?
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.
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
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.
i get 404 because the requests don't contain the locale in the url
Hi, wanted to share a cool library I wrote that helps managing keyboards in your application:
https://github.com/omridevk/ng-keyboard-shortcuts
https://github.com/omridevk/ng-keyboard-shortcuts
@javaexpt why use XHR in the first place?
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
Thanks
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.
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
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
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)
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
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?
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"
~~~~
you need to set header? or what you need to achieve?
@freshdev1 I have Django rest api's with jwt authentication... how to authorize that rest api's in angular
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 ^