Angular2 - sass unable to build on angular-cli - javascript

I'm trying to use SASS with angular-cli. I've read the docs and found other SO q/a's that talk about setting it up...but it keeps failing the build.
Here's my setup:
angular-cli-build.js
sassCompiler: {
includePaths: ['src/app/styles']
}
src/app/styles/master.scss
#import 'folder/variables';
#import 'folder/headers';
src/app/styles/folder/_variables.scss
$headers-bg: #ababab;
src/app/styles/folder/_headers.scss
h1 {
background-color: $headers-bg;
}
package.json (per request)
{
"name": "my-app",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng server",
"postinstall": "typings install",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "2.0.0-rc.1",
"#angular/compiler": "2.0.0-rc.1",
"#angular/core": "2.0.0-rc.1",
"#angular/http": "2.0.0-rc.1",
"#angular/platform-browser": "2.0.0-rc.1",
"#angular/platform-browser-dynamic": "2.0.0-rc.1",
"#angular/router": "2.0.0-rc.1",
"es6-shim": "^0.35.0",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"zone.js": "^0.6.12"
},
"devDependencies": {
"angular-cli": "^1.0.0-beta.5",
"codelyzer": "0.0.19",
"ember-cli-inject-live-reload": "^1.4.0",
"jasmine-core": "^2.4.1",
"jasmine-spec-reporter": "^2.4.0",
"karma": "^0.13.15",
"karma-chrome-launcher": "^0.2.3",
"karma-jasmine": "^0.3.8",
"node-sass": "^3.7.0",
"protractor": "^3.3.0",
"ts-node": "^0.5.5",
"tslint": "^3.6.0",
"typescript": "^1.8.10",
"typings": "^0.8.1"
}
}
Unfortunately, the build fails because it doesn't know what $bg is.
Build failed.
File: /my-app/tmp/sassplugin-input_base_path-jFTXlfed.tmp/0/
src/app/styles/folder/_more.scss (2)
The Broccoli Plugin: [SASSPlugin] failed with:
Error: Undefined variable: "$headers-bg".
What am I missing? Its as if the compiler isn't respecting the normal behavior of ignoring the "_"'d file names.

After reading through the source code, I found this 17 day old commit.
I was right in my initial hunch that it wasn't ignoring partials. Basically, you have to tell the sassCompiler that you want it to ignore them.
Here's how:
sassCompiler: {
cacheExclude: [/\/_[^\/]+$/]
}
https://github.com/angular/angular-cli/commit/6b45099b6a277ecd7a57f2d2e632bf40af774879

You have things a little backwards as you're importing in a style and not importing your variable... see this example as a guide...
define your variables:
_variables.scss
$bg: #ababab;
use them:
site.scss
#import '_variables';
body {
background: $bg;
}

Related

After ng build --prod, why am I getting errors in main.js:1 and polyfills.js:1, rather than in components that I created, How to undo this?

I wanted to deploy an almost finished Angular project and for deployment I executed ng build --prod. It created a dist which than I deployed to the server. All understood and Ok till here but now when I change stuff in the project and execute 'ng serve -o' I don't see console messages that I set in those components where I wrote those console.log messages but rather these are being referred from 'main.js:1' and 'polyfills.js:1'.
I am still getting those console messages but I don't know in which component it is being printed on the console.
ERROR TypeError: Cannot read property 'UserzAccessStatus' of undefined
at main.js:1
at i.<computed> (polyfills.js:1)
at e.invokeTask (polyfills.js:1)
at Object.onInvokeTask (main.js:1)
at e.invokeTask (polyfills.js:1)
at t.runTask (polyfills.js:1)
at t.invokeTask (polyfills.js:1)
at invoke (polyfills.js:1)
at r.args.<computed> (polyfills.js:1)
Console.log() messages in chrome's console
package.json file
{
"name": "gbcl",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:server": "nodemon server.js"
},
"private": true,
"dependencies": {
"#angular/animations": "~12.0.0",
"#angular/common": "~12.0.0",
"#angular/compiler": "~12.0.0",
"#angular/core": "~12.0.0",
"#angular/forms": "~12.0.0",
"#angular/platform-browser": "~12.0.0",
"#angular/platform-browser-dynamic": "~12.0.0",
"#angular/router": "~12.0.0",
"bcrypt": "^5.0.1",
"body-parser": "^1.19.0",
"bootstrap": "^4.5.2",
"express": "^4.17.1",
"jquery": "^3.6.0",
"mongoose": "^5.12.8",
"mongoose-unique-validator": "^2.0.3",
"popper.js": "^1.16.1",
"rxjs": "~6.5.3",
"tslib": "^2.2.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~12.0.0",
"#angular/cli": "^12.0.0",
"#angular/compiler-cli": "^12.0.0",
"#types/jasmine": "~3.7.2",
"#types/jasminewd2": "~2.0.9",
"#types/node": "^15.0.3",
"codelyzer": "^6.0.2",
"jasmine-core": "~3.7.1",
"jasmine-spec-reporter": "~7.0.0",
"karma": "~6.3.2",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~4.0.1",
"karma-jasmine-html-reporter": "^1.6.0",
"nodemon": "^2.0.7",
"protractor": "~7.0.0",
"ts-node": "~9.1.1",
"tslint": "~6.1.0",
"typescript": "~4.2.4"
}
}
tsconfig.app.json file
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"angularCompilerOptions":{
"enableIvy": true,
"strictTemplates": true,
"strictInjectionParameters": true
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
If further information about any file is required than please ask.
To see the exact location of the error in production environment
ng build --prod --build-optimizer --sourceMap=true
you can get build.
Your error is most likely "???????" There is no "UserzAccessStatus" key in the object you print with its name.
You have to update the serve configuration part in your angular.json according to this reply
Angular 12 'ng serve' builds apps slowly, almost like production builds

Can't compile the Angular application with Ivy enabled

I cloned my angular application from remote and installed the dependencies. Then I tried to build an application locally using ng serve command which threw me this error as attached in the Error Image.
Error Image
I was able to bypass this by adding the below code in my tsconfig file. But I still couldn't find the reason behind it. Please let me know What's going wrong and thanks in advance.
"angularCompilerOptions":
{
"enableIvy": false
}
For reference, I am adding my package.json file
{
"name": "",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~9.0.6",
"#angular/cdk": "^8.2.3",
"#angular/common": "~9.0.6",
"#angular/compiler": "~9.0.6",
"#angular/core": "~9.0.6",
"#angular/flex-layout": "^10.0.0-beta.32",
"#angular/forms": "~9.0.6",
"#angular/material": "^7.3.2",
"#angular/platform-browser": "~9.0.6",
"#angular/platform-browser-dynamic": "~9.0.6",
"#angular/router": "~9.0.6",
"aws-amplify": "^3.0.16",
"aws-amplify-angular": "^5.0.16",
"mat-progress-buttons": "^9.1.1",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.900.6",
"#angular/cli": "~9.0.6",
"#angular/compiler-cli": "~9.0.6",
"#angular/language-service": "~9.0.6",
"#types/node": "^12.11.1",
"#types/jasmine": "~3.5.0",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}
}
please follow up with this issue and check as this is a currently open ticket in amplify-js Github Repo. This seems to be the cause that gives that error.

Vendor Bundle Size Not Reducing

I'm trying to get my build much smaller to get my load time faster, but when I run
ng build --prod --aot --vendor-chunk --common-chunk --build-optimizer and then run a lighthouse report from google dev tools
I get
what's odd is that it seems to have worked if I go into the dist folder to look at file sizes, which seem smaller that the lighthouse report.
So far to reduce the size by doing the following:
Removed old/unused package.json entries
changed all material imports to specific path like for paginator I'm importing now as
import { MatPaginator } from "#angular/material/paginator";
instead of import { MatPaginator } from "#angular/material/"; per the advice from other posts.
replaced moment with moment.min.js so that locales don't get added
added brotli for text compression.
Also I want to mention because I don't know if it's relevant, but I don't have a webpack.config.js file only a custom-webpack.config.js for brotli. The only thing I edited in angular.json to get webpack working was this for brotli
"architect": {
"build": {
"builder": "#angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./custom-webpack.config.js"
},
I've never used webpack before so this could be an issue, but I'm not sure.
package.json
{
"name": "mean-course",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "webpack-dev-server --mode development --open",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"start:server": "nodemon backend/server.js"
},
"private": true,
"dependencies": {
"#angular/animations": "^8.2.13",
"#angular/cdk": "~8.2.2",
"#angular/common": "~8.2.4",
"#angular/compiler": "~8.2.4",
"#angular/core": "~8.2.4",
"#angular/forms": "~8.2.4",
"#angular/material": "^8.2.2",
"#angular/platform-browser": "~8.2.4",
"#angular/platform-browser-dynamic": "~8.2.4",
"#angular/router": "~8.2.4",
"#ng-bootstrap/ng-bootstrap": "^5.1.5",
"#ngrx/store": "^8.6.0",
"ably": "^1.1.22",
"angular-doka": "file:src/angular-doka",
"angular-filepond": "^1.0.5",
"azure-arm-rediscache": "^3.0.0",
"bootstrap": "^4.4.1",
"classlist.js": "^1.1.20150312",
"countdown": "^2.6.0",
"dotenv": "^8.2.0",
"filepond": "^4.13.4",
"filepond-plugin-file-encode": "^2.1.5",
"filepond-plugin-file-validate-size": "^2.2.0",
"filepond-plugin-file-validate-type": "^1.2.5",
"filepond-plugin-image-crop": "^2.0.3",
"filepond-plugin-image-edit": "^1.6.0",
"filepond-plugin-image-exif-orientation": "^1.0.7",
"filepond-plugin-image-preview": "^4.6.1",
"filepond-plugin-image-resize": "^2.0.4",
"filepond-plugin-image-transform": "^3.7.2",
"jquery": "^3.5.1",
"jsonwebtoken": "^8.5.1",
"lib-storage-service": "^1.0.2",
"material": "^0.4.1",
"moment-mini": "^2.24.0",
"ng-starrating": "^1.0.20",
"ngx-bar-rating": "^1.1.0",
"ngx-clipboard": "^12.3.0",
"ngx-device-detector": "^1.3.20",
"ngx-filepond": "^5.0.1",
"ngx-light-carousel": "^1.0.37-beta.8",
"ngx-pagination": "^5.0.0",
"ngx-simple-countdown": "^1.0.2",
"ngx-spinner": "^8.0.3",
"ngx-toastr": "^11.2.1",
"ngx-ui-carousel": "^1.3.2",
"numeral": "^2.0.6",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
"tsoa": "^2.5.7",
"uid": "0.0.2",
"web-animations-js": "^2.3.2",
"yamljs": "^0.3.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-builders/custom-webpack": "8.4.1",
"#angular-devkit/build-angular": "^0.803.26",
"#angular/cli": "~8.3.2",
"#angular/compiler-cli": "~8.2.4",
"#angular/language-service": "~8.2.4",
"#types/jasmine": "~3.3.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "^8.10.59",
"brotli-gzip-webpack-plugin": "^0.5.0",
"brotli-webpack-plugin": "^1.1.0",
"codelyzer": "^5.0.0",
"compression-webpack-plugin": "^4.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "^4.4.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.5.3"
},
"browser": {
"crypto": false
}
}
Here is a stats.json file when using ng build --prod
Here's a more detailed version as well
Remove libraries like ngx-spinner, filepond etc. which are huge as they are not treeshakable. Also if you have not configured your server to serve gzip files, do that. It will give you huge reduction in size. Also pre gzip your js files after build my using a utility like gzip-all.
https://www.npmjs.com/package/gzip-all
Also change your server max cache policy to get caching benefits.

Not able to run angular app due to ɵɵinject & ɵɵdefineInjectable (Getting error at compile time)

Get this error after npm install:
+-- UNMET PEER DEPENDENCY #angular/common#6.1.10
+-- UNMET PEER DEPENDENCY #angular/core#6.1.10
`-- file-saver#1.3.8
Get this error after compile:
WARNING in ./node_modules/#agm/core/fesm5/agm-core.js
4538:120-128 "export 'ɵɵinject' was not found in '#angular/core'
WARNING in ./node_modules/#agm/core/fesm5/agm-core.js
4538:34-52 "export 'ɵɵdefineInjectable' was not found in '#angular/core'
my package.json is:
{
"name": "web-app",
"version": "2.1.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"ng": "ng",
"start": "ng serve",
"public": "ng serve --port 8080 --host 0.0.0.0",
"build": "ng build --prod --build-optimizer",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.2",
"#angular/animations": "^6.1.10",
"#angular/cdk": "^6.4.7",
"#angular/common": "^6.1.10",
"#angular/compiler": "^6.1.0",
"#angular/core": "^6.1.10",
"#angular/forms": "^6.1.0",
"#angular/http": "^6.1.0",
"#angular/material": "^6.4.7",
"#angular/material-moment-adapter": "^6.4.2",
"#angular/platform-browser": "^6.1.0",
"#angular/platform-browser-dynamic": "^6.1.0",
"#angular/router": "^6.1.0",
"#turf/turf": "latest",
"#types/file-saver": "^1.3.0",
"core-js": "^2.5.7",
"cron": "^1.7.2",
"enhanced-resolve": "^3.3.0",
"file-saver": "^1.3.8",
"hammerjs": "^2.0.8",
"highcharts": "^6.1.1",
"lodash": "^4.17.10",
"moment": "^2.22.2",
"ngx-clipboard": "^11.1.1",
"ngx-gauge": "1.0.0-beta.7",
"progressbar.js": "^1.0.1",
"rxjs": "6.2.2",
"rxjs-compat": "6.2.2",
"screenfull": "^3.3.2",
"socket.io": "^2.1.1",
"socket.io-client": "^2.1.1",
"ts-helpers": "^1.1.2",
"zone.js": "^0.8.26"
},
"devDependencies": {
"#angular/cli": "^1.6.6",
"#angular/compiler-cli": "^6.1.0",
"#types/googlemaps": "^3.30.16",
"#types/highcharts": "^5.0.25",
"#types/jasmine": "2.8.8",
"#types/node": "~8.0.0",
"#types/socket.io": "^1.4.36",
"#types/socket.io-client": "^1.4.32",
"codelyzer": "^4.4.2",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "2.0.5",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.1.2",
"karma-remap-istanbul": "^0.6.0",
"protractor": "~4.0.13",
"ts-node": "1.2.1",
"tslint": "^5.10.0",
"typescript": "2.7.2"
},
"browserslist": [
"last 2 versions",
"ie 11"
]
}
In my case, I only changed version from "#agm/core": "^1.0.0-beta.5" to "#agm/core": "1.0.0".
For angular 7, 8 the new version "#agm/core": "1.1.0" doesn't work and "#agm/core": "^1.0.0-beta.5" neither.
Try removing your node_modules folder, and package-lock.json file, then rerun npm install
Or, run npm i --force, the force flag will force npm to fetch remote resources even if a local copy exists on disk.
And lastly, you can try reinstalling npm:
$ npm i -g npm
Yash,
I solved it by taking a clone of my project in a new folder and then upgraded the NPM version and installed node_modules again.
I solved this issue by opening node_modules/ and removing all occurrences of ɵɵinject and ɵɵdefineInjectable from #agm/core package.
This is my package.json
{
"name": "eterna-posta-web",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#agm/core": "^1.0.0-beta.7",
"#agm/js-marker-clusterer": "^1.0.0",
"#angular/animations": "~7.1.0",
"#angular/common": "~7.1.0",
"#angular/compiler": "~7.1.0",
"#angular/core": "~7.1.0",
"#angular/forms": "~7.1.0",
"#angular/http": "^7.1.3",
"#angular/platform-browser": "~7.1.0",
"#angular/platform-browser-dynamic": "~7.1.0",
"#angular/router": "~7.1.0",
"#microsoft/signalr": "^5.0.3",
"#techiediaries/ngx-qrcode": "^9.1.0",
"core-js": "^2.5.4",
"js-marker-clusterer": "^1.0.0",
"rxjs": "~6.3.3",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"#angular-devkit/build-angular": "^0.13.8",
"#angular/cli": "~7.1.2",
"#angular/compiler-cli": "~7.1.0",
"#angular/language-service": "~7.1.0",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.1.6"
}
}
This is the original answer: answer
finally all I had to do was
npm i #agm/core#1.0.0
then my OLD project worked fine
just make #agm/core to #agm/core": "1.0.0"
and
hit "npm i"
this worked for me......after some research

How to import angular2-cookie in angular4 project

I'm trying to import angular2-cookie in my angular4 project.
My project is built with angular-cli#1.2.7, here is my package.json:
{
"name": "ng-admin",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve --port 4201",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.0.0",
"#angular/common": "^4.0.0",
"#angular/compiler": "^4.0.0",
"#angular/core": "^4.0.0",
"#angular/forms": "^4.0.0",
"#angular/http": "^4.0.0",
"#angular/platform-browser": "^4.0.0",
"#angular/platform-browser-dynamic": "^4.0.0",
"#angular/router": "^4.0.0",
"angular2-cookie": "^1.2.6",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"
},
"devDependencies": {
"#angular/cli": "^1.2.7",
"#angular/compiler-cli": "^4.0.0",
"#types/jasmine": "2.5.38",
"#types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "~2.2.0"
}
}
the angular2-cookie dochttps://github.com/salemdar/angular2-cookie#cli ask me to add something in angular-cli-build.js, but I have neither angular-cli-build.js nor systemjs.config.js
I import angular2-cookie in app.module.ts with:
import { CookieService } from 'angular2-cookie/services/cookies.service';
...
...
providers: [
CookieService
]
My project works well with ng server and it also works well in my chrome.
it is built successfully with ng build --prod, but when I run it in chrome or run it with ng server --aot , chrome console show this error:
ERROR Error: No provider for CookieOptions!
How can I solve this problem? Thanks all!
Add CookieOptions in your import statement like import { CookieService, CookieOptions } from 'angular2-cookie'; and then add both CookieService and CookieOptions in your Root Module's provider array.

Categories

Resources