Angular2 does not inject template CSS when refreshing the page

remove leading '..'?

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

or relative

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

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.