Global Styles doesn't works with cygwin

[nweldev]

OS?

Windows 10 with Cygwin

Versions.

angular-cli: 1.0.0-beta.21
node: 6.9.1
os: win32 x64

Repro steps.

In any new project (ng new repro-css), the styles.css styles (and any other global style file) doesn't applied in the browser when you run ng serve from cygwin.

In order to test, you can edit the styles.css file as follow :

body {
    color: red;
}

run ng serve and in the browser, inspect the body element. Nothing ....

my angular-cli.json file is :

{
  "project": {
    "version": "1.0.0-beta.21",
    "name": "angular-todo"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [
        "vendor.ts",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

The log given by the failure.

styles.css is in the styles.bundle.js file and is imported, but isn't applyied.

Mention any other details that might be useful.

The issue also apply with the bootstrap 4 css, following the global library install guide.
See #3202

It work the same with scss.

[ar53n]

Hello, you shouldn't add in app-root component global files.

1. Add file in angular-cli.json and file in path ./src;
2. Or you can put file in ./dist/assets and write this css file in index.html

[nweldev]

Thank you @ar53n for the second workaround, I don't know why I didn't thought about it ... but I can't use Sass anymore with this solution, or I should create my own compilation task ...
But the first one (file src/style.css added to angular-cli.json apps[0].styles) don't work anymore, and that the real issue here ...

[ar53n]

@noelmace try update angular-cli and create new project, because my css file work good to index.html.
if quickly need Sass->css file you can write gulp or grunt task for one.

But "angular-cli": "1.0.0-beta.19-3" work good.

[nweldev]

@ar53n I have this issue in any new project created with angular-cli 1.0.0-beta.21, and in any existing project where I try to upgrade angular-cli to this version.

When you said "because my css file work good to index.html", do you say that your project's apps[0].styles works with angular-cli 1.0.0-beta.21 and that you couldn't reproduce this issue ?

Maybe I should in my case temporarily downgrade to angular-cli 1.0.0-beta.19-3, but this is a massive issue for the beta-21.

[nweldev]

same issue with 1.0.0-beta.19-3

[ar53n]

@noelmace update all packages and in beta.21 work correctly. Check you project

"styles": [
        "styles.css"
      ]

[nweldev]

This works fine with ng build, but not with ng serve. I think I checked everything now. See my project angular-buzz, I be really thankful i you can find something I didn't think about.

[JiriBalcar]

@noelmace I did try that with clone of your project and it works for me. You have to put in your angular-cli.json

"styles":` [
          "public/styles/index.scss"
      ],

Then it works as expected.

[nweldev]

This is an issue with cygwin ! I tried exactly the same project with git bash, and everything is fine. I think cygwin isn't supported, so I close the issue (and definitively leave cygwin). Fell free to reopen it if an issue about cygwin is important. Thanks for your help.

[verglor]

I have the same problem on Windows 10 (@angular/cli: 1.0.0, node: 7.5.0, os: win32 x64) using standard command line (cmd)

[chorrylan]

Does the directory path for your project include a windows junction point?
I have my project in a directory that has a junction point to a directory on another drive (because I ran out of space on my original drive).
If I build and serve the app in a path including the junction point I get the symptoms above:
ie: css referenced in .angular-cli.json get included into styles.bundle.js but have no visible effect on the html when display in a browser.

If I change to the actual drive and directory the project is contained in (ie the exact same project an files but without the junction point).
It works perfectly/correctly.

I'm using @angular/cli v1.3.1
and there was a patch solving a very similar issue in V1.1
3ca583b
#2726

which appears to be in the copy I'm executing but unfortunately doesn't fix it for me :-(

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}