Angular &引用；无法读取属性'；显示呼叫'；在新的AuthenticationContex中未定义的属性…”；

进展如何

所以，我刚开始使用最新版本的Angular，使用TypeScript，在尝试将配置文件加载到我的应用程序时遇到了问题

事情是这样的：我正在做一个项目，它使用MsAdalAngular6Module进行Azure身份验证。当我得到这个项目时，所有的配置设置都是硬编码的，所以我按照中的说明：在更现实的场景中使用这个包。但是，正如您将在第一个链接中看到的，我必须创建一个服务来按照这些说明动态加载我的配置文件：

在这之后一切都很顺利，我能够加载我的配置文件，没有问题。但是当我需要创建一个HttpInterceptor在每个请求的头中插入一个身份验证令牌时，问题就开始了。基本上，我不能同时使用两者（加载配置文件的服务和HttpInterceptor），否则会出现以下错误：

我的猜测是：来自配置服务的请求是在msadalangular6模块加载之前发出的。因此，当发出请求时，它不具有某些属性，这些属性应该具有由MsAdalAngular6Service对其进行身份验证的ir顺序。当然，这只是猜测

下面是一些代码：

配置服务

从“@angular/core”导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“../environments/environment”导入{environment}；
从“./models/app config.model”导入{IAppConfig}；
@可注射（）
导出类AppConfig{
静态设置：IAppConfig；
构造函数（私有http:HttpClient）{}
加载（）{
const jsonFile=`assets/config/config.${environment.name}.json`；
返回新承诺（（解决、拒绝）=>{
this.http.get（jsonFile，{withCredentials:true}）.toPromise（）.then（（响应：IAppConfig）=>{
AppConfig.settings=响应；
解决（）；
}).catch（（响应：任意）=>{
拒绝（`无法加载文件'${jsonFile}'：${JSON.stringify（response）}`）；
});
});
}
}

Http拦截器

从“@angular/core”导入{Injectable}；
从'@angular/common/http'导入{HttpInterceptor，HttpHandler，HttpRequest}；
从“rxjs/operators”导入{mergeMap}；
从“microsoft-adal-angular6”导入{MsAdalAngular6Service}；
@可注射（）
导出类InsertAuthTokenInterceptor实现HttpInterceptor{
构造函数（私有adal:MsAdalAngular6Service）{}
拦截（请求：HttpRequest，下一步：HttpHandler）{
//从adal配置获取api url
const resource=this.adal.GetResourceForEndpoint（请求url）；
如果（要求提供凭证）{
返回next.handle（req）；
}
如果（！resource | |！this.adal.isAuthenticated）{
返回next.handle（req）；
}
//将承载令牌合并到现有头中
返回此.adal.acquireToken（资源）.pipe(
合并映射（（令牌：字符串）=>{
const authorizedRequest=req.clone({
headers:req.headers.set（'Authorization'，'Bearer${token}`），
});
返回next.handle（authorizedRequest）；
}));
}
}

以及我在app.module.ts上使用它的方式：

。。。
让adalConfig：任何；
导出常量拦截器提供程序=
[
{提供：HTTP_拦截器，useClass:InsertAuthTokenInterceptor，multi:true}
];
导出函数msAdalAngular6ConfigFactory（）{
返回adalConfig；
}
导出函数初始化EAPP（appConfig:appConfig）{
const promise=appConfig.load（）。然后（（）=>{
adalConfig={
租户：AppConfig.settings.adalConfig.tenant，
clientId:AppConfig.settings.adalConfig.clientId，
端点：AppConfig.settings.adalConfig.endpoints，
navigateToLoginRequestUrl:错误，
cacheLocation:AppConfig.settings.adalConfig.cacheLocation
};
});
回报（）=>承诺；
}
...

供应商部分

。。。
供应商：[
AppConfig，
{
提供：应用程序初始化器，
使用工厂：初始化EAPP，
deps:[AppConfig]，
多：是的，
},
拦截器提供程序，
AuthenticationGuard，
装载机服务，
MSADALangular6服务，
{
提供：“adalConfig”，
useFactory:msAdalAngular6ConfigFactory，
副部长：[]
},
AuthenticationGuard
]
...

好吧，我想我找到了解决办法。我只是不知道它有多可靠。我使用了一个本地htpp客户端。然后，AppConfig服务变成了这样：

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpBackend，HttpClient}；
从“../environments/environment”导入{environment}；
从“./models/app config.model”导入{IAppConfig}；
constURL=`assets/config/config.${environment.name}.json`；
@可注入（{providedIn:'root'}）导出类AppConfig{
静态设置：IAppConfig；
私有httpClient:httpClient；构造函数（httpBackend:httpBackend）{
//使用本地HttpClient避免拦截器循环
this.httpClient=新的httpClient（httpBackend）；
}
getAppConfig（）{
返回新承诺（（解决、拒绝）=>{
this.httpClient.get（URL，{withCredentials:true}）.toPromise（）。然后（（响应：