Angular | Import JavaScript library into component - javascript

I am trying to use the package YoastSEO inside of my Angular project so I can replicate what it does in WordPress.
The package via NPM is actually a JavaScript library.
Reading online it tells me that I should do import * as YoastSEO from 'yoastseo' which I have done.
However, when compiling the angular app with ng serve I get the error
ERROR in ./node_modules/yoastseo/node_modules/htmlparser2/lib/WritableStream.js
Module not found: Error: Can't resolve 'stream' in 'admin-panel\node_modules\yoastseo\node_modules\htmlparser2\lib'
I have never come across this issue before and I have tried to do npm i htmlparser2 as a bit of a long shot to see if that would fix it put it doesn't seem too.
Any help would be greatly appreciated whether this being a new npm package to use or how to fix this issue.

Related

How to execute code from a Vue project using nodejs?

I just started to work on an existing Vue project and I would like to run some of its components from nodejs, e.g. if I want to test some component separately without compiling and deploying the complete application to a browser.
As far as I have understood, Vue uses Babel to compile its projects, and Babel allows using # in the paths of import statements.
On the other hand, nodejs cannot resolve these paths: when I run a script that imports a module from the Vue application, I get the error:
node:internal/errors:464
ErrorCaptureStackTrace(err);
^
Error [ERR_MODULE_NOT_FOUND]: Cannot find package '#/package' imported from myfile.js
So, I wanted to ask if there is a way to have nodejs resolve #-paths and load code from a Vue package.
I hope I have formulated the problem correctly, since I am a beginner with Vue and Javascript in general.

Assertion Error : App Version has already been registered

Im using ember to develop a project.
Please help me with this error. Im unable to run my project on local. After hitting
ember server the build is successful. But on hitting the http://localhost:4200
Loads empty page with console error.
Uncaught Error: Assertion Failed: The initializer 'App Version' has already been registered
at assert (index.js:172)
at Function.initializer (index.js:420)
at registerInitializers (index.js:27)
at loadInitializers (index.js:68)
at Module.callback (app.js:25)
at Module.exports (loader.js:106)
at requireModule (loader.js:27)
at app-boot.js:3
Unable to understand what to do. Any help regarding this would be appreciated.
I did a code search to see where that initializer might exist and it looks to be part of ember-cli-app-version.
In your place I would remove ember-cli-app-version from your app with npm uninstall --save-dev ember-cli-app-version and then run ember serve again. The purpose of this addon is to make it easy to see your app's version number in the ember inspector, but that's not a big deal so removing it won't break anything and should get you moving forward.
If you want to investigate the issue further try searching your code base (including node_modules) for App Version to see where a duplicate exists.
Running npm install solved the problem.
The actual issue was due to the iCloud sync being active in my Macbook.
Turning iCloud sync off should solve the problem.

How can I use rollbar in an NPM package + source maps?

I'm trying to use rollbar in an npm package that will be used as a dependency in other projects.
However, the errors I get are not showing up nicely on rollbar. Strangely enough, when I run a sample app that uses the dependency, I do see a proper error on the web console.
I think the problem may be with source maps, but I haven't been able to properly configure it. Has anyone used rollbar to track errors on an npm package?
Any help is appreciated.

Installing and using React

I have spent a long time simply trying to install React and React-DOM.
I start my script with:
var React = require('react');
var ReactDOM = require('react-dom');
I used Node and NPM to install into my project directory, and I can see they've been successfully installed in my NetBeans IDE. I open Project Setting->Javascript Libraries->NPM and I can see React v15.4.2 and React-DOM v15.4.2.
Despite this I still get the error:
ReferenceError: Can't find variable: require
(21:07:49:681 | error, javascript)
at global code (public_html/main.js:8:20)
If anyone has a suggestion then I would really appreciate it.
You can't use require() in the browser just yet (and the spec will be different from the RequireJS syntax anyway) . If you want to get started with React, I recommend you try create-react-app to begin with. As soon as you feel comfortable with the workflow, you can try to set up your own development and production environment, using Gulp, Browserify or the more popular Webpack module.
Hope that helps.
This won't work. Include your react.js and react-dom.js libraries from npm packages to the main page of your project (i.e. index.html). Also remember to add babel.js - it's not connected with your issue, just mentioning for the future.

How to get angular2 to work in eclipse with typescript

So I was starting researching about angular2 and since I saw so many references to typescript being prefered I am trying to switch to it from javascript. Problem is, I saw a nice little guide I could follow to install it all in eclipse (angular, javascript, everything needed to launch the 5 minute guide code on the main page of angular), so I did it and managed to get it to work.
Now I would like to do the same with typescript, but I find myself lost since it doesn't seem to be working, I can't launch code, it's like node.js isn't working anymore, but since I do not know what the expected result is, I am not sure what is missing.
For example, I re did the 5 minute guide and notice as a difference that I do not have the installation of the modules, nor any run-as configuration ready, in fact, I can't manage to run as any typescript code I try to do.
What I did was:
1- Install Eclipse Mars, other guys uses older versions
2- Install Node.js
3- Install WildFly Server
4- Install TypeScript plugin https://marketplace.eclipse.org/content/typescript
5- Import my project in eclipse, you may have to create a new static web project and add your files in there. The 5 minute quick start is not an eclipse web project so you may not be able to import this. Do not forget to copy and past the same structure with the node modules that you have
6- Right click on the project > Configure > Enable Typescript Builder
7- Right Click the project > Properties > TypeScript > Compiler and configure as follows:
I hope this will do it for you.
Remember, this plugin does not respect json configuration file, so you have to do this manually as in the screenshot. Also, if you are going to provide arguments to your component constructor, You will have errors. Let me know if you got those. Another thing to mention is that using some annotations like #Input will not work, you will have to use inputs:[] inside your #Component annotation.
You can try to add those plugins on top of Mars:
https://github.com/angelozerr/angular2-eclipse
https://github.com/angelozerr/typescript.java
Those 2 are incubating but already provide good features. There is another one, that I didn't try but which has some popularity:
https://github.com/palantir/eclipse-typescript
Eclipse >= Neon
sudo npm install -g angular-cli (ng help must work)
See: https://github.com/angelozerr/angular2-eclipse
Install it and restart Eclipse
Open a .ts file
Eclipse Oxygen
Default javascript installation, then added the default free plugin for angular 2 / typescript from here:
angular2.ide - http://oss.opensagres.fr/angular2-eclipse/1.3.0/
After installing I opened an existing Angular 4 / TS project, worked fine. I then installed support for .scss from http://www.liclipse.com/text/updates. All setup and configured with Typescript 2.4.1 / nodejs v6.9.4.
But within days it now fails to open .ts files at all. Re-installation of the ng plugin did not fix it, I uninstalled liclipse plugin and no change either. It basically leaves eclipse unusable for ng4 projects as is.
The logs show the following errors.
org.eclipse.core.runtime.CoreException: Plug-in "ts.eclipse.ide.jsdt.ui" was unable to instantiate class "ts.eclipse.ide.jsdt.internal.ui.editor.TypeScriptEditor".
at org.eclipse.core.internal.registry.osgi.RegistryStrategyOSGI.throwException(RegistryStrategyOSGI.java:194)
at org.eclipse.core.internal.registry.osgi.RegistryStrategyOSGI.createExecutableExtension(RegistryStrategyOSGI.java:188)
at org.eclipse.core.internal.registry.ExtensionRegistry.createExecutableExtension(ExtensionRegistry.java:905)
...
Caused by: java.lang.NoClassDefFoundError: org/eclipse/wst/jsdt/ui/text/JavaScriptSourceViewerConfiguration
at java.lang.Class.getDeclaredConstructors0(Native Method)
at java.lang.Class.privateGetDeclaredConstructors(Unknown Source)
...
Caused by: java.lang.ClassNotFoundException: An error occurred while automatically activating bundle org.eclipse.wst.jsdt.ui (441).
at org.eclipse.osgi.internal.hooks.EclipseLazyStarter.postFindLocalClass(EclipseLazyStarter.java:112)
at org.eclipse.osgi.internal.loader.classpath.ClasspathManager.findLocalClass(ClasspathManager.java:529)
...
Caused by: java.lang.ClassFormatError: Name index 1 in LocalVariableTable has bad constant type in class file org/eclipse/wst/jsdt/internal/core/JavaModelManager
I found
TypeEcs plugin for Typescript
it provide below.
•Syntax highlighting
•Code Completion
•Code Outline
•Find References
•Rename / Refactor
•Open Type
•Code Compilation
•Format Code
•Comment Code
•Open Declaration
•Mark Occurences
•Type Script Debug

Categories