Azure 未返回静态资产 - Uncaught SyntaxError: Unexpected token '<'

Posted 2023-04-12

【中文标题】Azure 未返回静态资产 - Uncaught SyntaxError: Unexpected token \'<\'

【英文标题】：Azure not returning static assets - Uncaught SyntaxError: Unexpected token '<'Azure 未返回静态资产 - Uncaught SyntaxError: Unexpected token '<'

【发布时间】：2021-12-21 18:58:59

【问题描述】：

我已经被这个问题困扰了好几天了，不知道如何解决这个问题。如果有人可以在这里帮助我，那就太好了。

我有一个托管在 Azure Web 应用程序上的 Angular 应用程序。一切正常。但是，有时无法加载部分或全部已编译的 JS 文件（main.js、polyfills.js、runtime.js scripts.js 或 styles.css）。

我用来构建ng build --aot --prod --output-hashing none的代码

此时应用程序返回 index.html 导致浏览器上显示以下错误。

Uncaught SyntaxError: Unexpected token '<'

应用程序需要一个 JS，但由于某种原因它正在获取 index.html。结果，错误指向 html 文件的第一个字符。 <.

我已经包含了我的 Package.Js 和 Angular.js 文件的一部分。

    "name": "myapp",
    "version": "0.0.0",
    "scripts": 
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build --aot --prod --output-hashing none",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
    ,
    "private": true,
    "dependencies": 
     ...

Angular.JSON

    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": 
        "MyAPp": 
            "projectType": "application",
            "schematics": 
                "@schematics/angular:application": 
                    "strict": true
                
            ,
            "root": "",
            "sourceRoot": "src",
            "prefix": "app",
            "architect": 
                "build": 
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": 
                        "allowedCommonJsDependencies": [
                            "lodash",
                            "@opentelemetry/api",
                            "stacktrace-js",
                            "error-stack-parser",
                            "stacktrace-gps",
                            "stack-generator"
                        ],
                        "outputPath": "../wwwroot",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "aot": true,
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "src/custom-theme.scss",
                            "src/controls.css",
                            "src/styles.css"



                        ],
                        "scripts": [


                        ]
                    ,
                    "configurations": 
                        "production": 
                            "fileReplacements": [
                                "replace": "src/environments/environment.ts",
                                "with": "src/environments/environment.prod.ts"
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "namedChunks": false,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "2mb"
                                ,
                                
                                    "type": "anyComponentStyle",
                                    "maximumWarning": "2mb",
                                    "maximumError": "3mb"
                                
                            ]
                        
                    
                ,
                "serve": 
                    "builder": "@angular-devkit/build-angular:dev-server",
                    "options": 
                        "browserTarget": "MyApp:build"
                    ,
                    "configurations": 
                        "production": 
                            "browserTarget": "MyApp:build:production"
                        
                    
                ,
                "extract-i18n": 
                    "builder": "@angular-devkit/build-angular:extract-i18n",
                    "options": 
                        "browserTarget": "MyApp:build"
                    
                ,
                "test": 
                    "builder": "@angular-devkit/build-angular:karma",
                    "options": 
                        "main": "src/test.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.spec.json",
                        "karmaConfig": "karma.conf.js",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [

                        ],
                        "scripts": []
                    
                ,
                "lint": 
                    "builder": "@angular-devkit/build-angular:tslint",
                    "options": 
                        "tsConfig": [
                            "tsconfig.app.json",
                            "tsconfig.spec.json",
                            "e2e/tsconfig.json"
                        ],
                        "exclude": [
                            "**/node_modules/**"
                        ]
                    
                ,
                "e2e": 
                    "builder": "@angular-devkit/build-angular:protractor",
                    "options": 
                        "protractorConfig": "e2e/protractor.conf.js",
                        "devServerTarget": "MyApp"
                    ,
                    "configurations": 
                        "production": 
                            "devServerTarget": "MyApp:serve:production"
                        
                    
                
            
        
    ,
    "defaultProject": "MyAPP",
    "cli": 
        "analytics": "xxxx-xcx-4xxf-xxxx-4cxxxxxxx9b5"
    

StartUp.cs

此外，Startup.cs 文件看起来像这样，

public class Startup
    
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        
        

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        

            if (env.IsDevelopment())
            
                app.UseDeveloperExceptionPage();
            

            app.Use(async (context, next) =>
            
                    await next();
                    context.Request.Path = "/index.html";
                    await next();
              
                

            );

            app.UseStaticFiles();
        
    

当我收到错误时，我提到的文件在内存缓存中。请看附件。

注意：如果您需要任何信息或代码，请告诉我。此时我需要对这个错误进行排序:)

服务器错误：

System.InvalidOperationException：无法设置 StatusCode，因为响应已经开始。

这是在上面给出的 StartUp.cs 文件中的context.Request.Path = "/index.html"; 处抛出的。

【问题讨论】：

您是否正在针对此部署进行编辑？ IE。开发周期：编辑 -> 推送 repo -> 服务器构建和部署？

不，我不是。我正在通过 Visual Studio 发布。

另外，请将标题更改为“Azure 并不总是返回静态资产”。

所以你是在 VS 中编译，然后只将构建的资产部署（上传）到 Azure？

完成。实际上是 Azure。

【参考方案1】：

感谢@Sharon Watinsan 和@Randy Casburn 解决了这个问题，转换它是帮助其他社区成员解决类似问题的答案。

System.InvalidOperationException：无法设置 StatusCode，因为 响应已经开始

对于@McGuireV10 建议的SO THREAD 之后出现的上述错误，

当我的中间件能够完全处理请求时（无论是 将 HTTP 升级到 WS，或者发回回显客户端 HTML）它应该 不要将上下文交给下一个代表。然而，在这个非常 简单示例其他请求（例如浏览器尝试检索 favicon) 我的中间件没有做任何事情，所以解决方案是这样的：

finally

    if(!context.Response.HasStarted)
        await next(context);