Angular - Cannot find name CookieService - javascript

I've installed ngx cookie in my angular project, but unfortunatelly It's not recognized in my app.. I don't know what to do..
I saw in my node_modules folder ngx-cookie is there, but somehow it's not recognized in my app..
Here is my node_module:
It's also in my package.json
I worked with ngx-cookie before and I never had any issue, I simply used commands like this (In case I want specific version):
npm install ngx-cookie#2.0.1
And to latest version I used this command:
npm i ngx-cookie
But when I try to use it in my project it gaves me an error:
Any kind of help would be awesome
Thanks guys
Cheers!

You need to add CookieService in your module with CookieModule.forRoot() and as an import at the top of the page using import { CookieService } from 'ngx-cookie';

Related

Jest import statement: 'TypeError: Cannot set property 'fillStyle' of null'

I type:
npm test
and I get:
It's interesting to note that the import statement works inside the BootScene.test.js file but it doesn't work in the imported file.
I focused on the import statement not working under JEst. So I thought maybe it has something to do with Ecma Script version jest uses. So I tried this solution but the error persists.
This is the repo/branch of this question.
When I type npm start. Everything flows swiftly and with no errors.
The error occurs because jestdom is not able add canvas, which we need to do. For me this happened because I was using lottiefiles for the application.
Here is how I fixed it for my react application.
Install jest-canvas-mock as below .
npm i jest-canvas-mock
Then go to setup file like setup-tests.js and import jest-canvas as below .
import "jest-canvas-mock";
Now run test, you should not get errors any more.
I solved it by following this instructions.
Thanks CherryDt.
Installing npm i jest-canvas-mock
and Importing import "jest-canvas-mock" in set-up file; works for me

Create-React-App with Moment JS: Cannot find module "./locale"

Just ran an npm update on my web application and now Moment JS appears to be failing with the following message:
Error: Cannot find module "./locale"
\node_modules\moment\src\lib\moment\prototype.js:1
> 1 | import { Moment } from './constructor';
Not sure what version of Moment JS I had prior to my update, but my application has been working for months.
I created another react app and ran an npm install moment --save and modified the source to display the time and ended up with the same error described above.
Not sure if there is a fail-proof way to integrate Moment JS using Create-React-App currently short of ejecting to manage the webpack settings myself, but I really don't want to do this. Anyone else seeing these issues or having success? If so, a short write up would go along way to helping out.
Appears this has already been identified as an issue for Moment JS version 2.19. If you have upgraded to 2.19 run npm install moment#2.18.1 to revert back to previous version until it is fixed!
See thread: https://github.com/moment/moment/issues/4216
Application built with Create React App and using Moment 2.24.0, the following seems to be working fine:
import moment from 'moment';
import 'moment/min/locales';
Instead of importing moment-with-locales directly. Alternatively, also possible to only import required locales:
import moment from 'moment';
import 'moment/locale/fr';
import 'moment/locale/ru';
The answer above, though I have no doubt works for some, does not work for me. The solution I found is fairly quick and easy, but is a little more complicated than simple downgrading.
This problem originates as a result of and can be fixed with webpack. So we're going to have to add a few lines of code to our webpack.config.js file. If you don't have one yet, you can add one to the root webpack directory:
YOURAPPNAME/node-modules/webpack/
So now that you're inside your webpack.config.js file, you need to add a few lines of code. Just copy and paste this inside the new file or adapt it to the code you already have in webpack.config.js.
module.exports = {
resolve: {
alias: {
moment$: 'moment/moment.js'
}
}
};
Your import statement of moment in your index.js (or otherwise named) file should look like this:
import moment from 'moment'
You should now be able to use moment completely normally. For example:
var tomorrow = moment().add(1, "day")
If you have a fresh install, or upgraded moment to 2.25 and are getting this warning now, try forcing all your packages to use 2.24.
UPDATE: New release 2.25.3 has been reported to fix this problem! Try to first just update.
If you depend on some library that didn't upgrade yet, tell them to upgrade. And in the meantime, if you need 2.25, you can force also your sub-dependencies to use this version.
If you're using yarn add these lines into package.json
"resolutions": {
"**/moment": ">=2.25.3"
},
This is to be added inside packages.json at the top level, i.e. with the same indentation as "dependencies".

Getting npm packages to work with babel (babel-loader)

I'm really new to webpack, babel, React and all this stuff. So I'm probably missing something really obvious. To get a jumpstart on my React project I'm using react-redux-bootstrap-webpack-starter. It all works well, but now my lack of understanding really shows with my latest problem.
The problem:
I'm trying to import jwtDecode from 'jwt-decode' and it throws the following error:
./src/app/redux/modules/login.js
Module not found: Error: Can't resolve 'jwt-decode/build/jwt-decode' in
'/usr/src/app/src/app/redux/modules'
# ./src/app/redux/modules/login.js 12:17-55
# ./src/app/redux/modules/reducers.js
# ./src/app/redux/store/configureStore.dev.js
# ./src/app/redux/store/configureStore.js
# ./src/app/Root.js
# ./src/app/index.js
# multi react-hot-loader/patch webpack-hot-middleware/client
./src/app/index.js
What have I done:
I've Docker-ized the frontend app, so I just added the jwt-decode package to package.json and rebuilt the image. The Docker build executes npm install.
I've tried to import jwtDecode from 'jwt-decode' then I tried import jwtDecode from 'jwt-decode/build/jwt-decode
I made sure I can reference other npm packages similarly installed. On a new docker instance I installed lodash, imported it in the same file and there was no problem.
My hypotheses:
There's something about the particular jwt-decode package that makes it not work well with babel.
To make it work I need either to modify the jwt-decode package or to configure webpack and the babel-loader differently. How?
Babel doesnt transpile anything for JWT-decode and I dont think webpack has any extra configuration for it either.
It looks like the places that you are trying to use jwt-decode, like: './src/app/redux/modules/login.js ', in your app cannot find the directory and so are failing. Make sure that whatever module loader you're using is referencing the correct path to the jwt-decode directory.
Try loading it like this ( if you are using ES2015 via Babel transpilation):
import jwt_decode from "jwt_decode";

Unexpected value '...' imported by the module '...'. Please add a #NgModule annotation

Using Angular.
Steps:
Cloned this simple UI lib that demonstrates the current Angular package standards: https://github.com/jasonaden/simple-ui-lib
Created a new test app with ng new testApp
npm link the simple-ui-lib/dist
npm link simple-ui-lib in the testApp
Imported the example module from simple-ui-lib into testApp:
In the app.module.ts file:
import { BoxModule } from 'simple-ui-lib';
...
#NgModule({
...
imports: [
...
BoxModule
]
})
Webpack compiles fine, but I get this error in the browser and nothing loads:
compiler.es5.js:1540 Uncaught Error: Unexpected value 'BoxModule'
imported by the module 'AppModule'. Please add a #NgModule annotation.
I've tried:
Clearing my npm cache
Re-installing all node modules
Forcing all Angular modules to be the same version in both projects
Checked that all Angular modules are the same version in both projects
Checked that the TypeScript version is the same in both projects
Using other sample module packages instead of simple-ui-lib
Created an entirely new project with the same setup
Downgrading the rollup version used in simple-ui-lib to a build from January
If I console log the BoxModule, I can see the value exists and it seems to be registered as an #NgModule, so I'm confused about what this error is trying to tell me.
I've seen this error around in my searches, but it looks like they are almost always caused by a version mismatch between the library and the host application. In my case, the versions are the same.
Versions:
TypeScript: 2.2.0
#angular/cli: 1.0.4
#angular/common: 4.1.3
Any ideas?
Update: Investigating more, looks like this is a problem with #angular/cli itself. Opened a bug here: https://github.com/angular/angular-cli/issues/6429, but if you have any suggestions please let me know.
Try to use es6 compiler instead of es5.
I encountered similar issue before and chaging the compilation mode solved the problem
I also recommand you To use the last angular cli version and upgrade to angular 5

Aurelia EventAggregator does not import correctly

I followed the tutorial http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/contact-manager-tutorial/1
Everthing looks fine. But after I import EventAggregator (import {EventAggregator} from 'aurelia-event-aggregator';), aurelia does not load it correctly. It is loaded from folder dist (compile js folder) instead of jspm_packages.
Does anybody know how to fix it?
You probably didnt run jspm install aurelia-event-aggregator. Run that and you should be back in business.

Categories