Uncaught TypeError: cssText.replace is not a function

[thesayyn]

The error that i've got is typed below;

Uncaught TypeError: cssText.replace is not a function at extractStyleUrls (webpack-internal:///../../../compiler/@angular/compiler.es5.js:12227) at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:14436) at Array.map (<anonymous>) at DirectiveNormalizer.normalizeStylesheet (webpack-internal:///../../../compiler/@angular/compiler.es5.js:14435) at DirectiveNormalizer.normalizeLoadedTemplate (webpack-internal:///../../../compiler/@angular/compiler.es5.js:14363) at eval (webpack-internal:///../../../compiler/@angular/compiler.es5.js:14347) at Object.then (webpack-internal:///../../../compiler/@angular/compiler.es5.js:1902) at DirectiveNormalizer.normalizeTemplateOnly (webpack-internal:///../../../compiler/@angular/compiler.es5.js:14347) at DirectiveNormalizer.normalizeTemplate (webpack-internal:///../../../compiler/@angular/compiler.es5.js:14329) at CompileMetadataResolver.loadDirectiveMetadata (webpack-internal:///../../../compiler/@angular/compiler.es5.js:15358)

My environment Angular version : 4.2.4 Quill : 1.3.4 ngx-quill-editor : 2.2.2

.angular-cli.json file

{ "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "name": "tdadmin" }, "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": [ "styles.scss", "../node_modules/font-awesome/css/font-awesome.min.css", "../node_modules/mdi/css/materialdesignicons.min.css", "../node_modules/primeng/resources/themes/omega/theme.css", "../node_modules/primeng/resources/primeng.min.css", "../node_modules/quill/dist/quill.core.css", "../node_modules/quill/dist/quill.snow.css" ], "scripts": [ "../node_modules/quill/dist/quill.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": {} } }

[LogOg]

For context I was following this tutorial: https://www.c-sharpcorner.com/article/exploring-angular-fundamental-with-visual-studio-2017/

and got the error above when I added the customer component. After much playing around I figured there was a problem reading the scss file and then I saw that all the other files were css. I changed the file name and the reference to it in the customer.component.ts as follows:

@Component({ selector: 'app-customer', templateUrl: './customer.component.html', styleUrls: ['./customer.component.css'] })

I then took a chance and changed the selector above from 'app-customer' to 'customer'. I then left this as 'customer' and changed the file name and reference mentioned above back to css and got the error so both the incorrect selector name as generated when adding the component as well as having a scss instead of css file cause this same error. I am not sure why, would be great if someone can use this info to explain what happened here and why generating the component took a wrong turn when generated using 'Angular Component'.

thanks

[razaross]

I was doing the same tutorial and had the same error. I not only did what you did with the .css file, but I changed the path of the selector and it works fine now. change selector: 'app-customer', to selector: 'customer',