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.  

Answer 1

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.

Answer 2

remove leading '..'?

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

or relative

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