Angular2 does not inject template CSS when refreshing the page

Question

I have an app which uses the selector portfolio-app and has 2 stylesheets - '../app/styles/templateMobile.css', '../app/styles/templateOther.css'

Now when I open my app from the default URL (localhost:3000 ATM), the stylesheets get applied properly. But when I go to a different route, and press refresh (F5), the template styles are not applied to the page. The same thing happens when I start on a different route.

There are no error messages in the console.

I tested this in firefox, chrome and safari, incognito mode and with clearing the browser cache. I also tested on a LG G2, iPhone, iPad and various android emulators (Nexus 9, Nexus 10, Galaxy Nexus). All the time the result is the same.

app.component:

import { Component } from 'angular2/core';
import {ViewEncapsulation} from 'angular2/core';
import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';

import { LandingComponent } from './landing.component';
import { PortfolioComponent } from './portfolio.component';
import { PagesService } from './pages.service';

@Component({
    selector: 'portfolio-app',
    templateUrl: '/app/views/template.html',
    styleUrls: ['../app/styles/templateMobile.css', '../app/styles/templateOther.css'],
    encapsulation: ViewEncapsulation.None,
    directives: [ROUTER_DIRECTIVES],
    providers: [ROUTER_PROVIDERS, PagesService]
})

@RouteConfig([
    { path: '/landing', name: 'Landing', component: LandingComponent, useAsDefault: true },
    { path: '/portfolio', name: 'Portfolio', component: PortfolioComponent }
])

export class AppComponent {
    landing = true;
    portfolio = false;

    changeMiniNavLanding = function () {
        this.landing = true;
        this.portfolio = false;
    }

    changeMiniNavPortfolio = function () {
        this.landing = false;
        this.portfolio = true;
    }
}

main.ts :

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

If you need additional information, please ask, or browse trough the gitHub repository. (all relevant files are in the app folder).

Thanks for the help.

No, just the standard message that Angular 2 is running in the development mode — Miha Šušteršič, May 02 '16 at 18:12

Abdulrahman Alsoghayer · Accepted Answer · 2016-05-08T02:20:00.697

12

I cloned your repo, your styles are loading fine. The issue you are having is not related to CSS injection. It's related to "if you don't mind me saying" bad design and not using ViewEncapsulation.

Before I explain the issue, I have to say that in your current way of using CSS, you will be better of using one global CSS file.

Explanation
When you don't use view encapsulation, every CSS you import will stick in the page until you refresh it. It will never be removed. And it will be applied to any element on the page that it applies to. And because it's inserted only when you visit the corresponding component/route, when you refresh the page, some CSS doesn't get injected into the page because you haven't visited the component it was on.

I will take the class appContainer as an example to help explaining the problem.

In styles/landingOther.css you have:

.appContainer {
    width: 60%;
}

Because your default route is /landing, when you visit the page http://localhost:3000/, the .appContainer class will be injected to the page and will stay on the page until you refresh. So, when you route to /portfolio, appContainer is still injected in the page and it will get applied. But, when you directly go to http://localhost:3000/portfolio, the landing component is never visited, therefore the .appContainer class was never injected in the page so it will not get applied. And same goes for other classes. I hope you get the logic.

Also, a semi-related note, the css file name in your portfolio.component.ts is wrong. It's in capital case while the actual file is small cased.

edited May 08 '16 at 02:20

answered May 08 '16 at 02:09

Abdulrahman Alsoghayer

16,462
7
51
56

Hey, the whole reason I'm using view encapsulation is this - http://stackoverflow.com/questions/36224276/angular2-adding-ngcontent-mav-x-to-styles. So you would suggest that I just use a single stylesheet and apply it to my root component? – Miha Šušteršič May 08 '16 at 07:27
@MihaŠušteršič Based on the way you define your styles. I suggest you put it in the index.html just like usual css out of the components. And remove the `ViewEncapsulation.None` because it only applies if you have css defined in the component. – Abdulrahman Alsoghayer May 08 '16 at 07:35
@MihaŠušteršič in other words, if you have a component that you want to isolate from the global css defined in `index.html`. Add some styles to either `styles` or `styleUrls`. If you don't want it to be isolated, don't add any styles to it . – Abdulrahman Alsoghayer May 08 '16 at 07:37
Well for this project it works, since I only have 3 stylesheets that are no really big - I can just put all the definitions in a single file to limit http requests. But what happens if you build a big app that has 40+ stylesheets? In that case it would make much more sense to apply styles to components separately, but I can't find a way to do this without viewencapsulation and absolute paths – Miha Šušteršič May 08 '16 at 07:42
@MihaŠušteršič you can always do what you were doing before in addition to a global css. All you need to keep in mind is the classes that will be used globally. i.e. `appContainer` you need it throughout the app, right ? then put on the global css. Any specific styles you can put them in their component. – Abdulrahman Alsoghayer May 08 '16 at 07:52

IgorL · Answer 2 · 2016-05-03T08:03:52.350

1

remove leading '..'?

 styleUrls: ['/app/styles/templateMobile.css', '/app/styles/templateOther.css']

or relative

['./styles/templateMobile.css', './styles/templateOther.css']

edited May 03 '16 at 08:03

answered May 02 '16 at 20:11

IgorL

1,169
10
19

this just brakes the css injection. Angular2 currently only works with relative pathing - check http://stackoverflow.com/questions/35188803/angular-2-external-style-doesnt-get-inlined-to-header – Miha Šušteršič May 03 '16 at 07:38
try ['./styles/templateMobile.css', './styles/templateOther.css'] – IgorL May 03 '16 at 08:03
still the same issue, the css will load, then when I change the route and refresh, it's not there – Miha Šušteršič May 03 '16 at 08:27
it's still the same, tried clearing cache, incognito mode, and safari, firefox, chrome. If I start on a different route, or refresh the page while on a different route the template styles do not load – Miha Šušteršič May 04 '16 at 08:26

Angular2 does not inject template CSS when refreshing the page

2 Answers2