I am getting error while i use the angular2 from node_modules.
How do I fix? What I missed in my html file?
Please give me a git repo for angular2 for offline development.
Edit: I missed that the console was throwing other errors, too. I use Karma to run unit tests for an angular2 app and borrowed much of my test setup from the angular2 project itself.
Karma loads the files and since I'm using them for test, I load out of node_modules. The first four must be loaded first and in this order before bringing in angular2 and other libs:
'node_modules/angular2/node_modules/traceur/bin/traceur-runtime.js',
'node_modules/es6-module-loader/dist/es6-module-loader-sans-promises.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/angular2/**/*.js
Then a test helper configures System:
System.config({
...
paths: {
'angular2/*': 'node_modules/angular2/*.js',
'rx': 'node_modules/angular2/node_modules/rx/dist/rx.js'
}
...
});
Hope that helps. You may want to pull the files you need into a lib directory if you're serving them with your code.
Related
I have a problem with my Angular project build, and ultimately deployment to heroku. I'm using an old(ish) npm package called binary parser, which causes the following error on when I build / deploy to heroku:
Module not found: Error: Can't resolve 'console' in '/tmp/build_e75b87f248f44978f9537d83b3172254/node_modules/binary-parser/dist'
The binary-parser.js has a line require("console"); which is used in exactly one place, so local builds succeed and the application works perfectly, if only I remove console from that line altogether. But as, heroku installs node modules when deploying, this only helps when I manually build the prod version.
I have installed typings for binary-parser and for TS, and also included "types": ["node"] in both tsconfig.json and tsconfig.app.json compilerOptions.
As angular these days doesn't really allow for webpack configuration, I've tried adding global.console = global.console || require('console-browserify');
(or)
global.console = global.console || require('console');
to my polyfills, to no avail.
Any ideas on how to solve this? Do I need to configure a custom webpack to circumvent this? I'll gladly post additional information if necessary!
Here's a possible cause, may or may not be what you or others reading this question are experiencing...
My IDE's auto importing added import * as console from "console"; when I typed console.log.
Solution was of course to remove that import statement.
After trying for multiple hours to come up with the right configuration, the only solution I could come up with was forking the repo in question and changing tsconfig target from es5 to es6, which got rid of the console import altogether upon compilation.
This seems related to BABEL: Unknown option: base.Children, but the fixes provided there don't help my situation. Two days ago I had an Electron application that ran in development mode (via 'electron-forge start') and as a packaged application (starting the executable in the folder produced by 'electron-forge package'). The app continues to run in development, and it will execute in production, but Babel produces an error in the Web console:
Unknown option: base.Children. Check out http://...
This occurs on the first require statement calling for one of my JSX files (there's another thing: react-forge doesn't transpile the JSX, and I suspect I'm about to be told to RTFM over that matter). I can get the same error to pop up whenever I want; all I have to do is enter "require('somefile.jsx')" in the console, and it'll do the same thing. Investigation of the error reveals that the options manager's mergeOptions function is passed a copy of React at one point during the loop that's supposed to incorporate the presets and plugins. Again, this did not start happening after a change to the application code; I tried to update some packages in NPM, and the next build I did produced this error.
I've wiped the node_modules directory completely and run a fresh 'npm install' followed by 'electron-rebuild' and a repackaging of the app produces the same results. I've tried incorporating the .babelrc contents in package.json according to the docs at the Babel website. Again, dev works fine and production fails. Creating a compliant .compilerc produced similarly disparate results. How is my production app getting a React component where it should have the Babel options?
I just found the solution. It's a combination problem. React itself and the React preset for Babel both answer to 'react' as a preset name. If the plugin is missing but React is present, Babel will pull React and pass it to mergeOptions, producing the error described.
On the other side, if you've made the mistake of requiring a module (like the React preset) in your package.json under both dev dependencies and general dependencies, the packaging subprocess run by electron-forge will ignore the entry under general dependencies. Result: no preset, and instead of spitting out a "missing a preset" error, Babel just sucks up React itself and pretends it's found the preset it was told to look for.
I am using angular-cli with built-in webpack and encounter the following problem: if I use ng serve --host 0.0.0.0 --port 3000 everything works fine, but when I try to build the app (no matter developer mode or production) with ng build and then put it into my nginx, not a single route works and every attempt of browser to download image, which is used on start page, ends with 404 error. What am I doing wrong? Googled a ton of stuff and nothing seems to be a solution.
Some additional info:
angular-cli: 1.0.0-beta.21
node: 6.9.4
os: win32 x64
So for everyone who encounters this problem, after some research I found this:
1) To solve problem with styles not loading properly, add encapsulation: ViewEncapsulation.None to each of your components #Component() decorator, this way it's going to bundle styles properly. More info here: https://angular.io/docs/ts/latest/guide/component-styles.html#!#loading-styles
2) Make sure all your images are stored inside assets folder. If you store them in some other folder like images, just put that images folder inside assets
3) And for information about paths not working on page reload, have a look at this question and read some information about strategies: Angular 2 : 404 error occur when i refresh through Browser
Also this link has config examples https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode
I am trying to get the meteor leaderboard app to run on Node-Webkit.
I have demeteorized it and compressed it to a .nw file but when I drop it in. I get errors:
Invalid Package There is no 'package.json' in the package, please
make sure the 'package.json' is in the root of the package.
I have read on various thread but nothing clear yet.
It seems like the demeteorized app needs to be restructured. Also need to figure out how to run the server [Locally/DDP].
Edited:
P.S. I am using the demeteorized files from the leaderboard meteor app to be able to run it in node-webkit.
What exactly I am trying to figure out here is :
how to run/init the local node(demeteorized) server and set the port.
How to set environment variables for the demeteorized app for mongodb etc.
What would be used as the
"main": ?,
"node-remote": ?
for the node-webkit package.json file.
Can someone please shed some light and if possible an example will be highly appreciated.
Thanks in advanced.
Praney :)
UPDATE:
After tinkering a bit, I added the "main": "index.html" and added index.html file to the root of the demeteorized app. This file just loads the main.js file in the browser, here:
<!DOCTYPE html>
<html>
<head>
<title>Leaderboards</title>
</head>
<body>
</body>
<script src="main.js" type="text/javascript"></script>
</html>
Now I am getting this error:
"Uncaught ReferenceError: __dirname is not defined", source:
file:///Users/Praney/projects/webkit/nw-sample-apps/leaderboards/main.js(2)
main.js
process.argv.splice(2, 0, 'program.json');
process.chdir(require('path').join(__dirname, 'programs', 'server'));
require('./programs/server/boot.js');
This isn't how demeteorizer is meant to be used.. exactly/kind of.
You would use the output bundle on your deployed server to run as your meteor app, not put it in an existing meteor app.
The package.json that you get from it is slightly different to the one that meteor-npm would use.
When you've finished your meteor app you would use demeteorizer to create an easy bundle that can run on your server. If you uploaded it and untarred it:
You would install the npm modules by cding into the bundle and running npm install
You can run the app as normal as described in the docs.
The whole purpose of demeteorizer is to nodify your app, you wouldn't need to this on the platform you made it since all the npm modules would already be working. The problem it solves is usually with cross-archs, e.g if you made your app on OS X and it uses binary npm modules and the server uses Ubuntu (not os x)
I suppose node-webkit could also do it, you would need to use the root directory of demeteorize for this (seperate from your app). You can see there's a package.json already in it, perhaps the root directory you set it to use is that of your meteor app and not the untarred output of the demeteorized app?
I have created a unit test in angular js,However I have no idea on how to setup node.js and Karma
So I downloaded the node.js from nodejs.org and installed it.
Open the command prompt and installed karma by executing "npm install karma"
It installed karma.But when I execute my angular js unit test case,it reports some errors
angular is undefined.
I followed the instructions as mentioned in this
http://bardevblog.wordpress.com/2013/07/28/setting-up-angularjs-angular-seed-node-js-and-karma/
Is there any where how to setup Karma and node js to execute angular unit test cases.
Please provide me the information
You can use the Yeoman generator for an Angular.js app to generate a new project and see how it is done there. Please follow the steps under "Usage" on the GitHub page to set up the new project. (For all questions yo is asking just hit enter.) Finally, type grunt test:client. This executes Karma configured with the karma.conf.js.
In your karma config file you need to define all the js files that needs to be loaded and the order in which you specify then is important! Example:
files : [
'source/lib/angular/angular.js', // angular first
'source/lib/angular/*.js', // then any other angular files (angular-mocks.js, angular-resource.js, angular-route.js ...
'source/lib/x2js/xml2json.min.js', // some libraries I used
'source/lib/jquery/jquery.js',
'source/lib/ui-bootstrap/ui-bootstrap.js',
'source/js/*.js', // my own js code
'source/tests/unit/*.js' // unit tests
]