Deployed website doesn't display in Internet explorer - node.js

I have deployed an app into IIS. It is node.js and angular app,deployed using iisnode. The deployed works as expected inside google chrome but not inside Internet explorer.
When I inspect using debug element I found the following issues. Do I need run angular PROd, specific to Internet explorer?
Here is the screenshot of the errors I get inside Internet explorer.
My current version of angular-cli is 7.3.9

By default, Angular is not supporting IE. In order to enable the support, you need to modify src\polyfills.ts file.
In this file look for /** IE9, IE10 and IE11 require all of the following polyfills. **/ and uncomment all the imports.
In addition to that, you need to enable import classlist.js
If classlist.js is not present then execute the command
npm install --save classlist.js

You need to modify the polyfill.ts to make Angular app supported in IE. Please open the polyfill.ts file and read the annotation, uncomment the import lines needed in IE. Then install some packages with npm:
npm install --save classlist.js
npm install --save web-animations-js
For further information, you could refer to this article.
If you have uncommented imports and it still doesn't work, you could try to add meta tag in the index.html: <meta http-equiv="X-UA-Compatible" content="IE=edge" />.

Related

Problems with webpack build, using angular-cli

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

Ionic 2 Resources | Third Party Libraries

I want a code highlighter for my ionic v2 (rc4) project. I tried prismjs .
As said in Ionic 2 Resources | Third Party Libraries , I did the following steps:
npm install prismjs --save
npm install #types/prismjs --save
then add import 'prismjs'; in my typescript file & In declarations.d.ts declare module '*'; already is there.
in html
<pre><code class="language-javascript">var data = 1;</code></pre>
but its not working. Am I missing something? Please help me.
As far as I know, the css will not get included that way.
Can you try to copy the css of the prismjs library into your assets folder and include it in your index.html?

Angular2 with Semantic UI not working

I am using Angular2 with Nodejs. I have a list of employees each contains employee name, address, rank etc. I want to show information when user hovers mouse on the employee name. For that I am trying using semantic-ui with angular2 but I can't find any example other than (below link) which isn't descriptive.
https://github.com/vladotesanovic/ngSemantic
Nodejs:
npm install ng-semantic --save
npm install jquery --save
Index.html
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">
TestSemantic.ts
import {NgSemanticModule} from 'ng-semantic';
TestSemantic.html
<sm-button class="icon" sm-popup="Add users to your feed"><i class="add icon"></i></sm-button>
First it shows me 2 semantic errors which are:
node_modules/ng-semantic/ng-semantic/input/input.d.ts(2,29), error TS2307: Cannot find module '#angular/forms'.
node_modules/ng-semantic/ng-semantic/search/search.d.ts(2,29): error TS2307: Cannot find module '#angular/forms'.
Only button is showing on TestSemantic.html but there is no pop-up displays
Note sure if this is still relevant, but did you install angular's forms module? ngSemantic depends on it as it extends form controls.
So check in package.json and node_modules if you have #angular/forms.
Based on the code in ngSemantic it should install #angular/forms automatically but it's worth checking.
If you remove temporarily the ngSemantic import but instead use
import #angular/forms just to test that the import work at least for your code (apart for ngSemantic).
I note also that the error is in a d.ts file which is a typing definition file.
If you use webpack you should be able to recompile the bundled js from the dependencies inside node_modules
I am using ngSemantic with angular 2 with no problem.

Meteor leaderboard app on node-webkit

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?

Generation of svg on server side using highcharts

I did require('jsdom') in node js but i constantly get jsdom module not found.
More over i want to generate a svg document using highcharts on the server so that i can later on use that image in my pdf( I will convert that svg to image using batik).
Is there a link that may help me with this.
I have read through the http://blog.davidpadbury.com/2010/10/03/using-nodejs-to-render-js-charts-on-server/
but the prototype didnt make much sense. Is there a module which has been implemented rather than just a prototype.
You need to install all the required modules first. First download the tar file from his github https://github.com/davidpadbury/node-highcharts. Go to the directory where you saved the file and hit
npm install davidpadbury-node-highcharts-576f763.tar.gz
if you need to install additional modules like jsdom, try
npm install jsdom
His prototype seem to work fine with older version of highchart. but i am having some problem using it with latest highchart.
I hope this helped

Resources