For a new project, I have run those in terminal
npm init
meteor add angular2-compilers
meteor remove blaze-html-templates
meteor npm install --save angular2-meteor
meteor npm install --save meteor-node-stubs
meteor npm install --save bootstrap4-webpack-package
meteor npm install --save ng2-bootstrap
import 'reflect-metadata';
import 'zone.js/dist/zone';
import 'bootstrap4-webpack-package';
import { Component } from 'angular2/core';
import { bootstrap } from 'angular2/platform/browser';
import { Alert } from 'ng2-bootstrap/ng2-bootstrap';
#Component({
selector: 'app',
template: `<alert type="info">ng2-bootstrap hello world!</alert>`,
directives: [Alert]
})
class App { }
bootstrap(App);
Right now bootstrap4-webpack-package makes Bootstrap 4 works, but ng2-bootstrap still not works.
Since I am using Bootstrap 4, so I also tried to add
import { Ng2BootstrapConfig, Ng2BootstrapTheme } from 'ng2-bootstrap/ng2-bootstrap';
Ng2BootstrapConfig.theme = Ng2BootstrapTheme.BS4;
But still not works.
It shows the error:
EXCEPTION: No Directive annotation found on Alert
EXCEPTION: Error: Uncaught (in promise): No Directive annotation found on Alert
I am not sure whether this is related with this issue.
How can I use ng2-bootstrap? Thanks
At last I found it is because of my NPM problem. Because the code can run well on other people's machine.
I uninstall my NPM, and install the new v5.10.1, the problem fixes!
Check here for details.
Hope this can help people who met similar weird problem.
Related
I'm following along the guide to setup Meteor Tabular v2.1.2 (guide). I have added the package and installed the theming packages. I'm using Meteor v2.8.0 and the project is a Blaze-based project.
In client/main.js, I set up the library as instructed.
import { $ } from 'meteor/jquery';
import dataTablesBootstrap from 'datatables.net-bs';
import 'datatables.net-bs/css/dataTables.bootstrap.css';
import "../imports/ui/body";
dataTablesBootstrap(window, $);
Now when I go to the browser, there is this error:
Can anyone help me on this?
So after serious debugging , I discovered it is enough to just import the DataTable module as such after installing it with npm
import { $ } from 'meteor/jquery';
import 'datatables.net-bs';
import 'datatables.net-bs/css/dataTables.bootstrap.css';
import "../imports/ui/body";
// You don't need the code previously here .
You can now setup you DataTable as such
$(element).DataTable(//Your config object)
I downloaded the ChartJS package on Symfony, and I would like to be able to use it with webpack-encore
In my Twig template, I can use Chart with :
new Chart(document.getElementById("myChart"), { ..... }
It works with CDN, but now I would like to use it with webpack-encore.
So in my app.js I tried :
//1er essai
import Chart from "chart.js";
global.Chart = Chart
//2eme essai
const Chart = require("chart.js");
global.Chart = Chart;
But neither works. Each time in the browser I get the following error :
Uncaught ReferenceError: Chart is not defined
Can someone help me please ?
When using webpack encore I find it easier to install different modules via npm.
In the documentation it says that bower and npm are recommended.
So you basically write this
npm install chart.js --save
And for usage you simply import it.
If you use Yarn (recommended by Webpack Encore), just type :
yarn add chart.js
Then in your js file :
import Chart from 'chart.js';
new Chart($("#myElement"), {
...
});
I'm trying to add SQlite to my ionic4 project, but get installation errors.
My NPM install was this:
ionic cordova plugin add cordova-sqlite-storage
npm install #ionic-native/sqlite
//ionic plugin add cordova-sqlite-storage ==> this one makes error
In main.js, I tried each of the following:
import SQLite from 'ionic-native';
import {SQLite} from 'ionic-native';
import SQLite from '#ionic-native/sqlite';
import {SQLite} from '#ionic-native/sqlite';
import { SQLite, SQLiteObject } from '#ionic-native/sqlite';
Here are the errors: a) npm warning, b) console error, and c) Chrome inspector for main.js
And here's the code from main.js (last line is where everything fails).
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
render : (h) => h(App),
mounted() {
this.storage = new SQLite();
*** I marked this question as answered, but there appears to be no answer yet. I'll keep working on it.
#ionic/vue is still in beta and the team is working on integrating it with the Vue CLI. They are also using Capacitor, not Cordova, as the official native bridge for this project. As such it is recommended to use Capacitor if at all possible. Should you go that route, their storage API is available in lieu of SQLite.
If you would like to persist with your Cordova project, the Ionic Storage abstraction won't be available so you would have to bypass Ionic altogether.
Install the plugin using the Cordova CLI (#ionic-native/sqlite is not required):
cordova plugin add cordova-sqlite-storage
Use the plugin directly e.g.
const db = window.sqlitePlugin.openDatabase({...})
db.executeSql('INSERT...', [...values], callbackFn, errorFn)
I tried following Meteor's guide on how to install npm packages for createjs, however I end up with the following error message:
Error: Cannot find module 'createjs'
Here's what I ran in a fresh project:
meteor npm install --save createjs
meteor npm install
The package shows up as dependency in my local package.json:
"dependencies": {
"#babel/runtime": "^7.1.5",
"createjs": "^1.0.1",
"meteor-node-stubs": "^0.4.1"
},
I try using the package in my body.js as follows:
import createjs from 'createjs';
// tried with standard node require, too:
const createjs = require('createjs');
What am I missing?
Note: This is a workaround, may not be the solution to your problem.
Import the createjs library using the CDN by including it in your app's <head> tag as below:
<head>
.....
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
</head>
Then, you can use createjs in your js as below:
var stage = new createjs.Stage('myCanvas');
console.log(stage);
Since I could not get the package to work I ended up including all relevant files to client/lib, importing them using import './lib/easeljs.js'; inside my client's main.js.
I would like to know how to use React components from npm in Meteor 1.3 using import.
I am trying to use react-gravatar in my project. I did npm install --save react-gravatar. And in my component, I required it:
import React from 'react';
import Gravatar from 'react-gravatar';
export default React.createClass({
render() {
...
}
});
But I get:
Uncaught Error: Cannot find module 'querystring'
I think this is because querystring is not available in client side, and I need to use browserify-reactify of some sort. But how can I do so in Meteor 1.3?