0

I've got an issue currently when building my Angular 2 app using @angular/cli.

When I run ng build --prod to generate a dist build, everything works out fine, except that the generated styles.7b24f3befc9c595b00b9.bundle.css doesn't get interpreted properly in the browser, thus styles do not apply.

I do notice in the console there is a message that says:

Resource interpreted as Stylesheet but transferred with MIME type application/octet-stream: "http://angular2.local/styles.7b24f3befc9c595b00b9.bundle.css".

The CSS file contents itself is proper, since copy/pasting that code into a tag properly gets interpreted by the browser and styles apply to elements.

Any help would be appreciated,

Thanks in advance

CLARIFICATION: Everything works in development (ng build), but when trying to build for prod (ng build --prod) the styles don't get interpreted properly. Both development and production environment.ts files are identical save for the production flag.

P.S. here are my versions: @angular/cli: 1.0.0-rc.0 node: 6.9.2 os: darwin x64

@angular/cli: 1.0.0-rc.0
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/compiler-cli: 2.4.8

.angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "angular2"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/primeng/resources/themes/bootstrap/theme.css",
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/nvd3/build/nv.d3.min.css",
        "assets/AmazeUI/css/amazeui.css",
        "assets/AmazeUI/css/admin.css",
        "style.scss"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/d3/d3.min.js",
        "../node_modules/nvd3/build/nv.d3.min.js",
        "../node_modules/amazeui/dist/js/amazeui.js",
        "../node_modules/moment/moment.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {
    }
  }
}
Andrew Ip
  • 23
  • 1
  • 7
  • Post your `angular-cli.json` file. – kind user Mar 03 '17 at 14:26
  • Added .angular-cli.json file @Kinduser – Andrew Ip Mar 03 '17 at 14:56
  • I'm not 100% sure, but you miss the `styles.css` file in the `assets` array in the `angular-cli.json` file. Add it and try again. And by the way - Angular expects `css` file, you are using `style.scss`. – kind user Mar 03 '17 at 14:57
  • The default is set to scss. Angular/cli supports sass, it's just that the production build generated css doesn't get loaded properly for some reason. The actual content of that file is correct, it is properly formatted css, but for some reason the DOM won't take it. If I copy paste that content into a style tag it works. – Andrew Ip Mar 03 '17 at 15:07
  • Your suggestion about adding the style to assets didn't work unfortunately. – Andrew Ip Mar 03 '17 at 15:07
  • Check the sources for style files and try to delete this scss file or even try to delete everything expect the `styles.css` in styles array. Just for tests. – kind user Mar 03 '17 at 15:13
  • That didn't work either. – Andrew Ip Mar 03 '17 at 15:33
  • Check following answer: http://stackoverflow.com/a/22631253/6695924 – kind user Mar 03 '17 at 15:48

1 Answers1

0

It was a mime-types issue with my nginx configuration.

As per Kind User, I reviewed the comments at Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server) and I ended up checking my nginx configuration, and true enough, mime-types were not defined in my custom configuration.

Community
  • 1
  • 1
Andrew Ip
  • 23
  • 1
  • 7