Trying to start a new angular2-meteor project using
npm install angular2-meteor --save
Get a whole bunch of red errors (below) and I am not sure what they mean. I have already done
npm install npm -g
and
npm update -g
Here's the error:
I think you followed the Quick Start here.
angular2-meteor package has not been exposed to NPM yet.
Check this issue
UPDATE:
Refer here and here for latest tutorial.
Now you can install, follow these steps:
Update your meteor globally (If you already updated, then no need to do it again. And go here to check if there is a new version).
meteor update --release 1.3-rc.4
Run these in your terminal to create an angular2-meteor1.3 project:
meteor create --release 1.3-rc.4 hello
cd hello
npm install https://github.com/Urigo/angular2-meteor --save
npm install https://github.com/Urigo/angular2-meteor-auto-bootstrap --save
meteor remove blaze-html-templates
meteor add angular2-compilers
Remove main.js, main.html, main.css files in the client folder.
Then create these two files in your client folder:
// app.ts
import 'reflect-metadata';
import { bootstrap } from 'angular2-meteor-auto-bootstrap'
import { Component } from 'angular2/core';
#Component({
selector: 'app',
template: `<p>Hello World!</p>`
})
class App {}
bootstrap(App);
(Make sure you put import 'reflect-metadata'; first line before other import, otherwise it won't work.)
// index.html
<head>
<title>Hello</title>
</head>
<body>
<app></app>
</body>
At last, run meteor in the terminal and go to http://localhost:3000 to check your app.
Related
I did not find any relevant documentation regarding how to use the npm package of antmedia.
I install it by doing a yarn add #ant-media/webrtc_adaptor.
When i try to import it
import { WebRTCAdaptor } from '#antmedia/webrtc_adaptor';
Which results in this error
I realized that in package.json, it is the index.html that is in main
Is there a documentation about it ? I am currently not using React Native
Note: yarn add #ant-media/webrtc_adaptor#1.2.0 is definitly not working
I am using vue.js 2 - I add some mdi-icons in my App.vue this generate a new error in my project
When I was trying to serve my Project but I got the error as it given as below
I apply also some commands on it but it not solved my error.
Can anyone help me to solve it
Make sure to have the .css extension, otherwise the import will fail.
As a reminder:
Install #fortawesome/fontawesome-free (with npm or yarn depending on what package manager your project uses).
Then in your main.js you can just import all.css as per the example below
import Vue from 'vue'
import App from './App.vue'
import '#fortawesome/fontawesome-free/css/all.css'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
This will allow you to use the fa classes in regular HTML tags.
I also recommend taking a look at the Vue supported library for FontAwesome here if you want to have more granularity with your imports.
https://github.com/FortAwesome/vue-fontawesome
If you are using yarn then put this command
yarn add #fortawesome/fontawesome-free
or
If you are using npm then put this command
npm install #fortawesome/fontawesome-free
and add
#import '#fortawesome/fontawesome-free/css/all.css'; this in app.scss file
or add import '#fortawesome/fontawesome-free/css/all.css'; in app.js file
I simply solve the error by uninstall the googlefonts then again reinstall the google fonts by using following command.In my case I am using yarn so I use
yarn add #fortawesome/fontawesome-free
But in case of user that are using npm they should use following command
npm install --save #fortawesome/fontawesome-free
Also the following link is helpful google solve links for Npm and Yarn
: https://www.google.com/search?q=font%20awesome%20add%20by%20yaRN&oq=font%20awesome%20add%20by%20yaRN&aqs=chrome..69i57j33i10i160.11903j0j7&sourceid=chrome&ie=UTF-8
This one worked for me, I Downgraded #fortawesome/fontawesome-free version to ^5.15.4 in the package.json
I am using laravel 8 and now I want install Vue.js. I am trying like this
composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
UPDATE: If you want to completely avoid Inertia / Livewire (Alpine.js) scaffolding in your Laravel ^8.0 applications and use Vue instead - install Laravel UI, which will most likely be maintained indefinitely (scaled to practical software lifetime).
Instructions for installing Vue (and old auth scaffolding) in your Laravel app:
run composer require laravel/ui
run php artisan ui vue for just installing Vue.
run php artisan ui vue --auth for scaffolding out the auth views.
run npm install && npm run dev
How ever, if you still want to use Vue.js with Livewire scaffolding, use the following instructions.
IMPORTANT: Please note that Vue.js takes control of the DOM once installed, detaching nodes and replacing it, removing other JS listeners. So, if you are using Livewire on the same page with Vue, the Alpine.js that comes with Livewire scaffolding wont work. As a workaround you can use Livewire VueJS support plugin.
run npm install --save vue
Add the following to your resources/js/app.js:
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
Create an ExampleComponent.vue in the resources/js/components directory
<template>
<div>Hello World.</div>
</template>
<script>
export default {
mounted() {
console.log("Example component mounted");
}
};
</script>
Add <script src="{{ asset('js/app.js') }}" defer></script> in the <head> section of your layout file (resources/views/layouts/app.blade.php)
Add id="app" to <body> or main <div> in your layout file (resources/views/layouts/app.blade.php)
Add <example-component /> to your view
Run npm run dev or npm run watch
Finally, open up the devtools, and in the console log you should see Example component mounted
In laravel 8 project run following commands to install vue.js
run composer require laravel/ui
Install Vue php artisan ui vue
Install Vue with auth php artisan ui vue --auth
run npm install && npm run dev
I wasted so much time with this and don't want people to go through the same, so I will teach you how to install Vue.js and make it work fast.
If you want to start from scratch
replace the LaravelProject with your project name
laravel new LaravelProject
Install Vue.js on your Laravel 8 application
run the following commands
composer require laravel/ui
php artisan ui vue
php artisan ui vue --auth
npm install
npm run dev
npm run watch
Now that you have installed everything you need, go to a blade view and add the following code inside <body></body>
<div id="app">
<example-component />
</div>
<script src="{{ mix('/js/app.js') }}"></script>
If you did everything right you will see the following text on the rendering of your view
Example Component
Im an example component.
And in your console:
Component mounted.
You can install Vue 3 on your laravel project via three different ways:
Import it as a CDN package on the page
Download the JavaScript files and host them yourself
Install it using npm
1. Via CDN
include following code in your HTML file:
<script src="https://unpkg.com/vue#next"></script>
or use the following link for production:
https://cdnjs.com/libraries/vue
2. Download and Host yourself:
Download it from GitHub here:
https://github.com/vuejs/vue-next
3. Via npm
npm is the recommended installation method when building large scale applications with Vue. It pairs nicely with module bundlers such as Webpack (opens new window)or Rollup (opens new window). Vue also provides accompanying tools for authoring Single File Components.
Run this command in your terminal to get the latest stable version
$ npm install vue#next
Followed by:
npm install
Run a Command
npm install vue
In resources/js/bootstrap.js
window.Vue = require("vue/dist/vue.min");
And then run command
npm run dev
You can try npm install --save vue
You can install vue on laravel 8 by simply running below commands to install laravel ui:
composer require laravel/ui
And if you want authorizations such as login page, registartion page scaffolding then run below command from the folder where laravel project is installed:
php artisan ui vue
After running above commands run to install all dependencies and compile all style resources:
npm install
npm run dev
npm run watch
Setting up Vue in Laravel
run composer require laravel/ui
Install Vue php artisan ui vue
if you Install Vue with auth use php artisan ui vue --auth
add after in page master
run npm install
run npm run dev
run PHP artisan serve
In existing project of Laravel 8 it's better to do this installation which gets in one line:
npm i -D vue#next #vue/compiler-sfc vue-loader#next
For your project to work correctly it's also important to check webpack.mix.js, it should look this way:
mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
//
]);
As well while working with project don't forget:
npm run watch
Hope it was helpful!
A pretty simple and straightforward set of instructions
https://laravel2020.com/2022/01/25/how-to-install-vue-3-on-an-existing-laravel-8-project/
**Install Vue + Laravel 8
composer create-project laravel/laravel projectName --prefer-dist
composer require laravel/ui
php artisan ui vue
npm install
npm run dev
npm i vue-loader
npm install vue-router vue-axios
npm run dev
Success.
I am creating a stencil project which uses an npm package inside it, is there any options to add an npm package inside stencil project. Any suggestions I searching for a solution for quite a while.
This is how i use ck-editor in angular
<ck-editor name="editor" #myEditor [(ngModel)]="templateSetValue.template_content"
(change)="handleEditorData($event)">
</ck-editor>
Is it possible to use the same is stencil project
https://www.npmjs.com/package/ngx-ckeditor
Not sure if I understood the question correctly, but to add a package from npm in your Stencil.js project, you can just install it, like you would in any other node project:
npm install <some-package>
For example nprogress:
npm install nprogress #types/nprogress
and then import it in your code like
import nprogress from 'nprogress';
nprogress.start();
// ...
I am developing a button ui package for react native. I try to build an example project to test this button. The directory structure is as follows:
my-button/
package.json
index.js
example/
package.json
index.js
I try to use npm link:
cd my-button
npm link
cd example
npm link my-button
In example/node_modules/ I can see my-button symlink, VSCode also can auto complete function in my-button package.
But execute example app will show error:
Unable to resolve module my-button ...
Module does not exist in the module map or in these directories: ...
But the path in the error message is correct.
Don't know where I was wrong, or in React-Native have any special way to deal with link local dependency?
I also tried npm install file:../.. It works fine in this way, but not easy to update dependency in example/ after I edited my-button.
The npm link command doesn't work because React Native packager doesn't support symlinks.
After a little research, I discovered that there are two ways to go about it.
Use haul packager in the example app. Haul supports symlinks, so you can use npm link as usual.
Use local dependency via file:../ and then edit files in node_modules folder or reinstall every time you make changes.
I found Haul to work great for this use-case and even set-up a little starter project that also includes storybook, which is really helpful if you have many components to switch between.
Try wml (https://github.com/wix/wml)
It's an alternative to npm link that actually copies changed files from source to destination folders
# add the link to wml using `wml add <src> <dest>`
wml add ~/my-package ~/main-project/node_modules/my-package
# start watching all links added
wml start
I couldn't always make it work with yarn link. What i found extra useful is yalc:
First install it globally once forever:
npm install -g yalc
In the local library/package (i'll call it my-local-package), and run:
yalc publish
Then in your project which uses my-local-package as a dependency, run:
(if you already have added it with any other way, first uninstall it (npm uninstall -S my-lockal-package)
yalc add my-local-package
npm install
If my-local-package is a native module, then run react-native run-android to link the dependency. (or run-ios)
If you make any change in the my-lockal-package, then:
cd path/of/my-local-package
yalc push //updates the local package
cd path/to/my-project
npm install
react-native run-android (or run-ios)
In case the update hasn't been applied, try to cd android && ./gradlew clean && cd .. and then rerun: react-native run-android.
I'm having the same issue while developing a native module wrapper around an existing native SDK. At first I followed #aayush-shrestha's suggestion to install the package locally. Like this:
npm install ../<package-folder> --save
This works as long as I reference the module via NativeModules. Import it:
import { NativeModules } from 'react-native';
And then access a module called ActualModuleName like this:
NativeModules.ActualModuleName
But it fails when I attempt to import the module by name:
import { ActualModuleName } from 'react-native-actualmodulename'
To make that work I had to first pack the package. Run this in the package's root directory:
npm pack
This generates a gzipped tarball:
react-native-actualmodulename-1.0.0.tgz
Now install that in your app:
npm install <path/to>/react-native-actualmodulename-1.0.0.tgz
An enormous downside to this is that you have to re-pack the package every time you make a change to the module. The only workaround I know of is to modify the package's files in node_modules directly and then copy those changes back to your repo when you're done.
But the upside is that your app's source can import ActualModuleName the same way you'll import it once it's released via npm; no environment-specific code necessary.
You can use npm link using Metro. Just add the source folder of the linked package to watchFolders in your metro.config.js.
Ran into the same problem. While I could not make npm link work as it should, I worked around it by installing the local package in the project folder
npm install ../<package-folder> --save
This will install the package like a regular package but from the local folder.
The downside is that the changes you make on the package will not be reflected. You will have to npm install after every change.
Change your package.json
//...
"dependencies": {
//...
"my-button" : "file:../"
},
//...
I also came across this problem. After visiting the below link, I came to know that react- native does not support symlinks.[Click here][1]
However, I have solved this by adding these lines in the metro.config.js file. Please replace your_module_name with your module name.
const path = require('path');
const thirdPartyPath = path.resolve(__dirname + '/../your_module_name/'); // Path of your local module
const thirdParty= {
'your_module_name': thirdPartyPath,
};
const watchFolders = [ thirdPartyPath];
module.exports = {
// existing dependencies
resolver: {
thirdParty,
},
watchFolders
};
I ran into the same problem.
I tried to install a local module using npm, and kept running into the issue of not being able to resolve the module, even though I could see the folder in node_modules and autocomplete of class and method names worked.
I was able to bypass it by installing the local library using yarn instead of npm after seeing this open issue on github. Issue was opened September 2020 and no comment from Facebook as of yet.
This work for me:
step 1 go to package:
npm link packageNameHere
This will link this package to global node_module
step 2 go to directory which you want to use this package and run these
npm link pathToPackageDirectory
npm install pathToPackageDirectory
ex: npm link ~/myDemoPackage
This will link global node_moudle to this project
If you want to import package to file, USE FILE PATH INSTEAD OF PACKAGE NAME !
ex:
my package name is stripe-api-helper. my code are in src/index.ts
then I need to resolve like this:
import { postStripe, Item } from '#aliciaForDemo/stripe-api-helper/src'
if u use '#aliciaForDemo/stripe-api-helper' it will fail.
Could never get my own environment working using any other suggestions, but found a hack that works well (though not ideal) that can be easily set up in just a few lines of code and without changing your RN project configuration.
Use fs.watch for changes recursively in the directory where you're working on your library, and copy the updates over whenever there's been a change:
import fs from 'fs'
const srcDir = `./your-library-directory`
const destDir = `../your-destination-directory`
fs.watch("./src/", {recursive: true}, () => {
console.log('copying...')
fs.cp(srcDir, destDir, { overwrite: true, recursive: true }, function() {
console.log('copied')
})
})
For those still looking for a simple solution without other dependency, try this:
yarn --version
1.21.1
npm --version
6.13.4
Install in project root
cd my-button
yarn install or npm install
register linking in my-button
yarn link or npm link
Install example project
cd example
yarn add ../ or npm add ../
link to my-button
yarn link my-button or npm link my-button
complete pod installation (if necessary)
cd ios
pod install
Try to run
npm run watch
inside the button package. Currently, I'm using this to apply changes from the library to my main project. Please let me know if it works!