Include dynamic JSON data in Angular7 app - javascript

I am using both ng serve --watch and ng build --watch. With ng build, it will use my index.html file, but with ng serve, it seems to ignore it.
Right now, I am rendering some dynamic JSON in the index.html file like so:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ApiApp</title>
<base href="<%=base%>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<script type="text/javascript">
const appData = JSON.parse('<%=json%>');
</script>
<app-root></app-root>
</body>
</html>
the above works with ng build but not ng serve, since ng serve doesn't seem to incorporate this file.
Is there a better way to send dynamic JSON to an Angular7 app when the app is first loaded? My server can render the JSON to the index.html in production, but during development with ng serve, it's not working so well.

For now I just abandoned ng-serve, and just use ng build --watch, and then use static-server (an npm CLI tool), like so:
"static-server": "cd dist/my-app && static-server --index index.html"
and my index.html looks like:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ApiApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.js"></script>
</head>
<body>
<script type="text/javascript">
define('app-data',() => {
console.log('retrieving app-data...');
let val = null;
try{
val = JSON.parse('<%=json%>')
}
catch(err){
val = {routes: [1,2,3,4,5].map(v => ({val:v}))};
}
return {
value: val
}
});
</script>
<app-root></app-root>
</body>
</html>
requirejs allows me to easily load dynamic code, haven't figured out how to do that with Angular yet.

Related

yarn deploy [ gh-pages ] : error Command failed with exit code 1

I'm trying to build my project which is working just fine with gh-pages, but I'm getting the following error when I try to use yarn deploy:
yarn deploy
yarn run v1.22.19
$ npm run build
> ji-oh--react#0.1.0 build
> react-scripts build
Creating an optimized production build...
Failed to compile.
Error: Parse Error: <script defer src=".""/static/js/main.cc97512a.js"></script><link href=".""/static/css/main.7a4eabc2.css" rel="stylesheet"></head>
<body>
<div id="root"></div>
<div id="overlay"></div>
<div id="animation"></div>
</body>
</html>
- htmlparser.js:255 HTMLParser.parse
[ji-oh--react]/[html-minifier-terser]/src/htmlparser.js:255:15
- task_queues:95 process.processTicksAndRejections
node:internal/process/task_queues:95:5
- htmlminifier.js:1282 async minify
[ji-oh--react]/[html-minifier-terser]/src/htmlminifier.js:1282:3
- htmlminifier.js:1365 async exports.minify
[ji-oh--react]/[html-minifier-terser]/src/htmlminifier.js:1365:16
error Command failed with exit code 1.
It seems like this error is being caused by something on my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://use.fontawesome.com/1ba47d38a3.js"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/regular.min.css"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<title>React App</title>
</head>
<body>
<div id="root"></div>
<div id="overlay"></div>
<div id="animation"></div>
</body>
</html>
`

Include external javascript into angular

I was trying to include external javascript and html into my angular app.
Here is the author's tutorial which works in jsfiddle
<!-- header source -->
<script src="https://www.givengine.org/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="https://www.givengine.org/components/chart-controller/chart-controller.html">
<!-- embed the browser in the web page -->
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
So I did it according for my angular app, added the script ref to index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>EpiMiner</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://localhost:40080/bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="http://localhost:40080/components/chart-controller/chart-controller.html">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.component.html
<chart-controller
title-text="A 2-minute starter of building a genome browser with GIVE"
ref="hg19"
num-of-subs="2"
coordinate='["chr18:19140000-19450000", "chr18:19140000-19450000"]'
group-id-list='["genes", "CHi-C_promoter"]'
></chart-controller>
But I got an "chart-controller is not a known element" error. Not too much experience with angular. Suggestion are appreciated. Thanks

Angular 7 add custom src for script tag

I am using angluar cli to build my app.
Currently its building the app in dist folder
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Admin</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.aa8ce79f832f8715c04d.css"></head>
<body>
<app-root>
</app-root>
<script type="text/javascript" src="runtime.d981c7f14a84cffbe02a.js"></script><script type="text/javascript" src="polyfills.c914ea4c8f6edd6e6f45.js"></script><script type="text/javascript" src="scripts.b5ea1a3cf9f89977f873.js"></script><script type="text/javascript" src="main.ebfc576e2cbf5f6d553e.js"></script></body>
</html>
I would like to customize all src path to have /app appended & look like:
<script type="text/javascript" src="/app/runtime.d981c7f14a84cffbe02a.js"></script>
Is there any way to achieve this?
You can use the deploy-url parameter when building your app
ng build --prod --deploy-url /app/
You want to prepend rather than append.
Try changing your base href value so that all relative paths start from the app folder
From:
<base href="/">
To:
<base href="./">

How to import .js file to .ts in ionic?

I have create a .js file inside my /www/js/N.js after that I include in the index.html like src="assests/js/getImage.js"> and the script is before the build/polyfills.js
After that, what should I do to get my .js file working ??
here is my source code
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<script src="assets/js/getImage.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.error('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The vendor js is generated during the build process
It contains all of the dependencies in node_modules -->
<script src="build/vendor.js"></script>
<!-- The main bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
May I know is there any import js to ts tutorial available ??
I found a lot on youtube but none of them meet my requirement. !!
Thanks in advance, please help me. Thanks !

angular doesn't load ng-admin

I'm trying to set up a simple app with angular 1.5 and ng-admin,I imported all the dependencies and done everything right but angular can't find the ng-admin module even though I have imported it
this is my html :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gestionale Clienti</title>
<link rel="icon" type="image/png" href="">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src-="utilities/ng-admin.min.js"></script>
<link rel="stylesheet" href="utilities/ng-admin.min.css">
<link rel="stylesheet" href="styles/css_compiled/base.css" />
</head>
<body ng-app="gestionale">
<div ui-view></div>
<script src="bundle.min.js"></script>
</body>
</html>
this is my javascript:
'use strict';
angular.module('gestionale',['ng-admin']);
and the error I get is : Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0/$injector/modulerr?p0=gestionale&p1=Errorogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.5.0%2Fangular.min.js%3A20%3A449)
thanks in advance,any help would be appreciated.
You have a typo
<script src-="utilities/ng-admin.min.js"></script>
should be
<script src="utilities/ng-admin.min.js"></script>
Also, ng-admin currently doesn't support Angular 1.5. Use ng-admin 0.9 it with Angular 1.3, or the master branch (future 1.0) with Angular 1.4.

Categories