I created one simple angular application.
Webpack compiled successfully. localhost:4200 opened my application. Cool.
To host it on firebase, I tried to install firebase#4.2.0 and angularfire2#4.0.0-rc.1 but I got a self signed certificate error since I'm behind my org firewall.
After this, my app stopped working and I don't see any error on browser too. It just doesn't load. How do I debug this? Not just this app, my other angular apps also stopped working. I even tried creating a new app and it doesn't load as well. All of them compile successfully when I run ng serve command.
My main.ts file:
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);
My index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SampleApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app component:
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
I guess that some libraries were corrupted after firebase installation attempt and need to be reinstalled/repaired.
Please suggest how to get to the root cause and fix it.
Related
I am trying to route directly to the html file using express.js, getting an unknown error, being new to express.js, I couldn't get how to resolve this one:-
here is the js code :-
const express = require('express');
const path = require();
const app = express();
const port=process.env.PORT || 8000;
// public static path
const static_path = path.join(__dirname,"../public");
app.use(express.static(static_path));
app.get("",(req,res)=>{
res.send("welcome to this main page");
})
app.get("/about",(req,res)=>{
res.send("welcome to this about page");
})
app.get("/weather",(req,res)=>{
res.send("welcome to this weather page");
})
app.get("*",(req,res)=>{
res.send("404 Error page oops");
})
app.listen(port,()=>{
console.log(`listening to the port ${port}`);
})
static web page:-
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Weather App</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>Welcome to the static web</h1>
</body>
</html>
getting this error:-
internal/validators.js:124
throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
^
TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received undefined
ok, I was using "type nul > filename" command for creating new files in attached folders. When I used directly the VSCode feature of creating files, it's working fine now,... don't know why, but I think that old command might have expired, tell me if I am wrong, but I just solved my issue...
I want to use a NodeJs Module on the browser. I read, that I can do this with http://browserify.org/.
Concret I want to use this NodeJs Module: https://github.com/ovvn/dom-to-pdf
So I create a bundle.js form this like explained here: http://browserify.org/
You can see my bundle in my github repo: https://github.com/astridx/dom-to-pdf/blob/javascriptexport_browserify/bundle.js
But now I do not know how to go on. I created an example: https://github.com/astridx/dom-to-pdf/blob/javascriptexport_browserify/example/index.html
<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./../bundle.js"></script>
</head>
<body>
<div id="test">TODO write content</div>
<script>
var domToPdf = require('dom-to-pdf');
var element = document.getElementById('test');
var options = {
filename: 'test.pdf'
};
domToPdf(element, options, function () {
console.log('done');
});
</script>
</body>
</html>
But I do not know how to change the line var domToPdf = require('dom-to-pdf');
Can someone give me a hint?
Try using import instead, but you might need babel for that to work properly.
e.g import domToPdf from 'dom-to-pdf';
I have a static html page which intercept authorization message, I'd like to expose this on the domain. It looks like so:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>JwtAuthDemo - Facebook Auth</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="assets/util.js"></script>
</head>
<body>
<script>
// if we don't receive an access token then login failed and/or the user has not connected properly
var accessToken = getParameterByName("access_token");
var message = {};
if (accessToken) {
message.status = true;
message.accessToken = accessToken;
}
else
{
message.status = false;
message.error = getParameterByName("error");
message.errorDescription = getParameterByName("error_description");
}
window.opener.postMessage(JSON.stringify(message), "http://localhost:5000");
</script>
</body>
</html>
If I place this page next to the index.html page it is not exposed, however when I place it inside the assets folder it can be access. I'm guessing I have to explicitly expose the page in one of the json config files however I'm not to sure how to do so?
I'd prefer not to have my redirect url be www.mydomain.com/assets/oauth-response-parser.html. I'd like to keep this in my application seeing as it's part of the application.
How can I expose a static html page from Ionic as a sibling to the index.html page ?
You can automatically get files to your assets directory by specifying that you want to run a custom script during your ionic builds.
In your package.json you'd have a 'config' section where you can specify this script:
...
"config": {
"ionic_copy": "./config/customCopy.config.js"
},
...
and then your customCopy.config.js would contain an entry to copy over your html into assets:
module.exports = {
copyAssets: {
src: ['{{SRC}}/assets/**/*'],
dest: '{{WWW}}/assets'
}
}
More info on this process at the ionic app scripts page
I hope this steers you in the right direction.
I need to implement the Slient-Renew Token using oidc-client or redux-oidc - npm node module.
I'm using Identity Server Version 3.0 and Javascript ReactJs Client UI Application (Webpack Version 2).
I'm having a simple Javascript application download from github, the Slient Renew HTML file is
<!DOCTYPE html>
<html>
<head>
<title>Silent Renew</title>
<meta charset="utf-8" />
</head>
<body>
<script src="./oidc-client.js"></script>
<script>
new Oidc.UserManager().signinSilentCallback();
</script>
</body>
</html>
Currently I created a Route
<Route exact path='/SilentRenew' component={SilentRenew} />
The Component code is
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import UserManager from 'oidc-client';
/**
* <p>.</p>
* #extends Component
*/
class SilentRenew extends React.Component {
constructor(props) {
super(props);
alert('Hai');
const userManager = UserManager();
userManager.signinSilentCallback();
}
render() {
return (
<div>Silent Renew</div>
);
}
}
export default SilentRenew;
I'm getting error
Kindly assist me how to call the signinSilentCallback method.
I'd put the code
const userManager = UserManager();
userManager.signinSilentCallback();
inside componentDidMount() instead of constructor().
Check React Component lifecycle methods...
I'm going to make GUI scraper with Electron & Nightmare.
However when I use just plain html/js as described in Electron quickstart, all works well.
But I'd like to make Electron app nicely by using Anugular2(angular-cli webpack).
I created project ng new Scraper then made some routes for components e.g. HomeComponent, SettingsComponent.
I installed nightmare in angular project folder by npm install --save nightmare
and I would like import it in SettingsComponent like:
import {Nightmare} from 'nightmare';
and use it like:
ngOnInit{
this.nightmare = new Nightmare({
show: true,
electronPath: require('node_modules/electron')
})
}
What have I tryied:
in index.html including
<script src="node_modules/nightmare/lib/nightmare.js"></script>
then in my component
declare var Nightmare: any;
ngOnInit(){
this.nightmare = new Nightmare({})
Gettings errors about missing other js files inside node_modules/nightmare/lib/*.js
CODE:
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Scrape</title>
<base href="/">
<link rel="stylesheet" href="assets/semantic.min.css">
<script src="assets/require.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
component:
import { Component, OnInit } from '#angular/core';
declare var require: any;
var Nightmare = require('nightmare');
#Component({
selector: 'app-work',
templateUrl: './work.component.html',
styleUrls: ['./work.component.css']
})
export class WorkComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
error:
Failed to compile.
./~/nightmare/lib/nightmare.js
Module not found: Error: Can't resolve 'child_process' in 'C:\Users\admin\Desktop\Scrape\node_modules\nightmare\lib'
# ./~/nightmare/lib/nightmare.js 18:11-35
# ./src/app/work/work.component.ts
# ./src/app/app.module.ts
# ./src/main.ts
# multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts
It is possible to interact with Angular2/Nightmare inside Electron App?