8

I'm using:

  • Angular v2.3.1
  • Angular CLI v1.0.0-beta.24
  • Node v6.9.2
  • Node-sass v4.1.1

I have a new Angular CLI project that does not load the component styles despite them being shown in the main.bundle.js file and no path errors being thrown (anymore).

The angular-cli.json file has defaults.styleExt: "scss" and apps.styles: ["styles.scss","path/to/bootstrap.css"]. defaults.inline for style and template are both false.

Global and Bootstrap styles are being loaded, but not any from components.

Directory Structure

|- src
  |- index.html
  |- styles.scss
  |- scss
    |- _colors.scss
    |- _modals.scss
    |- _overrides.scss
    |- _utils.scss
  |- app
    |- components
      |- app-header
        |- app-header.component.ts
        |- app-header.component.html
        |- app-header.component.scss
    |- pages
    |- app-routing.module.ts
    |- app.component.ts
    |- app.module.ts

styles.scss

@import './scss/_colors';
@import './scss/_overrides';
@import './scss/_utils';
@import './scss/_modals';

html, body {
  width: 100%;
  height: 100%;
  font-family: 'Roboto', 'Helvetica', sans-serif;
}

app-root {
  display: table;
  width: 100%;
  height: 100%;
}

app-header.component.ts

import {Component} from '@angular/core';

@Component({
  selector: 'app-header',
  templateUrl: './app-header.component.html',
  styleUrls: ['./app-header.component.scss']
})
export class AppHeaderComponent {}

app-header.component.scss

@import '../../../../scss/_colors';

:host {
  display: table-row;
  height: 1px;
  background: #FFF;
}

.header-stripe {
  width: 100%;
  height: 3px;
  background: $AMARANTH;
}

.header-content {
  padding: 5px 20px;
  width: 100%;
  position: relative;
  border-bottom: solid 1px $ALTO;
}

index.html

<!doctype html>
<html>
  <head>
    <base href="./">
    <title>Test CLI App</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400" />
  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>

Some Context...

I started this project using the Angular2 Heroes tutorial. I was having trouble getting testing and other things to 'just work'. During my research, I decided to try out using Angular CLI since it's supposed to include a functioning test bed and hopefully some other benefits.

Initially, I had lots of JS errors regarding my template and style paths, and after some digging and digging, I was able to get rid of the errors. My webpack build is now supposedly "valid".

In my angular-cli.json file, I updated the defaults.styleExt to be scss, and I was able to get global styles included by adding my styles.scss file to apps.styles. My core layout styles and Bootstrap styles are now being applied to the app.

My issue is that for some reason, my component styles are not being loaded. As I said, they appear in the main.bundle.js after I run ng build, and I've confirmed that they are in the main.bundle.js that is being loaded in chrome when I run ng serve (not sure if those files are the same since I can run ng serve without having run ng build first). It also looks as if the variables are being correctly parsed by node-sass.

Things that didn't work:

  • In angular-cli.json, app.styles: ["app/**/*.scss"]. It says cannot resolve path when being re-built.

  • In component file, styleUrls: [require('./app-header.component.scss')]. Throws console error "Uncaught Error: Cannot find module '.' at webpackMissingModule (main.bundle.js:1152) []"

  • In component file, import componentStyles from './app-header.component.scss' and then styles: [componentStyles]. Throws "Cannot find module './app-header.component.scss'." when building

I'm surprised this is so complicated, I must be missing something stupid.

Community
  • 1
  • 1
coblr
  • 3,008
  • 3
  • 23
  • 31

4 Answers4

4

Late to the party, but came across the same thing. Throwing this out there as another option for someone who comes across this thread.

Everything was rendering, styles were getting written as mentioned above, but nothing was actually showing.

Found this article on Shadow DOM Strategies that solved my problem.

Specifically setting encapsulation: ViewEncapsulation.None made styles show correctly for the given component.

import { Component, OnInit, ViewEncapsulation } from '@angular/core';

xinthose
  • 3,213
  • 3
  • 40
  • 59
Damon
  • 4,151
  • 13
  • 52
  • 108
0

Did you try to add "app/**/*.scss" to apps.styles?

I use something like this in my gruntfile to concat all less files to one

Mephiztopheles
  • 2,228
  • 1
  • 12
  • 25
  • I did. It says it cannot resolve that path. I'm trying to generate a new app and slowly migrate to using scss to see where I might have gone wrong. Could've messed up something when migrating modules/components from non-CLI app. – coblr Jan 04 '17 at 18:55
  • is your component loaded? without style but loaded? – Mephiztopheles Jan 04 '17 at 18:59
  • yes, component is loaded and technically the styles are loaded as well (I can see them when browsing 'sources' in dev tools), but they are not being applied. – coblr Jan 04 '17 at 19:24
0

It seems that in my case, the only way to fix was to actually use the Angular CLI to generate all of my components, services and pipes and basically rebuild everything that way.

I first generated a new project, then updated my angular-cli.json file to use SCSS. From there, I manually did ng g <whatever> to rebuild everything (about 20 components and 3 services). I'm now copying and pasting all the custom methods and fun stuff one by one and verifying things are working after each step.

This is kind of a pain because the new files all seem to be otherwise identical but the CLI version of my app was not happy when I just dropped in components and things from the non-CLI generated app. Maybe it was the directory structure? Maybe I just bulldozed something? I don't know.

I hope someone in the future is able to drop a reason as to why this may have happened.

Dharman
  • 30,962
  • 25
  • 85
  • 135
coblr
  • 3,008
  • 3
  • 23
  • 31
0

After updating my angular app from 7 to 8 I experienced the same behaviour. After a few hours I did find the cause in my case: I'm using BrowserModule.withServerTransition({appId: APP_ID}) and my APP_ID was structured like xx.xxx.xxxxx. After removing all the dots from the APP_ID it all worked again as expected.

Frederik Strelczuk
  • 1