I have an angular2-meteor project.
I tried to use RxJS, so I added these in my code:
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';
But when I run it, it shows:
Cannot find module 'rxjs/Observable'.
Do I need install any package from Atmosphere?
You should this import:
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map'; // for example to add a specific operator
instead of this one:
import {Observable} from 'rxjs/Observable';
I don't Atmosphere but this package is what you define in the package.json file:
{
"name": "apispark-angular2",
(...)
"dependencies": {
"angular2": "2.0.0-beta.0",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0", <---------------
"systemjs": "0.19.6",
"zone.js": "0.5.10"
},
(...)
}
You need it to make work Angular2. For example class EventEmitter class extends the Subject class that is part of the rxjs library...
Related
I've got an application where I have to configure and use less for dynamic theme implementation. The issue is we are not using angular-cli and configuration is bit weird here, so we are manually bootstrapping angular modules.
Following is the configuration of app:
package.json
"dependencies": {
"#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",
"#angular/upgrade": "^4.0.0",
"#angular/animations": "^4.0.1",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "^5.0.1",
"systemjs": "0.19.39",
"zone.js": "^0.8.4"
},
and so on..
main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { ThemeModule } from "./theme.module";
window.appnamespace.platform = platformBrowserDynamic();
window.appnamespace.AppModule = AppModule
window.appnamespace.ThemeModule = ThemeModule;
theme.module.ts
import { NgModule } from "#angular/core";
import { BrowserModule } from "#angular/platform-browser";
import { ThemeComponent } from "./theme.component";
import { ThemeToolbar } from "./Themes/theme-toolbar/theme-toolbar.component";
import { ThemePreview } from "./Themes/theme-preview/theme-preview.component";
import { ThemeService } from "./services/themeManagement.service";
const PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
suppressScrollX: true
};
#NgModule({
imports: [
BrowserModule,
],
declarations: [
ThemeComponent,
ThemeToolbar,
ThemePreview,
SetFocusDirective
],
providers: [ThemeService, LocalizeThemeService, CommonService],
bootstrap: [ThemeComponent]
})
export class ThemeModule { }
its component:
#Component({
selector: "my-theme",
templateUrl: "../js/divdrawer/Themes/theme.template.html"
})
export class ThemeComponent implements OnInit {
//
}
and bootstrapping it through javascript like this:
window.appnamespace.platform.bootstrapModule(window.appnamespace.ThemeModule);
theme.preview component
#Component({
selector: "theme-preview",
templateUrl: "../theme-preview/theme-preview.component.template.html",
styleUrls: ['../theme-preview/theme-style.less']
})
export class ThemePreview implements OnInit {
// some code
}
theme-style.less: contains the css
#import "./theme-variable.less";
// some css
theme-variable.less: contains the less variables
#header-bg :red;
#badge-title-bg : #ddd;
I want to use less variables and styles in my theme-preview component to change theme dynamically.
How can I configure less in theme component only.
In your #Component, the property styleUrl has all the style files which need to be complied together into a single CSS file. This is however done by angular CLI.
If you intend to use CLI to generate CSS from less, go to the file called angular.json and change the value of schematics.#schematics/angular:component.style to 'less'.
This however, may not help you in dynamic (run-time) theming. For dynamic theming,
import all the less file using #import statement in any 1 main file
For serer side compilation, compile it using node.js server and less.js when CSS is requested. Therefore, less.js will be a production dependency in your node.js project.
For client side compilation, put the main less file created in step 1 into html's head section as below.
<link href="main.less" rel="stylesheet" type="text/less"/>
Next, import less.js into the main.ts of angular app or use script tag for less.js in the HTML body.
In the #Component, styleUrls can be removed as there is no use of it.
Also, all the component related styles need to be wrapped in 1 class specific to the component(both HTML and less). This will ensure that you achieve the same behavior as that of angular CLI.
Hope this helps. Please comment for any more specific issue in this.
I am having a lot of trouble getting bootstrap-vue working. See the image of what happens when I copy and paste the navbar component from the boostrap-vue.js.org. Bits and pieces are missing and I don't understand why. When I create b-links I can create router links that work but they have zero styling. The primary button seems to be OK but then often buttons don't look correct and radios are invisible. Basically something is not right.
boostrap vue navbar example
vue navbar screenshot
Package.json
"dependencies": {
"bootstrap": "^4.0.0-alpha.6",
"bootstrap-vue": "^2.0.0-rc.11",
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"#babel/core": "^7.1.0",
"#fortawesome/fontawesome-free": "^5.3.1",
"#vue/cli-plugin-babel": "^3.0.3",
"#vue/cli-plugin-eslint": "^3.0.3",
"#vue/cli-service": "^3.0.3",
"node-sass": "^4.9.3",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.17"
main.js
import Vue from 'vue';
import BootstrapVue from 'bootstrap-vue';
import App from './App.vue';
import router from './router';
import store from './store';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
Vue.use(BootstrapVue);
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
Make sure you have both vue-style-loader and css-loader in package.json
Check this post
I've installed and used AngularFire2 a lot of times for projects, but since the release of v5, I can't set it up correctly.
These are the steps I follow to reach the issue.
$ ionic start angularfire2test tabs
$ npm install angularfire2 firebase --save
package.json
"angularfire2": "^5.0.0-rc.3",
"firebase": "^4.5.2",
Add Firebase credentials to app.module.ts + import default module and database module. This is the most important part
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
...
#NgModule({
declarations: [
MyApp,
AboutPage,
ContactPage,
HomePage,
TabsPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseCredentials),
AngularFireDatabaseModule
],
bootstrap: [IonicApp],
entryComponents: [
....
When I execute $ ionic serve, I get the error message "Cannot find module "#firebase/database" at webpackMissingModule (http://localhost:8100/build/vendor.js:119190:82)
When checking the node_modules folder, #firebase doesn't have a database subfolder, but the firebase-folder does have a database-folder.
Did I do something wrong or is it a general issue with AngularFire2?
I think it has to do with an issue with npm.
When using yarn to install the modules, everything works flawlessly.
yarn add angularfire2 firebase
tldr: Node: 8.4.0/npm: 5.2.0 has issues, yarn works
You could try with:
$ rm -rf node_modules/
$ npm install
$ npm install angularfire2#latest --save
or to change AngularFireDatabaseModule by AngularFireDatabase.
I had no luck trying to reproduce your issue.
I would suggest if this is still an issue for you trying the following:
Check for differences between my configuration below and yours
View the notes for configuring ionic3 here
Reinstalling npm (sounds crazy but occasionally I do this and issues disappear and I see mine is a little newer than yours)
npm configuration
$npm ls -g --depth=0
/Users/pbrack/.nvm/versions/node/v8.5.0/lib
├── cordova#7.1.0
├── cordova-check-plugins#3.0.1
├── ionic#3.13.2
├── ios-deploy#1.9.2
└── npm#5.4.2
Configuration Steps
$ ionic start angularfire2test blank
$ npm install angularfire2 firebase --save
package.json
{
"name": "angularfire-test",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "http://ionicframework.com/",
"private": true,
"scripts": {
"clean": "ionic-app-scripts clean",
"build": "ionic-app-scripts build",
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve"
},
"dependencies": {
"#angular/common": "4.4.3",
"#angular/compiler": "4.4.3",
"#angular/compiler-cli": "4.4.3",
"#angular/core": "4.4.3",
"#angular/forms": "4.4.3",
"#angular/http": "4.4.3",
"#angular/platform-browser": "4.4.3",
"#angular/platform-browser-dynamic": "4.4.3",
"#ionic-native/core": "4.3.0",
"#ionic-native/splash-screen": "4.3.0",
"#ionic-native/status-bar": "4.3.0",
"#ionic/storage": "2.0.1",
"angularfire2": "^5.0.0-rc.3",
"firebase": "^4.6.0",
"ionic-angular": "3.7.1",
"ionicons": "3.0.0",
"rxjs": "5.4.3",
"sw-toolbox": "3.6.0",
"zone.js": "0.8.18"
},
"devDependencies": {
"#ionic/app-scripts": "3.0.0",
"typescript": "2.3.4"
},
"description": "An Ionic project"
}
app.module.ts
import {BrowserModule} from '#angular/platform-browser';
import {ErrorHandler, NgModule} from '#angular/core';
import {IonicApp, IonicErrorHandler, IonicModule} from 'ionic-angular';
import {SplashScreen} from '#ionic-native/splash-screen';
import {StatusBar} from '#ionic-native/status-bar';
import {MyApp} from './app.component';
import {HomePage} from '../pages/home/home';
import {AngularFireModule} from 'angularfire2';
import {AngularFireDatabaseModule, AngularFireDatabase} from 'angularfire2/database';
import {AngularFireAuthModule} from 'angularfire2/auth';
export const firebaseConfig = {
apiKey: "xxxxxxxxxx",
authDomain: "your-domain-name.firebaseapp.com",
databaseURL: "https://your-domain-name.firebaseio.com",
storageBucket: "your-domain-name.appspot.com",
messagingSenderId: '<your-messaging-sender-id>'
};
#NgModule({
declarations: [
MyApp,
HomePage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
AngularFireModule.initializeApp(firebaseConfig),
AngularFireDatabaseModule,
AngularFireAuthModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage
],
providers: [
StatusBar,
SplashScreen,
AngularFireDatabase,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {
}
home.ts
import {Component} from '#angular/core';
import {AngularFireDatabase} from 'angularfire2/database';
import {Observable} from 'rxjs/Observable';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
items: Observable<any[]>;
constructor(afDB: AngularFireDatabase) {
this.items = afDB.list('cuisines').valueChanges();
}
}
Install latest angularfire2 and firebase#4.8.2
npm install firebase#4.8.2
npm install angularfire2#latest
It is no longer necessary "--save", it remains implicit
1.Inside package.json, remove ^ from "firebase": "^4.8.1"
1.1 Downgrade Firebase from 4.8.1 to 4.8.0 by changing 4.8.1 to 4.8.0
1.2 End result should look like this: "firebase": "4.8.0"
Run npm update in the Project Root. NPM will downgrade Firebase for ya
Run ng serve --open to check for compilation errors. There shouldn't be any.
Reason:
Firebase had introduced some breaking changes that AngularFire2 had not coped up with yet. Until the AngularFire2 team work it out, this will be the solution.
Add a thumbs up emoji and direct anyone having the same trouble here! Would save a lot of their time!
First you will do npm install firebase #angular/fire
and then npm install angularfire2#latest
The following code worked for me
npm install --save firebase #angular/fire -f
No matter I use Provider in my rendering code or not, I get a blank screen. Then, I found that even I just import Provider from react-redux , I will get a blank screen. But if I comment out the import { Provider } from 'react-redux', the apps work sucessfully.
As suggested by the official repo, I have checked there is no duplicate react module installed with npm ls react and the version of react-redux is above 5, which should be working with react-native.
How should I solve the problem?
Thanks.
App.js:
import React from 'react';
import {
Platform,
} from 'react-native';
import { Router, Scene } from 'react-native-router-flux';
import { Provider } from 'react-redux';
import Home from './pages/Home';
import Chat from './pages/Chat';
export default class App extends React.Component {
render() {
return (
<Router>
<Scene key='root' style={{paddingTop: Platform.OS === 'ios' ? 64 : 54}}>
<Scene key='home' title='Home' component={Home}/>
<Scene key='chat' title='Chat' component={Chat}/>
</Scene>
</Router>
);
}
}
Package.json dependencies:
"dependencies": {
"async-storage": "^0.1.0",
"body-parser": "^1.18.1",
"classnames": "^2.2.5",
"cookie": "^0.3.1",
"es6-promise": "^4.1.1",
"express": "^4.15.4",
"firebase": "^3.9.0",
"jsonwebtoken": "^8.0.1",
"mkdirp": "^0.5.1",
"moment": "^2.18.1",
"mongoose": "^4.11.11",
"morgan": "^1.8.2",
"multer": "^1.3.0",
"nodemailer": "^4.1.0",
"normalizr": "^3.2.3",
"object-assign": "^4.1.1",
"passport": "^0.4.0",
"passport-facebook": "^2.1.1",
"passport-jwt": "^3.0.0",
"prop-types": "^15.5.10",
"react": "16.0.0-alpha.12",
"react-native": "0.47.0",
"react-native-gifted-chat": "0.0.10",
"react-native-router-flux": "^4.0.0-beta.21",
"react-redux": "5.0.5",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2",
"redux-form": "^7.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^4.9.1",
"redux-thunk": "^2.2.0",
"serialize-javascript": "^1.4.0",
"superagent": "^3.6.0",
"validator": "^8.2.0",
"webpack-isomorphic-tools": "^3.0.4"
}
}
Why dont you use react's component. Look below
import React, { Component } from 'react'
use the react-redux for the connect like
import { connect } from 'react-redux'
and
export default connect(mapStateToProps, {sampleActionHere})(ComponentsName)
I think I have solved the problem by upgrading react-redux to 5.0.6.
In setuping angularfire2 documentation when I import AngularFireDatabaseModule,ngularFireAuthModule in ng module there is this bug :
cannot compile tns_modules/angularfire2/database.js.
What is the problem?
app.module.ts :
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AngularFireModule } from 'angularfire2';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireAuthModule } from 'angularfire2/auth';
import { AppComponent } from "./app.component";
#NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [NativeScriptModule,
AngularFireDatabaseModule,
AngularFireAuthModule,
],
schemas: [NO_ERRORS_SCHEMA],
})
export class AppModule {}
#Gandom as far as I saw the angularfire2 is not compatible with NativeScript as it depends on som browser specific modules. To use Firebase in NativeScript I would recommend using nativescript-plugin-firebase