Отладка Angular 8. net core spa, css файлов, появляющихся непосредственно из src / assets / css, не из dist / assets / css, и s css не компилируется - PullRequest
Новая
       40

Отладка Angular 8. net core spa, css файлов, появляющихся непосредственно из src / assets / css, не из dist / assets / css, и s css не компилируется

0 голосов
/ 03 апреля 2020

. Net Core 3.1 (обновлен с 2.2) Angular 8 (обновлен с 7) SPA, работающий на VS 2019 (ранее на VS 2017).

Моя тема. css файлы были получены либо из node_modules / @ angular / material / prebuilt-themes, либо из их файлов .s css, как указано в angular. json, exerpt: 

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
            "src/favicon.ico",
            "src/assets"
        ],
        "styles": [
            /* Everything that will get compiled into the styles.css bundle */
            "src/assets/css/styles.css",
            /* Angular material pre-built themes - bring over from node_modules/@angular/material/prebuilt-themes */
            {
                "input": "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
                "bundleName": "assets/css/angular-material-themes/deeppurple-amber",
                "inject": false /* i.e. don't add to head of index.html automatically */
            },
            ...
            /* Our Angular material themes - build from their .scss files in src/styles/angular-material-themes  */
            {
                "input": "src/styles/angular-material-themes/indigo-slateblue.scss",
                "bundleName": "assets/css/angular-material-themes/indigo-slateblue",
                "inject": false
            },
            ...
        ],

SPA Angular запускается автоматически при отладке приложения в VS, соответствующие выдержки из Startup.cs: 

    public void ConfigureServices(IServiceCollection services) {

        services.AddControllers();
        services.AddHttpContextAccessor();
        services.AddSpaStaticFiles(configuration => {
            configuration.RootPath = "ClientApp/dist";
        });
        ...

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env, IHttpContextAccessor httpContextAccessor, IMapper autoMapper) {
        ...
        app.UseSpa(spa => {
            spa.Options.SourcePath = "ClientApp";
            if (env.IsDevelopment()) {
                spa.UseAngularCliServer(npmScript: "start");

            }
        });

Моя тема css файлы находятся в процессе обслуживается службой, аналогично статье Medium (по сути, получая имя темы и затем загружая ее, добавляя новый к ).

Получаю в моей консоли Chrome: 

Refused to apply style from 'https://localhost:44396/assets/css/angular-material-themes/indigo-pink.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

, что является результатом отсутствия файла. css и индекса загрузки. html (проверено при попытке загрузить его непосредственно в другой вкладке) , При запуске файлы в dist / assets / css / angular -material-themes не обновляются, и я обнаружил, что обслуживаемые файлы являются прямыми из src / assets / css. Поскольку файлы темы материала angular приходят из других источников, они вообще не загружаются. Я могу вручную C & P старую версию. css файлов в src / assets / css, перезапустить приложение, и они нормально загружаются. Кроме того, до обновления до Angular 8 все это работало прекрасно.

Любая помощь, чтобы заставить это работать во время отладки в VS2019 с Angular 8?

1 Ответ

0 голосов
/ 03 апреля 2020

Итак, файлы .s css были скомпилированы в файлы. js и. js .map (хотя и не знаю, куда они были помещены), поэтому добавив следующее в параметры сборки, мы получили. css файлов в качестве вывода: 

"build": {
    ...
    "options": {
      ...
      "extractCss": true,
      "styles": [
        ...
      ]
    }
},

Согласно статье Юри Динамически загружать CSS с Angular CLI , раздел под названием «Подсказка: отложенная загрузка в разработке».

Так что теперь это, очевидно, работает, и стандартная тема angular материала. css файлы, и мои собственные файлы темы .s css теперь компилируются. Я до сих пор не знаю, где размещаются выходные файлы css, поэтому, если кто-нибудь знает, пожалуйста, поделитесь!

...