I try to run ng-bootstrap for angular 2 and I receive an error to install ng-bootstrap. I believe that is a path problem.
This 404 error occur when i try to access page, and on start npm.
When angular ng-bootstrap try to load I receive a 404 error on import module:
[1] 16.08.20 20:01:00 404 GET /#ng-bootstrap/ng-bootstrap
But this module is inside node_modules. Thanks
First you should install using below command
npm install --save #ng-bootstrap/ng-bootstrap
Refer
https://ng-bootstrap.github.io/#/getting-started
Follow this issue link, it has app module and system config reference and what he did wrong
in your app.module.ts
import {NgbModule} from '#ng-bootstrap/ng-bootstrap';
and
imports: [ NgbModule]
in systemjs.config.js
**var map:** '#ng-bootstrap': 'node_modules/#ng-bootstrap'
**var packages:** '#ng-bootstrap/ng-bootstrap': { main: 'index.js', defaultExtension: 'js' }
You should look at this issue, it provides a good insight on how to configure ngBootstrap with systemJS
I had the same issue, solved with a few changes to the systemjs.config.js
Getting started Angular2 RC5 with ng-bootstrap 404 Error
check out my learning angular 2 project, I have just make some demos with angular 2 and ng-bootstrap. https://github.com/beginor/learning-angular2
Related
I'm following using this codesandbox as a guide with my React project and receiving this error:
./node_modules/scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap.js
Module not found: Can't resolve 'TimelineMax'
Assuming I copied everything from that sandbox to my local files, why am I getting that error?
I'm using Create-react-app btw.
animation.gsap.js requires TimelineMax module so try importing 'TimelineMax' module
import { TimelineMax} from 'gsap/src/uncompressed/TweenMax.js';
also you can refer to github solution
React noob here. Trying to clone and run https://github.com/strangebnb/react-airbnb
I clone. run npm install. Then webpack but I get
ERROR in ./~/react-tap-event-plugin/src/injectTapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginHub' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/injectTapEventPlugin.js 23:2-37
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventConstants' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 22:21-56
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPluginUtils' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 23:23-60
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/EventPropagators' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 24:23-60
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/SyntheticUIEvent' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 25:23-60
ERROR in ./~/react-tap-event-plugin/src/TapEventPlugin.js
Module not found: Error: Cannot resolve module 'react/lib/ViewportMetrics' in /Users/thomas/tom/node_modules/react-tap-event-plugin/src
# ./~/react-tap-event-plugin/src/TapEventPlugin.js 27:22-58
ERROR in ./~/react-portal/build/portal.js
Module not found: Error: Cannot resolve module 'react/lib/CSSPropertyOperations' in /Users/thomas/tom/node_modules/react-portal/build
# ./~/react-portal/build/portal.js 17:29-71
I found https://github.com/thereactivestack/meteor-webpack/issues/21 (I see this is very recent, read: yesterday), and after messing around with my packages.json, changing react, react-dom, material-ui version numbers and running npm i --save react-tap-event-plugin, I got down to 'only' 1 error message
ERROR in ./~/react-portal/build/portal.js
Module not found: Error: Cannot resolve module 'react/lib/CSSPropertyOperations' in /Users/thomas/react-airbnb/node_modules/react-portal/build
# ./~/react-portal/build/portal.js 17:29-71
I'm pretty new and I'm not sure how to go about fixing this. Any hints greatly welcomed.
Thanks
Due to update in React, react-tap-event-plugin breaks
Change react-tap-event-plugin to ^2.0.0 in your package.json if using react version ^15.4.0.
I forked that repo and fixed this issue in my repo. Also, sent pull request to the owner of original repo. Here's link to my forked repo:
https://github.com/pankajvishwani/react-airbnb
If you don't want to clone my repo, you can add the following in webpack.config.js:
var reactDomLibPath = path.join(__dirname, "./node_modules/react-dom/lib");
var alias = {};
["EventPluginHub", "EventConstants", "EventPluginUtils", "EventPropagators",
"SyntheticUIEvent", "CSSPropertyOperations", "ViewportMetrics"].forEach(function(filename){
alias["react/lib/"+filename] = path.join(__dirname, "./node_modules/react-dom/lib", filename);
});
module.exports = {
...
resolve: {alias: alias},
...
}
UPDATE: As of React 16 the react-tap-event-plugin is deprecated and no longer required https://www.npmjs.com/package/react-tap-event-plugin
Old solution redundant as of React 16
Updating the react tap event plugin to over 2.0.1 will fix your issue if you're using React 15.4.0.
A new React version has been released (https://github.com/facebook/react/blob/master/CHANGELOG.md), and I read recently that there have been big changes where react-dom still secretly lived on in the react package but is now being removed. If you read 15.4.0, the first point: 'React package and browser build no longer "secretly" includes React DOM. (#sebmarkbage in #7164 and #7168)'
Also reading the tap event plugins npm docs: Only the latest tap event plugin (v2.0.1 currently) supports React 15.4+. https://www.npmjs.com/package/react-tap-event-plugin
Check the version of React and react-tap-event-plugin.
npm list --depth=0
In the short term, you could fix React to a specific earlier version.
If your package.json file contains something like:
"react": "^15.3.2",
in the dependencies section, you could change it to say
"react": "=15.3.2”,
For react 16+ react-tap-event-plugin is not required anymore:
react-tap-event-plugin
in this set-up, how do you transpile the angular2 library being imported from the generated ngfactory files?
the current app is a combination of the webpack + aot cookbook based on the angular docs
angular.io/docs/ts/latest/cookbook/aot-compiler.html
angular.io/docs/ts/latest/guide/webpack.html
I have a working POC where you can replicate the issue from this repo:
https://github.com/jetlogs/Angular2-AOT-Localization
after you've done the compilation / bundling, you can open the 2 files:
non-aot.html - this is the non-aot version of the same app, and it loads fine
aot.html - this file fails with:
ng_module_factory.js?95b1:13 Uncaught SyntaxError: Unexpected token import
Expected behavior
the expected behavior is that aot.html and non-aot.html should have the same behavior
Minimal reproduction of the problem with instructions
clone the repo, then
run these commands on the working directory:
npm install
npm postinstall
npm run build
then open aot.html to reproduce the issue
Is there any way on how to fix the import statements from the imported angular2 libraries? Thanks
UPDATE:
I've tried transpiling the angular2 source files which are in ES2015 by using the babel-loader:
{
test: /\.js$/,
loader: 'babel',
include: [
/node_modules(\\|\/)#angular/
],
exclude: [
/\.umd\.js$/
],
query: {
presets: ['es2015']
}
},
it now compiles without issues with ES6 incompatibilities, however, it now encounters a new error only for aot.html:
core.umd.js?e2a5:3272Uncaught Error: No provider for NgZone!
any reason why transpiled angular2 source codes being referenced by the AOT compiler are cdausing NgZone issues?
I've updated the repo above to reflect my latest changes
UPDATE2: 10/13/16
Updated to Angular 2.1
still the same issue
The System.import syntax used in ng_module_factory.js is ES6 style module loading. Webpack 1, which you are probably using, does not support this syntax.
A workaround might be to transpile the Angular ES6 modules to ES5 with require() syntax, but you already tried this without success.
However you might consider switching to Webpack 2, which fully supports ES6 style imports and is very close to its stable release. The compilation worked for me this way without changing anything except for the webpack config which uses a new syntax for some parts.
For me it was a wrong import generated by IDE:
import { Component, Output } from "#angular/core/src/metadata/directives";
Instead of:
import { Component, Output } from "#angular/core";
This should be straight forward, but I'm stuck.
I'm trying to include mobile-angular-ui in an angular-fullstack-generator project but I keep getting
Uncaught SyntaxError: Unexpected token < mobile-angular-ui.min.js:1
I'm adding the following at the end of the body of the _index.html, and the network tab is returning the proper 200 response.
<script src="/node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.min.js"></script>
If I use import in app.js like this
import mobileUi from '../../node_modules/mobile-angular-ui/dist/js/mobile-angular-ui.js';
Then I get the following error
Uncaught TypeError: Cannot read property 'documentElement' of undefined mobile-angular-ui.js:2584
Where am I going wrong, where am I supposed to include this?
Thanks!
Normally, with the angular-fullstack app from https://github.com/angular-fullstack/generator-angular-fullstack,
you just have to write:
npm install --save mobile-angular-ui angular angular-route
And all the dependencies will automatically be built.
In angular-fullstack, all front end libraries are handled/installed through bower and all back end libraries are handled through npm.
So if you want to use mobile-angular-ui, which is a front end library, you should try installing it like this.
bower install --save mobile-angular-ui angular angular-route
Then add the module dependency
mobile-angular-ui
in app.js of client side Then serve the project again. Now your dependency will be added automatically in your index.html file and you won't need to automatically include it in your index.html
I would like to add ngCordova in my Angular Meteor 1.3 Ionic Project.
I based to the following example but without success (probably cause it's not Meteor 1.3) : https://github.com/netanelgilad/meteor-ionic-example
I tested this package https://github.com/netanelgilad/meteor-ng-cordova but it doesn't work (probably, its no work with meteor 1.3)
=> I've got this error on google chrome console :
partyAdd.js:30 Uncaught TypeError: _angular2.default.module(...).component is not a function
=> I've got this error on Ios Simulator console (on Safari) :
TypeError: _angular2['default'].module(name, [_angularMeteor2['default']]).component is not a function. (In '_angular2['default'].module(name, [_angularMeteor2['default']]).component', '_angular2['default'].module(name, [_angularMeteor2['default']]).component' is undefined)
Could you help me please to add ngCordova ?
from this tutoriel : http://www.angular-meteor.com/tutorials/socially/angular1/ionic
Thank you
I found a solution, see it fits for you:
First install angular-component
meteor npm install --save angular-component
Then add in your main.js
import 'angular-component';
npm install --save ng-cordova
Then, where you define your main app's angular module (in my case at the top of app.js) add:
import 'ng-cordova'
Of course, remove any Atmosphere package you might have had for ngCordova if you're upgrading from Meteor 1.2