Related
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
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'
}
]
}
...
I've recently updated from Angular 11 to Angular 12 and have got issues with parsing the CSS.
I've followed each of the options from the following:
You tried to parse SCSS with the standard CSS parser; try again with the postcss-scss parser after Angular 12 update
I've added this to my optimization within my angular.json file.
"optimization": {
"scripts": true,
"styles": {
"minify": false,
"inlineCritical": false
},
"fonts": true
},
I've added
"inlineStyleLanguage": "scss"
As my default style language.
And I'm still getting the following error for each of my scss files:
I've included my angular.json file for info incase I'm missing anything:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"portal": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
},
"#schematics/angular:application": {
"strict": true
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"lodash",
"#firebase/database",
"angular2-chartjs",
"#ant-design/colors",
"#ant-design/icons-angular",
"#ant-design/icons-angular/icons"
],
"aot": true,
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"./node_modules/ng-zorro-antd/style/entry.less",
"src/app/components/kit/vendors/antd/themes/default.less",
"src/app/components/kit/vendors/antd/themes/dark.less",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/chartist/dist/chartist.css",
"./node_modules/quill/dist/quill.core.css",
"./node_modules/quill/dist/quill.bubble.css",
"./node_modules/quill/dist/quill.snow.css",
"./node_modules/c3/c3.min.css",
"src/global.scss",
"src/app/layouts/Auth/auth.component.scss"
],
"scripts": [
"./node_modules/c3/c3.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": {
"scripts": true,
"styles": {
"minify": false,
"inlineCritical": false
},
"fonts": true
},
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "10mb"
}
]
},
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
],
"optimization": {
"scripts": true,
"styles": {
"minify": false,
"inlineCritical": false
},
"fonts": true
},
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false,
},
"demo": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.demo.ts"
}
],
"optimization": {
"scripts": true,
"styles": {
"minify": false,
"inlineCritical": false
},
"fonts": true
},
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": false
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"aot": true,
"browserTarget": "portal:build"
},
"configurations": {
"production": {
"browserTarget": "portal:build:production"
},
"hmr": {
"browserTarget": "portal:build:hmr",
"hmr": true
},
"demo": {
"browserTarget": "portal:build:demo"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "portal: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",
"inlineStyleLanguage": "scss",
"styles": [
"src/styles.scss"
],
"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/**"
]
}
}
}
},
"portal-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "portal:serve"
},
"configurations": {
"production": {
"devServerTarget": "portal:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "portal",
"cli": {
"analytics": "c2ed9326-a5b8-4009-9392-6be3b6fcfd3c"
}
}
If all other configuration looks correct. It's worth checking the syntax in the reported file(s) for anything strange.
I had received this error on a few files when migrating to NG11 and also removing Node-Sass from the repository. Other posts mentioned this resulting from sass files that were in assets folder, but wasn't my case.
In my case there were usages of /deep/. Dart-Sass seemed to be choking on that. Replacing that syntax with ::ng-deep resolved my problem.
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
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';