CSS is not loading for Cypress component testing using angular - css

I am trying to do component testing using Cypress component test runner. The web components are built using stencil. We compile the stencil components and create respective "Angular component" and import them into our projects.
The component is as expected when launched in the angular app. However when it is mounted, and the tests are executed using cypress, the CSS for these pre built components are not getting loaded.
cypress.json
{
"component": {
"componentFolder": "src",
"testFiles": "**/*component.spec.ts"
}
}
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angulartest": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "nexus",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angulartest",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "angulartest:build:production"
},
"development": {
"browserTarget": "angulartest:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angulartest:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "angulartest",
"default": {
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"angulartest": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "nexus",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/angulartest",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "angulartest:build:production"
},
"development": {
"browserTarget": "angulartest:build:development"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "angulartest:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "angulartest"
}
}
package.json
{
"name": "angulartest",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "~13.2.0",
"#angular/common": "~13.2.0",
"#angular/compiler": "~13.2.0",
"#angular/core": "~13.2.0",
"#angular/forms": "~13.2.0",
"#angular/platform-browser": "~13.2.0",
"#angular/platform-browser-dynamic": "~13.2.0",
"#angular/router": "~13.2.0",
"#nexus/angular": "1.0.0",
"#nexus/core": "1.0.0",
"#ngrx/store": "13.0.2",
"core-js": "^2.6.12",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~13.2.5",
"#angular/cli": "~13.2.5",
"#angular/compiler-cli": "~13.2.0",
"#cypress/webpack-dev-server": "^1.8.2",
"#types/cypress": "^1.1.3",
"#types/jasmine": "~3.6.0",
"#types/node": "^12.11.1",
"angular2-template-loader": "^0.6.2",
"cypress": "^9.5.1",
"cypress-angular-unit-test": "^3.9.0",
"html-webpack-plugin": "^4.5.2",
"istanbul-instrumenter-loader": "^3.0.1",
"jasmine-core": "~3.7.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"raw-loader": "1.0.0",
"sass-loader": "^12.6.0",
"to-string-loader": "^1.2.0",
"ts-loader": "^9.2.7",
"typescript": "4.4.2"
}
}
component.spec.ts
/// <reference types="cypress" />
import { initEnv, mount, setConfig } from 'cypress-angular-unit-test';
import { ToastComponent } from './toast.component';
describe('AppComponent', () => {
beforeEach(() => {
setConfig({
stylesheet:
'../../node_modules/#nexus/core/dist/styles.scss',
});
{
initEnv(ToastComponent);
const fixture = mount(ToastComponent);
}
});
it('should create', () => {
cy.get('.nexus-rhythm-2');
});
});
cypress/plugins/index.js
/// <reference types="cypress" />
/**
* #type {Cypress.PluginConfig}
*/
const webpackConfig = require('./webpack.config');
const { startDevServer } = require('#cypress/webpack-dev-server');
module.exports = (on, config) => {
on('dev-server:start', (options) =>
startDevServer({
options,
webpackConfig,
}),
);
return config;
};
Expected
Actual

I did a few changes to my spec file, as suggested by one of the github issues for Cypress-angular-unit-testing repository
/// <reference types="cypress" />
import { setConfig, initEnv, mount } from 'cypress-angular-unit-test';
import { ToastComponent } from './toast.component';
import { ComponentFixture } from '#angular/core/testing';
import { NexusAngularModule } from '#nexus/angular';
import { CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
import {Locators} from './toast.component.const'
import {DESKTOP, TAB_LANDSCAPE, TAB_PORTRAIT, MOBILE} from '../../constants'
describe('AppComponent', () => {
let fixture: ComponentFixture<ToastComponent>;
beforeEach(() => {
setConfig({
stylesheet: 'src/styles.css'
});
initEnv(ToastComponent, {
imports: [NexusAngularModule],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
declarations: [ToastComponent],
});
fixture = mount(ToastComponent);
fixture.detectChanges();
});
it('should create', () => {
cy.get(':nth-child(1) > .nexus-toast > .nexus-toast-content')
.should('contains.text', 'Information message')
});
});
After doing this, I was able to get the icons along with the text, but still the colors were not rendering. When I went through the styles.scss file, I found that visibility of almost all the classes that contained styles were marked as:
visibility: disabled;
which I changed to,
visibility: visible;
post this, I got the CSS rendered properly

The styles are .scss which need preprocessing, which happens in cypress/plugins/index.js
You already have a webpack.config in your plugins folder.
Does it have a rule for scss?
module: {
rules: [
...
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader'
}
]
}
...

Related

Angular. Global styles do not apply when building with localize

I added localization to my Angular v12.2.7 app and set localize=true.
I run the command to build the app. And it builds the app to 3 folders (en, uk, ru).
npm run build -- --optimization=false --configuration=staging
I set up my nginx.config so that it returns the app with the needed language
location ~ ^/(en|ru|uk) {
try_files $uri /$1/index.html?$args;
}
Everything works fine but it turned out that global styles (from src/styles.scss) do not apply when building the localized app.
Styles are correctly included in angular.json:
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"BooTravel": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"i18n": {
"sourceLocale": "en",
"locales": {
"uk": {
"translation": "src/i18n/messages.uk.xlf",
"baseHref": "/uk/"
},
"ru": {
"translation": "src/i18n/messages.ru.xlf",
"baseHref": "/ru/"
}
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"localize": true,
"outputPath": "dist/",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "4mb",
"maximumError": "6mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"preprod": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.preprod.ts"
}
]
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
]
},
"localhost": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.localhost.ts"
}
]
},
"uk": {
"localize": ["uk"]
},
"ru": {
"localize": ["ru"]
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"browserTarget": "BooTravel:build:production"
},
"preprod": {
"browserTarget": "inQuestUI:build:preprod"
},
"staging": {
"browserTarget": "inQuestUI:build:staging"
},
"localhost": {
"browserTarget": "inQuestUI:build:localhost"
},
"development": {
"browserTarget": "BooTravel:build:development"
},
"uk": {
"browserTarget": "BooTravel:build:uk"
},
"ru": {
"browserTarget": "BooTravel:build:ru"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "BooTravel:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "BooTravel"
solved:
It turned out that nginx served css files as text/plain
The solution was found here (removing http section from nginx):
Prevent nginx from serving css files as text/plain

Wrong styles.css path after live reload

I have a little (maybe big) problem with an angular application when hot reload hits
First time the application loads the correct resources with the correct path are loaded :
http://localhost:4200/styles.css
http://localhost:4200/styles.js
....
When I edit a component say for example 'VoiceComponent' and the current link is http://localhost:4200/voices/
the application will reload but the resources loaded are
http://localhost:4200/voices/styles.css
http://localhost:4200/styles.js
....
Same thing if I edit a 'HelloComponent' and the current link is http://localhost:4200/hello/
the application will relaod but yhe resources loaded are
http://localhost:4200/hello/styles.css
http://localhost:4200/styles.js
....
The application tries to load styles.css in relative to the current path
angular.json:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"nobleui-angular": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": false,
"assets": [
"src/favicon.ico",
"src/assets",
"src/.htaccess"
],
"styles": [
"src/styles.scss",
"src/assets/scss/style.scss"
],
"scripts": [
"node_modules/apexcharts/dist/apexcharts.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "nobleui-angular:build"
},
"configurations": {
"production": {
"browserTarget": "nobleui-angular:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "nobleui-angular:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "nobleui-angular:serve"
},
"configurations": {
"production": {
"devServerTarget": "nobleui-angular:serve:production"
}
}
}
}
}
},
"defaultProject": "nobleui-angular",
"cli": {
"analytics": false
}
}
Any help would be appreciated
I found the problem :
I didn't close the <head> tag in index.html .. so the <base href="/"> inside wasn't working

TailwindCSS is way too big with Angular build

When I use Tailwind to style an Angular application with a custom webpack, the styles.js chunk is huge after running ng build, coming in at around 30mb. This not only takes forever to build, but also slows down my web app.
After purging the Tailwind, the styles.js chunk is far smaller (~100kb), however 30mb just seems ridiculously big, even un-purged.
This even applies to a fresh application built with https://github.com/notiz-dev/ngx-tailwind, so I'm not sure what is causing the issue.
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
},
},
},
],
},
};
angular.json
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ngxTailwind": {
"projectType": "application",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "ngx-build-plus:browser",
"options": {
"extraWebpackConfig": "webpack.config.js",
"outputPath": "dist/ngxTailwind",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"extraWebpackConfig": "webpack.config.js",
"browserTarget": "ngxTailwind:build"
},
"configurations": {
"production": {
"browserTarget": "ngxTailwind:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ngxTailwind:build"
}
},
"test": {
"builder": "ngx-build-plus:karma",
"options": {
"extraWebpackConfig": "webpack.config.js",
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ngxTailwind:serve"
},
"configurations": {
"production": {
"devServerTarget": "ngxTailwind:serve:production"
}
}
}
}
}
},
"defaultProject": "ngxTailwind",
"cli": {
"analytics": "c9efd59e-9db9-4f26-9a6f-e35b477d8e5a"
}
}
styles.scss
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
Does anyone have any idea as to why it's so big? I understand it is not purged, but https://tailwindcss.com/docs/optimizing-for-production claims the uncompressed size is under 4mb, why am I getting nearly 7 times this?
Just change tailwind.config.js
module.exports = {
purge: {
enabled: true,
content: ['./src/**/*.{html,ts}']
},
//Other Code
};
then build: ng build --prod
Reference: Enabling manually

External CSS file cannot integrate with my Angular Project

strong text {
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"first": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/first",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"node_modules/bulma/css/bulma.css",
"src/styles.css"
],
"scripts": [],
"es5BrowserSupport": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "first:build"
},
"configurations": {
"production": {
"browserTarget": "first:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "first:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"first-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "first:serve"
},
"configurations": {
"production": {
"devServerTarget": "first:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "first"
}
I'm getting started with Angular, When I started a new project I was getting the problem at the time of External CSS File integration. The present I'm using Bulma for External CSS. As per Documentation, I followed the steps and I'm not able to get the desired output. In the First Step, I used "npm install Bulma" to install the external CSS in my project. And next, I copied the path of the Bulma CSS from node_modules and given the path in styles of angular.json
I tried other external CSS files, but the same problem arises.
The path to Bulma seems good, I don't see any problem in this code. Have you restarted ng serve ? The angular.json file is not watched and is not continuously builded.
Add ./ before reference. Like this
./node_modules/bulma/css/bulma.css
Maybe try to import bulma.css in Styles.css. Like this
#import '~bulma/css/bulma.css';

ng server is not outputing any css

I'm using #angular/cli when I execute ng server
the css code doesn't show up in anyway on the webpage.
This is the angular-cli.json
{
"project": {
"version": "1.0.0-beta.18",
"name": "botshop"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"../vendor/font-awesome/css/font-awesome.min.css",
"../node_modules/bootstrap/dist/css/bootstrap.css",
"../node_modules/metismenu/src/metisMenu.css",
"./assets/css/sb-admin-2.min.css",
"styles.css"
],
"scripts": [
"../systemjs.config.js",
"../node_modules/core-js/shim.js",
"../node_modules/zone.js/dist/zone.js",
"../node_modules/reflect-metadata/Reflect.js",
"../node_modules/systemjs/dist/system.src.js",
"../node_modules/jquery/dist/jquery.js",
"../node_modules/tether/dist/js/tether.js",
"../node_modules/bootstrap/dist/js/bootstrap.js",
"../node_modules/metismenu/src/metisMenu.js",
"./assets/js/sb-admin-2.min.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"inline": {
"style": false,
"template": false
},
"spec": {
"class": false,
"component": true,
"directive": true,
"module": false,
"pipe": true,
"service": true
}
}
}
I'm getting outputed .js files but not any css.
I have upgraded ng-cli to the latest version and I'm using the last nodejs LTS
Any ideas?

Resources