I have an issue with the Angular 2 Router. I want basically to be able to navigate through my app with a function so I wanna use the navigate function from the Router, like in the official example.
So here is what I have in my files :
index.html
<script src='#routes.Assets.versioned("lib/typescript/lib/typescript.js")'></script>
<script src='#routes.Assets.versioned("lib/es6-shim/es6-shim.min.js")'></script>
<script src='#routes.Assets.versioned("lib/angular2/bundles/angular2-polyfills.js")'></script>
<script src='#routes.Assets.versioned("lib/angular2/es6/dev/src/testing/shims_for_IE.js")'></script>
<script src='#routes.Assets.versioned("lib/systemjs/dist/system.js")'></script>
<script src='#routes.Assets.versioned("lib/rxjs/bundles/Rx.js")'></script>
<script src='#routes.Assets.versioned("lib/angular2/bundles/angular2.dev.js")'></script>
<script src='#routes.Assets.versioned("lib/angular2/bundles/http.js")'></script>
<script src='#routes.Assets.versioned("systemjs.config.js")'></script>
<script src='#routes.Assets.versioned("lib/angular2/bundles/router.dev.js")'></script>
and in the typescript file where I want to use navigate :
import { Http } from "angular2/http"
import { Router } from "angular2/router"
export class ClassName {
constructor (private _http: Http, private _router: Router) {}
goSomewhere(pageName: string) {
let link = [pageName]
this._router.navigate(link)
}
}
It's basically this, I tried to undo and add step by step, and the import worked and then it failed when adding it to the constructor, removing private or renaming the variable didn't work either.
On my imports I used to have angular2.js and router.js and got this issue :
angular2-polyfills.min.js:1 Error: EXCEPTION: Error during instantiation of t! (e -> t).
but I found here it could fix the issue by using the dev libs, but now I have this :
angular2-polyfills.min.js:1 Error: EXCEPTION: Error during instantiation of ApplicationRef_! (ApplicationRef -> ApplicationRef_).
Now I'm a bit lost... For information I'm using the beta 17 version of Angular 2.
So I found a way to make it work. We cannot use Router in a constructor of an #Injectable with no #RoutesConfig, so to keep the logic I wanted, I made this in my injectable class :
doSomething(router: Router, foo: any) {
//instructions with set of link variable
router.navigate(link)
}
and now I just have to add the injectable class and the router in all my components constructors and use _className.doSomething(this._router, foo) to use the function
Hope it will help some others :)
Related
I was trying to use redux in an angular 1.x app. I added the scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js"></script>
<script src="https://unpkg.com/ng-redux/umd/ng-redux.min.js"></script>
to my html head. Then I created a file just to test if things are working correctly:
angular.module("app", ["ngRedux"]).config(function ($ngReduxProvider) {
$ngReduxProvider.createStoreWith(
{
counterStateReducer: function (state, action) {},
},
[]
);
});
But when I run I get an error:
TypeError: Cannot read properties of undefined (reading 'combineReducers')
at Object.$get (ngRedux.js:92:18)
at Object.invoke (angular.js:5208:19)
...(other lines ommited by me)
I know that the error is from the file ngRedux.js specifically at this line _reducer = combineReducers(reducersObj); but I am new to JS and the docs don't say how to import this library other than by adding the scripts, so how can I fix it?
Turns out the dependencies scripts were wrong, these ones worked for me:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.js"></script>
<!-- Redux -->
<script src="https://unpkg.com/redux#latest/dist/redux.js"></script>
<!-- NgRedux -->
<script src="https://unpkg.com/ng-redux/umd/ng-redux.js"></script>
I got them from the examples page on the official github repos of ngRedux and redux.
Note: you may also need to declare type=module on these scripts if you get that import is not defined.
var Provider = ReactRedux.Provider;
var connect = ReactRedux.connect;
i got error when calling to ReactRedux.Provider, but the error is pointing to brower.js and babel.js .
Since you're using CDN links. The url you provided doesn't export a valid export for what you're trying to do.
I tried a unpkg link and it worked fine.
<script crossorigin src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-redux#5.0.6/dist/react-redux.js"></script>
With these links the ReactRedux export exists and you can access it's components. Thus what you were trying to do will work
var Provider = ReactRedux.Provider;
var connect = ReactRedux.connect;
In a Meteor/React app I need to import Stripe from mrgalaxy:stripe. I tried:
import { Stripe } from 'meteor/mrgalaxy:stripe';
but it returns:
TypeError: Cannot read property 'setPublishableKey' of undefined
In the server folder I created stripe.js file where added the following:
import { Meteor } from 'meteor/meteor';
import { Stripe } from 'meteor/mrgalaxy:stripe';
Meteor.startup(function(){
Stripe.setPublishableKey(Meteor.settings.public.StripePub);
});
Based on this test that's in the github repository where there is no import statement
Tinytest.add('Stripe client is available', function(test){
test.isTrue(Stripe != null);
});
I'm guessing that including the package just adds a Stripe variable to the global scope.
The stripe_client.html page, that appears to be the only client code in the package, just contains the following html snippet.
<head>
<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
<script type="text/javascript" src="https://checkout.stripe.com/checkout.js"></script>
</head>
Thus, I think your import is just overriding the global variable. Have you tried removing your import statement? (Please forgive my almost total ignorance of meteor - I may be way off base here).
What helped me was adding this package "stripe": "^4.9.0" into package.json in addition to mrgalaxy:stripe in .meteor/packages
Uncaught Error: [$injector:modulerr] Failed to instantiate module
myApp due to: Error: [$injector:nomod] Module 'myApp' is not
available! You either misspelled the module name or forgot to load it.
If registering a module ensure that you specify the dependencies as
the second argument.
Good day, before I asked this question, I looked through all the previous answers to this question as well as went through documentation, unfortunately non did help me that is why I am asking.
This is the how I am using angular and controller:
html file:
<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app="myApp">
<div ng-controller="login.controller">
<input ng-model="foodDescription">
<button ng-click="onSomethingChanged(foodDescription)">Do Something</button>
<h1>The Food is {{viewModel.foodDescription}}</h1>
</div>
<script type='text/javascript' src="./node_modules/angular/angular.js"></script>
<script type='text/javascript' src="./module.js"></script>
</body>
</html>
Module file:
import angular = require('angular');
import loginControllerImport = require('./Views/login/login.Controller');
var app: angular.IModule = angular.module("myApp", []);
app.controller(loginControllerImport.name, loginControllerImport.loginController);
loginControllerImport.loginController.$inject = ['$scope'];
export = app;
Controller file:
import angular = require('angular');
import loginViewModelImport = require('./login.viewModel');
export interface ILoginControllerScope extends angular.IScope {
viewModel: ILoginViewModel;
onSomethingChanged: (myFood: string) => void;
}
export class loginController {
constructor(private $scope: ILoginControllerScope) {
this.$scope.viewModel = new loginViewModelImport.loginViewModel();
this.$scope.onSomethingChanged = this.onSomethingChanged.bind(this);
}
private onSomethingChanged(myFood: string) {
this.$scope.viewModel.foodDescription = myFood;
}
}
export var name: string = "login.controller";
View Model file:
export class loginViewModel implements ILoginViewModel {
private _foodDescription: string;
get foodDescription(): string {
return this._foodDescription;
}
set foodDescription(value: string) {
this._foodDescription = value;
}
}
So what would be the problem for this error to appear? Why is it appearing? how can I fix it? How can I avoid it in the future?
Many thanks.
Since you use require() to load your dependencies, you should also a) bundle them into one output file, b) load them manually or c) load them with a library like RequireJS. I cannot verify if module.js is your bundle file, otherwise this code won't succeed unfortunately.
If I would face this problem myself, I would strip down the app to the bare minimum (just load the myApp module itself) and get that one working. After getting this spinning up, add your view models and controllers (tip: one by one).
I am newbie to React.js. For learning purpose just I created the login page which you can find here.
In my local project also, I used the CDN for babel and react, like below.
<script src="https://unpkg.com/react#latest/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#latest/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
I want to use one of the form validation plugin into this example. But when I tried to include this (as per the document)
import ValidateableForm from 'react-form-validate';
I am getting the following error.
Uncaught ReferenceError: require is not defined
I went through few posts and they said that I have to use webpack or Rollup or Browsify .I am not sure how to include this in to my current local project setup. Since I am not using npm (in learing I dont want to use npm)
I dont know how to include that plugin into my project
If it is already coming with external site , I cant able to figure
it out what is the issue.
Please help me to resolve the issue.
This is an old question, but at least currently, this is completely possible with conventional script tags. This article is very helpful for understanding development setup alternatives for React
In that article it details bringing in React, React-Dom, and Babel via script tags for development, like this (I'm linking to npm downloaded packages, but that isn't necessary):
<script src="/node_modules/react/umd/react.development.js"></script>
<script src="/node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="/node_modules/#babel/standalone/babel.min.js"></script>
In my case, I needed to bring in the react-notification-system plugin:
<script src="/node_modules/react-notification-system/dist/react-notification-system.min.js"></script>
(Note the use of the compiled 'dist' version)
Once that was included I was able use it like this:
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.notificationSystem = new ReactNotificationSystem();
}
addNotification = event => {
event.preventDefault();
const notification = this.notificationSystem.current;
notification.addNotification({
message: 'Notification message',
level: 'success'
});
};
render() {
return (
<div>
<button onClick={this.addNotification}>Add notification</button>
<ReactNotificationSystem ref={this.notificationSystem} />
</div>
);
}
}
I had to look in the plugin's code to know that the name: ReactNotificationSystem would be available, much of the plugin documentation that you find is not written with this type of dev setup in mind, but it does work.