Skip to content

"styles.css" and all other files in the "apps/styles" section of ".angular-cli.json" are ignored when running angular-cli from a path under a Windows 10 junction/directory symlink #6414

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
RobertSundling opened this issue May 23, 2017 · 6 comments
Assignees
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent severity3: broken

Comments

@RobertSundling
Copy link

RobertSundling commented May 23, 2017

Update: This only happens when the project path is underneath a Windows 10 junction or directory symlink. See comments below.

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.0.4
node: 7.5.0
os: win32 x64
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/cli: 1.0.4
@angular/compiler-cli: 4.1.3

Repro steps.

ng new style-test-app
cd style-test-app
echo h1 { background-color: red } >> src\styles.css
cat src\styles.css
ng serve

The log given by the failure.

None.

Desired functionality.

Mention any other details that might be useful.

@Brocco Brocco added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent severity3: broken labels May 23, 2017
@sumitarora
Copy link
Contributor

@RobertSundling Just tried to replicate the issue, seems to be working fine. Is there anything else I can do to reproduce?

@RobertSundling
Copy link
Author

@sumitarora So, to be clear, the "background-color: red" style is actually used when you do the exact steps above? For me, it doesn't show up at all. Using ng build rather than ng serve doesn't work either. That does put this line ...

exports.push([module.i, "/* You can add global styles to this file, and also import other style files */\nh1 { background-color: red } \n", ""]);

... in styles.bundles.js, but it does not seem to be used, and does not affect the styles.

I've uninstalled angular-cli and reinstalled various versions, multiple times. Is there anything else I can try?

I have the problem when I run this full sequence of commands:

npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli@latest
ng new style-test-app
cd style-test-app
echo h1 { background-color: red } >> src/styles.css
cat src/styles.css
ng serve

@RobertSundling RobertSundling changed the title styles.css" (and all other files in the "apps/styles" section of ".angular-cli.json") is ignored "styles.css" and all other files in the "apps/styles" section of ".angular-cli.json" are ignored May 23, 2017
@RobertSundling
Copy link
Author

RobertSundling commented May 23, 2017

OK, I was able to make it work here. This seems to be a problem with angular-cli and Windows 10 junctions and/or directory symbolic links (created with MKLINK /J or MKLINK /D).

On my system, these files exist in a folder C:\Code\angular\style-test-app. C:\Code is an NTFS junction to C:\Users\<username>\Documents\Code:

C:\>dir *code*
 Volume in drive C is System
 Directory of C:\

03/30/2017  10:50 PM    <JUNCTION>     Code [C:\Users\<username>\Documents\Code]

If I run ng serve or ng build in C:\Code\angular\style-test-app (where I normally access these files) then the styles are not used. (I also tried a Windows 10 symbolic link (MKLINK /D) and experienced exactly the same problem.)

However, if I run ng serve from C:\Users\<username>\My Documents\Code\angular\style-test-app instead, then the styles are used. Everything works!

It is definitely reading the file and processing styles.css in both cases, but in different ways (if I delete it, ng serve gives an error that it's missing, and ng build definitely pulls it into styles.bundles.js).

ng build produces very different output on the two situations. In the junction/symlink case, for example, it produces a gigantic (>2MB) main.bundle.js file, but in the plain directory case, it produces a tiny (6KB) main.bundle.js file and a 2MB vendor.bundle.js file (which does not exist in the symlink case).

The output of ng build --verbose from C:\Users\<username>\Documents\Code\angular\style-test-app (directory):

                  Asset       Size  Chunks                    Chunk Names
     main.bundle.js.map    3.89 kB    1, 4  [emitted]         main
    polyfills.bundle.js     167 kB    0, 4  [emitted]         polyfills
       styles.bundle.js    10.8 kB    2, 4  [emitted]         styles
       vendor.bundle.js    2.17 MB    3, 4  [emitted]  [big]  vendor
       inline.bundle.js    5.76 kB       4  [emitted]         inline
polyfills.bundle.js.map     205 kB    0, 4  [emitted]         polyfills
         main.bundle.js    6.15 kB    1, 4  [emitted]         main
   styles.bundle.js.map    14.3 kB    2, 4  [emitted]         styles
   vendor.bundle.js.map    2.66 MB    3, 4  [emitted]         vendor
   inline.bundle.js.map    5.82 kB       4  [emitted]         inline
            favicon.ico    5.43 kB          [emitted]
             index.html  625 bytes          [emitted]
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 3.69 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.1 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  3.02 kB       0
    chunk    {0} index.html 358 bytes [entry] [rendered]

The output of ng build --verbose from C:\Code\angular\style-test-app (junction/symlink):

                  Asset       Size  Chunks                    Chunk Names
    polyfills.bundle.js     167 kB    0, 3  [emitted]         polyfills
       styles.bundle.js    2.92 kB    1, 3  [emitted]         styles
         main.bundle.js    2.17 MB    2, 3  [emitted]  [big]  main
       inline.bundle.js    5.76 kB       3  [emitted]         inline
polyfills.bundle.js.map     212 kB    0, 3  [emitted]         polyfills
   styles.bundle.js.map    3.93 kB    1, 3  [emitted]         styles
     main.bundle.js.map    2.85 MB    2, 3  [emitted]         main
   inline.bundle.js.map    5.82 kB       3  [emitted]         inline
            favicon.ico    5.43 kB          [emitted]
             index.html  562 bytes          [emitted]
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {3} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.js.map (styles) 2.64 kB {3} [initial] [rendered]
chunk    {2} main.bundle.js, main.bundle.js.map (main) 2.1 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  3.02 kB       0
    chunk    {0} index.html 358 bytes [entry] [rendered]

Perhaps some alternate webpack option is automatically being applied if the current path is under a junction/symlink which breaks the styles?

@RobertSundling RobertSundling changed the title "styles.css" and all other files in the "apps/styles" section of ".angular-cli.json" are ignored "styles.css" and all other files in the "apps/styles" section of ".angular-cli.json" are ignored when running angular-cli from a path under a Windows 10 junction/directory symlink May 23, 2017
@RobertSundling
Copy link
Author

RobertSundling commented May 23, 2017

Full steps to reproduce on Windows

Initialize the project:

c:
mkdir \ng-dir
cd \ng-dir
ng new style-test-app
cd style-test-app
echo h1 { background-color: red } >> src\styles.css
type src\styles.css

Verify that the project correctly uses the styles when served from that directory:

c:
cd \ng-dir\style-test-app
ng serve

Next, create a junction and/or a directory symlink (must run with elevated privileges):

mklink /J c:\ng-junction c:\ng-dir
mklink /D c:\ng-link c:\ng-dir

Then, run from either the directory symlink or junction, and the styles are not used:

c:
cd \ng-link\style-test-app
ng serve

or

c:
cd \ng-junction\style-test-app
ng serve

Can replace ng serve with ng build and the resulting outputs are different (as in my previous comment), and the styles are used in the directory case but not in the junction or directory symlink case.

@filipesilva
Copy link
Contributor

Dupe of #2726, fixed in #6403.

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent severity3: broken
Projects
None yet
Development

No branches or pull requests

4 participants