Angular Cli and AOT issues

Question

I use Angular CLI 1.4.1 in my project and want to build using AOT compilation. However I faced two issues:

1) I have Shop module with Registration component. In the registration.component.css I added line

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

This file exists in the node_modules/@angular/material/prebuilt-themes/ folder. However when I run AOT build I get error message:

Error: Compilation failed. Resource file not found: C:/library/src/app/shop/book-registration/~@angular/material/prebuilt-themes/indigo-pink.css
    at ModuleResolutionHostAdapter.readResource (C:\library\node_modules\@angular\compiler-cli\src\compiler_host.js:387:19)

2) I have global file styles.css and it's included in the .angular-cli.json:

  "styles": [
    "styles.css"
  ]

When I run development build the styles from this file are available on the page. However after AOT build the styles are not loaded.

Please, advise.

Answer 1

remove import from your component

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

and add reference on this theme into angular-cli.json:

"styles" : [
  "styles.css",
  "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"]

and try run ng serve again