尽管进行了重新构建,但Angular应用程序仍无法刷新更改内容

时间:2019-09-07 18:01:26

标签: angular asp.net-core asp.net-web-api

我已经开始使用ASP.Net核心Web API作为后端的前端Angular应用程序的项目。但是,不是使用SPA的默认模板(用于Angular),而是我自己决定这样做。因此,我创建了一个空白的ASP.NET Core项目,然后使用Angular CLI添加了Angular项目。从字面上看,我在Angular项目配置中唯一更改的是angular.json中的outputPath-我将其更改为../wwwroot。

然后我在.Net应用程序的Startup类中设置所有内容。

我从ng serve开始创建角度,然后使用Visual Studio构建.net项目。但是,Angular应用程序在检测到其文件之一中的更改时不会刷新/更改内容。有趣的是,它进行了一些重建,但是除非我停止应用程序,运行ng build,然后再使用ng serve重新启动,否则新内容将不会出现。我相信我弄乱了两个项目中的配置,因此将不胜感激。我在下面提供了一些代码

这是我的Startup类(我发现所有与DI或授权设置有关的东西都隐藏了,因为我发现它无关紧要)


public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);

        //Setting up DbContext, DI and authorization

        services.AddSpaStaticFiles(spa =>
        {
            spa.RootPath = "wwwroot";
        });
    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        app.UseAuthentication();

        app.UseStaticFiles();
        app.UseSpaStaticFiles();

        app.UseMvc();

        app.UseSpa(spa =>
        {
            spa.Options.SourcePath = "client-app";
        });
    }
}

这是我的angular.json


    {
        "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
        "version": 1,
        "newProjectRoot": "projects",
        "projects": {
            "client-app": {
                "projectType": "application",
                "schematics": {},
                "root": "",
                "sourceRoot": "src",
                "prefix": "app",
                "architect": {
                    "build": {
                        "builder": "@angular-devkit/build-angular:browser",
                        "options": {
                            "outputPath": "../wwwroot",
                            "index": "src/index.html",
                            "main": "src/main.ts",
                            "polyfills": "src/polyfills.ts",
                            "tsConfig": "tsconfig.app.json",
                            "aot": false,
                            "assets": [
                                "src/favicon.ico",
                                "src/assets"
                            ],
                            "styles": [
                                "src/styles.css"
                            ],
                            "scripts": []
                        },
                        "configurations": {
                            "production": {
                                "fileReplacements": [
                                    {
                                        "replace": "src/environments/environment.ts",
                                        "with": "src/environments/environment.prod.ts"
                                    }
                                ],
                                "optimization": true,
                                "outputHashing": "all",
                                "sourceMap": false,
                                "extractCss": true,
                                "namedChunks": false,
                                "aot": true,
                                "extractLicenses": true,
                                "vendorChunk": false,
                                "buildOptimizer": true,
                                "budgets": [
                                    {
                                        "type": "initial",
                                        "maximumWarning": "2mb",
                                        "maximumError": "5mb"
                                    },
                                    {
                                        "type": "anyComponentStyle",
                                        "maximumWarning": "6kb",
                                        "maximumError": "10kb"
                                    }
                                ]
                            }
                        }
                    },
                    "serve": {
                        "builder": "@angular-devkit/build-angular:dev-server",
                        "options": {
                            "browserTarget": "client-app:build"
                        },
                        "configurations": {
                            "production": {
                                "browserTarget": "client-app:build:production"
                            }
                        }
                    },
                    "extract-i18n": {
                        "builder": "@angular-devkit/build-angular:extract-i18n",
                        "options": {
                            "browserTarget": "client-app: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": [
                                "src/styles.css"
                            ],
                            "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": "client-app:serve"
                        },
                        "configurations": {
                            "production": {
                                "devServerTarget": "client-app:serve:production"
                            }
                        }
                    }
                }
            }
        },
        "defaultProject": "client-app"
    }

1 个答案:

答案 0 :(得分:0)

由于您正在使用其他服务器而不是其中包含的webpack开发服务器,因此您需要构建输出并将其放置在自己的服务器wwwroot中。可能很乏味,但是最好的选择是在开发时在构建上使用--watch标志

尝试此操作以进行本地开发。

ng build --watch