From f8fa20d71a72d52d48454835c192daa88557ef61 Mon Sep 17 00:00:00 2001
From: Pete Bacon Darwin <pete@bacondarwin.com>
Date: Thu, 25 Jan 2018 12:12:44 +0000
Subject: [PATCH] docs(aio): fix paths to imported CSS stylesheets (#21772)

The AOT compiler needs relative paths so that it can find
the imported stylesheets.

PR Close #21772
---
 .../component-styles/src/app/hero-details.component.css        | 3 ++-
 .../examples/component-styles/src/app/hero-team.component.ts   | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/aio/content/examples/component-styles/src/app/hero-details.component.css b/aio/content/examples/component-styles/src/app/hero-details.component.css
index fd938ca55c..7c381aa8d2 100644
--- a/aio/content/examples/component-styles/src/app/hero-details.component.css
+++ b/aio/content/examples/component-styles/src/app/hero-details.component.css
@@ -1,5 +1,6 @@
 /* #docregion import */
-@import 'hero-details-box.css';
+/* The AOT compiler needs the `./` to show that this is local */
+@import './hero-details-box.css';
 /* #enddocregion import */
 
 /* #docregion host */
diff --git a/aio/content/examples/component-styles/src/app/hero-team.component.ts b/aio/content/examples/component-styles/src/app/hero-team.component.ts
index b4f3bb5081..62b4ff5abc 100644
--- a/aio/content/examples/component-styles/src/app/hero-team.component.ts
+++ b/aio/content/examples/component-styles/src/app/hero-team.component.ts
@@ -5,7 +5,8 @@ import { Hero } from './hero';
 @Component({
   selector: 'app-hero-team',
   template: `
-    <link rel="stylesheet" href="assets/hero-team.component.css">
+    <!-- We must use a relative URL so that the AOT compiler can find the stylesheet -->
+    <link rel="stylesheet" href="../assets/hero-team.component.css">
     <h3>Team</h3>
     <ul>
       <li *ngFor="let member of hero.team">