Angular Gurus, I am kind of new to angular. Your help would be greatly appreciated.
1) Below approach is working fine:
app.routing.ts
const appRoutes: Routes = [
{ path: 'clone', component: CloneComponent,
children: [
{path: 'status', component: StatusComponent, resolve: {config: ConfigResolver} },
]
},
]
config.service.ts
@Injectable()
export class ConfigService {
private configsArray = new BehaviorSubject<Config>(undefined);
configsArray$ = this.configsArray.asObservable().first();
updateConfigs(configs: Config) {
this.configsArray.next(configs)
}
getConfigs() {
let headers = new Headers();
headers.append('Content-Type','application/json');
this.updateFetchConfigs('Fetching');
return this.http.get('http://localhost:8080/sample1/api/config', { headers: headers }).map((response: Response) => response.json());
}
}
config-resolver.service.ts
@Injectable()
export class ConfigResolver implements Resolve<Config> {
config: Config;
constructor(private configService: ConfigService, private router:Router) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Config> | Promise<Config> | Config {
return this.configService.configsArray$.map( // this is working
data => {
return data;
}
);
}
}
app.component.ts
export class AppComponent implements OnInit, OnDestroy {
constructor(private route: ActivatedRoute,
private router:Router,
private configService:ConfigService ) {
}
ngOnInit() {
this.configsSubscription = this.configService.getConfigs().subscribe(configs => {
this.configs = configs;
this.configService.updateConfigs(configs);
}
}
}
2) Getting below error while executing this.configService.getConfigs().map from config-resolver.service.ts
Error
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'map' of undefined
config.service.ts
@Injectable()
export class ConfigService {
private configsArray = new BehaviorSubject<Config>(undefined);
configsArray$ = this.configsArray.asObservable().first();
updateConfigs(configs: Config) {
this.configsArray.next(configs)
}
getConfigs() {
let initialLoad: number = 0;
let initialLoadDone: boolean = false;
if (this.fetchConfigs) == 'NotFetched') {
// if it meets this if condition it is working
let headers = new Headers();
headers.append('Content-Type','application/json');
this.updateFetchConfigs('Fetching');
return this.http.get('http://localhost:8080/sample1/api/config', { headers: headers }).map((response: Response) => response.json());
}
else {
// if it does not meet this if condition it is not working
Observable.interval(1)
.takeWhile(() => !initialLoadDone)
.subscribe(() => {
++initialLoad;
if (this.getConfigs1(this.fetchConfigs$) == 'Fetched' || initialLoad > 10000) {
initialLoadDone = true;
return this.configsArray$;
}
});
}
}
}
config-resolver.service.ts
@Injectable()
export class ConfigResolver implements Resolve<Config> {
config: Config;
constructor(private configService: ConfigService, private router:Router) {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<Config> | Promise<Config> | Config {
return this.configService.getConfigs().map(
data => {
return data;
}
);
}
}
/*
Uncaught (in promise): TypeError: Cannot read property map of undefined error - from above return command this.configService.getConfigs().map
getting above error if getConfigs() function returns this.configsArray$(else condition from config.service.ts getConfigs() function),
it is working if getConfigs() function returs this.http.get(..).map(..) (ie. if condition from config.service.ts getConfigs() function)
*/
status.component.ts
export class StatusComponent implements OnInit, OnDestroy {
constructor(private configService:ConfigService,
private route: ActivatedRoute,
private router: Router) {}
ngOnInit() {
this.configSubscription = this.route.data.subscribe(
(data: Data) => {
this.test = data['config'];
}
);
}
}
Thank you