Angular-cli: [Bug] Inconsistent parsing of Component `styleUrls` fails CSS loading

[Meligy]

Please provide us with the following information:

1. OS?

Mac OSX El Capitan

1. Versions.

angular-cli: local (v1.0.0-beta.10, branch: master)
node: 6.2.2
os: darwin x64

in a Terminal: node --version and paste the result here:

v6.2.2

1. Repro steps.

ng new sample-test
cd sample-test
npm link angular-cli    # because running from master, pulled today
npm start

Open http://localhost:4200 in browser.
Open app/app.component.ts in code editor.

Change styleUrls: ['app.component.css'] to styleUrls : ['app.component.css'].
Did you see the difference? styleUrls: becomes styleUrls :. We add a single space!

Go back to the browser, see the app fail. In the console you see:

You can fix this by prepending app/ to the styleUrl path, so the line becomes:
styleUrls : ['app/app.component.css']
Except, now if you delete the extra space, changing styleUrls : to styleUrls:, you'll get the same error again, and you have to remove the app/ path prefix for it to work again.

This is confusing, so a summary:

• These work:
  styleUrls: ['app.component.css'] <- Expected
  styleUrls : ['app/app.component.css'] <- What?!
• These fail:
  styleUrls : ['app.component.css'] <- What?
  styleUrls: ['app/app.component.css'] <- Expected

Try it.

1. The log given by the failure. Normally this include a stack trace and some
   more information.

In browser console:

zone.js:101GET http://localhost:4200/app.component.css 404 (Not Found)
browser_adapter.js:93EXCEPTION: Failed to load app.component.css
browser_adapter.js:84EXCEPTION: Failed to load app.component.css
browser_adapter.js:93EXCEPTION: Error: Uncaught (in promise): Failed to load app.component.css
browser_adapter.js:84EXCEPTION: Error: Uncaught (in promise): Failed to load app.component.css
browser_adapter.js:84STACKTRACE:
browser_adapter.js:84Error: Uncaught (in promise): Failed to load app.component.css
    at resolvePromise (zone.js:538)
    at PromiseCompleter.reject (zone.js:515)
    at application_ref.js:367
    at ZoneDelegate.invoke (zone.js:323)
    at Object.onInvoke (ng_zone_impl.js:53)
    at ZoneDelegate.invoke (zone.js:322)
    at Zone.run (zone.js:216)
    at zone.js:571
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.onInvokeTask (ng_zone_impl.js:44)
zone.js:461 Unhandled Promise rejection: Failed to load app.component.css ; Zone: angular ; Task: Promise.then ; Value: Failed to load app.component.css
zone.js:463 Error: Uncaught (in promise): Failed to load app.component.css(…)

1. Mention any other details that might be useful.

If you run the Angular 5 minutes demo in Plunker, and add a app/app.component.css file to it, then try to add it to the AppComponent, you'll find the following combination:

• These work:
  styleUrls: ['app/app.component.css']
styleUrls : ['app/app.component.css']
• These fail:
  styleUrls: ['app.component.css']
styleUrls : ['app.component.css']

This shows 2 things:
The whitespace does NOT make a difference,
BUT, the path needs to be root relative, not component relative.
(Try here)

My personal guess is that this is related to Webpack change, although I haven't tested it in systemJS folder, but it was mentioned in https://github.com/angular/angular-cli/issues/1459#issuecomment-236338149 that the Webpack version only uses a raw loader to work with the CSS files. Maybe it's a regex that needs fixing, or better strategy. Note sure.

[juristr]

Just wanted to report this as well. Same happens with templateUrl.

// Update: Hmm...it's kinda related, but by re-verifying I guess my issue is different. Going to try to reproduce it

// Update 2: Filed a new one #1502

[TheLarkInn]

This I believe is fixed in an underlying node module. I'll make the change to fix this. This issue is related to my angular2-template-loader

[TheLarkInn]

https://github.com/TheLarkInn/angular2-template-loader/pull/11

[juristr]

In fact, I figured this might be something related to some loader module rather than the CLI, but wasn't sure. Thx for taking care, I'll follow closely :smiley:

[juristr]

Btw, any idea about issue #1502 I reported? If have a hint where to look for I can definitely try to fix it

[filipesilva]

@TheLarkInn we still need a release angular2-template-loader and an update to the version we use, correct?

[TheLarkInn]

Yes I need to make sure that is fixed and then I'll cut a release.

[chiefmc]

Can confirm this behavior as well.

@TheLarkInn when can we expect the fixed angular2-template-loader?

Thanks.

[angular-automatic-lock-bot[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._}