- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正尝试按照这篇文章进行动态应用配置:https://devblogs.microsoft.com/premier-developer/angular-how-to-editable-config-files/ .浏览器返回404 not found on the json file,虽然可以直接访问。
我将配置放在 Assets 文件夹中:
src/assets/config/config.json
{
"api": {
"baseUrl": "http://xx.com"
}
}
我有一个加载 config.json 的服务:
src/app/services/app.config.service.ts
import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { IAppConfig } from '../models/appConfig'
import { environment } from 'environments/environment'
@Injectable()
export class AppConfigService {
static settings: IAppConfig = {} as IAppConfig
constructor(private http: HttpClient) {}
load() {
const jsonFile = `assets/config/config.json`
return new Promise<void>((resolve, reject) => {
this.http
.get(jsonFile)
.toPromise()
.then((response: any) => {
console.log(response, response.json())
AppConfigService.settings = <IAppConfig>{
...environment,
...response,
}
resolve()
})
.catch((response: any) => {
console.log(response)
reject(
`Could not load app configuration file '${jsonFile}': ${JSON.stringify(
response
)}`
)
})
})
}
}
该服务在 APP_INITIALIZER 上使用:
src/app/app.module.ts
import { AppConfigService } from './services/app.config.service'
...
providers: [
{ provide: LOCALE_ID, useValue: 'da' },
AppConfigService,
{
provide: APP_INITIALIZER,
useFactory: initializeApp,
deps: [AppConfigService],
multi: true,
},
],
...
我使用 ng serve
为应用程序提供服务。我可以使用 http://localhost:4200/assets/config/config.json
直接访问它。但是浏览器控制台提示:
ERROR Could not load app configuration file 'assets/config/config.json': {"body":{"error":"Collection 'config' not found"},"url":"assets/config/config.json","headers":{"normalizedNames":{},"lazyUpdate":null},"status":404,"statusText":"Not Found"}
defaultErrorLogger @ core.js:15724
setTimeout (async)
scheduleTask @ zone.js:2302
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
onScheduleTask @ zone.js:301
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
scheduleMacroTaskWithCurrentZone @ zone.js:1245
(anonymous) @ zone.js:2317
proto.<computed> @ zone.js:1569
(anonymous) @ delay-response.js:16
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.error @ Subscriber.js:147
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error @ Subscriber.js:80
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:60
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error @ Subscriber.js:80
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:60
(anonymous) @ backend.service.js:278
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
(anonymous) @ delay-response.js:8
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
(anonymous) @ subscribeTo.js:21
subscribeToResult @ subscribeToResult.js:11
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:74
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:68
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:51
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._next @ tap.js:51
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/operators/take.js.TakeSubscriber._next @ take.js:40
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next @ filter.js:38
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
push../node_modules/rxjs/_esm5/internal/BehaviorSubject.js.BehaviorSubject._subscribe @ BehaviorSubject.js:22
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
push../node_modules/rxjs/_esm5/internal/Subject.js.Subject._trySubscribe @ Subject.js:89
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._subscribe @ Observable.js:78
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:28
push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call @ filter.js:15
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/take.js.TakeOperator.call @ take.js:24
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/tap.js.DoOperator.call @ tap.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:29
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
(anonymous) @ subscribeTo.js:21
subscribeToResult @ subscribeToResult.js:11
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:74
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:68
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:51
push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
(anonymous) @ scalar.js:5
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:29
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call @ filter.js:15
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:18
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
(anonymous) @ Observable.js:98
ZoneAwarePromise @ zone.js:910
push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.toPromise @ Observable.js:96
(anonymous) @ app.config.service.ts:17
ZoneAwarePromise @ zone.js:910
push../src/app/services/app.config.service.ts.AppConfigService.load @ app.config.service.ts:14
(anonymous) @ app.module.ts:27
push../node_modules/@angular/core/fesm5/core.js.ApplicationInitStatus.runInitializers @ core.js:16739
(anonymous) @ core.js:17774
_callAndReportToErrorHandler @ core.js:17867
(anonymous) @ core.js:17772
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
onInvoke @ core.js:17299
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:17213
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModuleFactory @ core.js:17763
(anonymous) @ core.js:17803
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
(anonymous) @ zone.js:889
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
drainMicroTaskQueue @ zone.js:601
Promise.then (async)
scheduleMicroTask @ zone.js:584
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
scheduleResolveOrReject @ zone.js:879
ZoneAwarePromise.then @ zone.js:1012
push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:17803
./src/main.ts @ main.ts:12
__webpack_require__ @ bootstrap:83
0 @ main.ts:13
__webpack_require__ @ bootstrap:83
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1
Show 60 more frames
感谢提示或帮助。
-- 更新--
我找到了自己的解决方案来解决我在下面发布的问题。
最佳答案
试试这个
load() {
const jsonFile = `assets/config/config.json`
return new Promise<void>((resolve, reject) => {
this.http
.get(jsonFile)
.toPromise()
.then((response: any) => {
var responseData = response.json() | response;
AppConfigService.settings = <IAppConfig> responseData;
resolve();
})
.catch((response: any) => {
console.log(response)
reject(
`Could not load app configuration file '${jsonFile}': ${JSON.stringify(
response
)}`
)
})
})
}
关于angular - 找不到 "src/assets"文件夹中的 JSON 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56477383/
我正在尝试在 Windows 上运行的小于 1GB 的 VM 上设置 YouTrack 和 TeamCity。使用率将非常低(用户和请求)。这是一个 POC 环境,如果它有效,我可能会将它推送到一个超
所以我在尝试使用 FORFILES 解决这个问题时遇到了麻烦。我正在尝试获取不超过 4 天的文件。所以基本上少于 4 天。然而,这似乎不太可能,因为/d -4 获取所有 4 天或更早的项目。 以下是我
如何从下面的 events 表中选择小于 15 分钟前创建的 events? CREATE TABLE events ( created_at timestamp NOT NULL DEFAU
Google Analytics Realtime提供 rt:minutesAgo ,可以过滤查询。 然而,它是一个维度而不是一个度量标准,<=不能在过滤器中使用。 假设我想在最后 n 分钟内获得一些
iOS 核心数据 - 严重的应用程序错误 - 尝试插入 nil 你好, 我的应用程序实际上运行稳定,但在极少数情况下它会崩溃并显示此错误消息... 2019-04-02 20:48:52.437172
我想制作一个 html div 以快速向右移动(例如不到 1 秒)并消失。然后1秒后再次直接出现在这个过程最开始div的位置。此过程将由单击按钮并重复 10 次触发。 我试图在 CSS 中使用过渡属性
我发现使用 TimeTrigger 是 Windows 10 (UWP) 上计划后台任务的方式。但是看起来我们需要给出的最小数字是 15 分钟。只是想知道,即使我们安排它在接下来的 1 分钟内运行,警
我必须在 1 秒内在屏幕上打印 2^20 行整数 printf 不够快,还有其他易于使用的快速输出替代方法吗? 每一行只包含 1 个整数。 我要求它用于竞争性编程问题,我必须将其源代码提交给法官。 最
我是一名优秀的程序员,十分优秀!