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>
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 {}
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 {}
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],
};
}
}
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?
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
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
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 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.');
}
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"
~~~~
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);
}
}