Angular AOT compiler can't find project-relative paths within components

Question

I'm in the (painful) process of AOT-ing an app I've been making, but have hit a bit of a hurdle when it comes to specifying URL's for the components.

Works in AOT, but not JIT 😖

@Component({
  selector: "home-page",
  templateUrl: "./home.html",
  styleUrls: ["./home.css"],
}) 

Works in JIT, but not AOT 😖

@Component({
  selector: "home-page",
  templateUrl: "pages/home/home.html",
  styleUrls: ["pages/home/home.css"],
})

Question

Why does the AOT Compiler resolve paths relative to the current component, whereas the JIT compiler expects absolute path from the project root? And what is the standard, best practice way to get around this?

More Details

• This error orrours, when trying to run npm run ngc (or node_modules/.bin/ngc -p tsconfig-aot.json)
• My project structure was origionally based on generator-ng-fullstack (via Yeoman).
• It's not using the Angular CLI, or WebPack.
• Angular 4
• Here's my tsconfig-aot.json. (And, here's my JIT tsconfig.json)
• And for reference, here is my client-side source directory.

What I've tried so far

• Attempting to import and read the html template and stylesheet beforehand, and pass the value in as a string- but this is a terrible approach, and can't be right
• Specifying the template and style paths in many different ways; relative, absolute, and everything between
• Searching issues on the Angular repo, this was the only one I found that was relevant, but had no clear outcome: https://github.com/angular/angular/issues/11554
• Following the official Angular AOT documentation, word-for-word, and like it's the actual Bible- but they've just brushed over this issue
• With the Yeoman generator, there are two client-side directories, one for dev, and the other for dist. Gulp is used to build:dist. Since AOT will only need to happen in dist, maybe a potential solution could be to use Gulp to change the path structures on build:dist?