Azure App Service上的Angular App-从Assets文件夹加载配置文件时出现404错误 [英] Angular app on azure app service - 404 errors when loading config file from assets folder
问题描述
我正在尝试在azure应用服务平台(Windows机器)上部署一个angular 6应用.该应用程序本身只是一个新的角度应用程序(由ng new appname生成的基本代码).我在本教程之后添加了一些次要代码,以使用配置文件并在vsts发布管道中利用变量替换-
I am trying to deploy an angular 6 app on azure app service platform (windows machine). The app itself is just a new angular app (basic code generated from ng new appname). I have added some minor code following this tutorial in order to use a config file and leverage variable substitution in vsts release pipelines - manage settings for an angular app with vsts.
这些是我对生成的应用程序进行的代码更改. 在app.module.ts
These are the code changes I have made to the generated app. In app.module.ts
export function initializeAppSettings(appSettings: AppSettings) {
return () => appSettings.load();
}
...
providers: [AppSettings, {
provide: APP_INITIALIZER,
useFactory: initializeAppSettings,
deps: [AppSettings],
multi: true
}]
对于我的appsettings.ts文件
For my appsettings.ts file
export interface AppConfiguration {
apiUrl: string;
}
@Injectable()
export class AppSettings {
static config: AppConfiguration;
constructor(private http: HttpClient) {}
load(): Promise<any> {
const appSettingsJson = environment.production ? 'assets/appsettings.json' : 'assets/appsettings.local.json';
return new Promise<any>(((resolve, reject) => {
this.http.get<AppConfiguration>(appSettingsJson)
.toPromise()
.then(result => {
AppSettings.config = result;
resolve();
}).catch(reason => {
reject(`unable to load settings file ${appSettingsJson} due to ${JSON.stringify(reason)}`);
});
}));
}
}
在我的angular.json文件中
In my angular.json file I have
"assets": [
"src/favicon.ico",
"src/assets",
"src/web.config"
]
以及以下web.config文件
And the following web.config file
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="Angular" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
我在src/assets/appsettings.json文件atm中有一个设置
I have a single setting in my src/assets/appsettings.json file atm
{
"apiUrl": "https://localhost:5001/api/"
}
当使用ng serve在本地运行,甚至使用ng build部署到本地IIS时,此设置都可以很好地工作.我使用app.component.ts和app.component.html中已加载的设置来验证它是否正确加载.但是,当我将应用程序部署到天蓝色时,会出现404错误.
This setup works completely fine when running locally using ng serve or even deployed to local IIS using ng build. I use the loaded settings in my app.component.ts and app.component.html to verify that it loads correctly. But when I deploy the app to azure I get a 404 error.
由于无法加载设置文件asset/appsettings.local.json而导致的错误 到 {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":404,"statusText":"Not 找到," url:" https://mydomain/assets/appsettings.local.json ," ok:false,"名称:" HttpErrorResponse,"消息:" Http https://mydomain/assets/appsettings.local.json 的失败响应: 404 Not Found,"错误:"您正在寻找的资源已经 删除,更名或暂时不可用.}
ERROR unable to load settings file assets/appsettings.local.json due to {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":404,"statusText":"Not Found","url":"https://mydomain/assets/appsettings.local.json","ok":false,"name":"HttpErrorResponse","message":"Http failure response for https://mydomain/assets/appsettings.local.json: 404 Not Found","error":"The resource you are looking for has been removed, had its name changed, or is temporarily unavailable."}
我尝试将各个appsettings.json文件显式添加到angular.json中的资产数组,并且尝试使用web.config文件(不带web.config文件).如果我仅将基本的角度应用程序部署到Azure(即无需额外的代码来加载appsettings.json文件),它就可以工作(甚至没有web.config文件).我对angular(和一般而言的Web开发)还很陌生,已经在我能找到的所有地方进行了搜索,但是到目前为止,还没有任何解决方案.
I have tried explicitly adding the individual appsettings.json file to my assets array in angular.json and have also tried with and without a web.config file. If I deploy just a basic angular app to azure (i.e. without the additional code to load the appsettings.json file) it works (even without a web.config file). I am pretty new to angular (and web development in general) and have searched everywhere I could for a solution but nothing has fixed it so far.
推荐答案
每个@Martin Brandl注释都可以在我的web.config文件中添加以下内容.谢谢.
Per @Martin Brandl comment adding the following to my web.config file did the trick. Thanks.
<staticContent><mimeMap fileExtension=".json" mimeType="application/json" /></staticContent>
这篇关于Azure App Service上的Angular App-从Assets文件夹加载配置文件时出现404错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!