Currently facing an issue while building my Angular 2 app with @angular/cli.
After running ng build --prod to generate a dist build, everything seems fine except for the styles. The generated styles.7b24f3befc9c595b00b9.bundle.css file doesn't get interpreted properly in the browser, resulting in the styles not being applied.
In the console, there is a message stating:
Resource interpreted as Stylesheet but transferred with MIME type application/octet-stream: "http://angular2.local/styles.7b24f3befc9c595b00b9.bundle.css".
The CSS content itself is correct, as pasting the code into a <style> tag properly applies the styles to elements in the browser.
Any assistance on this matter would be highly appreciated.
Thank you in advance.
CLARIFICATION: Development works perfectly (ng build), but the issue arises when attempting to build for production (ng build --prod) where the styles are not correctly interpreted. Both development and production environment.ts files are identical apart from the production flag.
P.S. Here are the version details: @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": {
}
}
}