I've generated angular(2) project and it generated the following index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FirstAngular</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>Loading...</app-root>
</body>
</html>
As you can see no "script" tag to include any JS bundler. I know this project use webpack but I don't see any reference to it in the index.html file.
After running the project everything works fine. I'll love if someone could tell me how this "magic" happens.
Thanks!
This index.html just acts as a template for webpack. Once you do ng serve or ng build the actual index.html will be generated and saved. If you look into the page source code in the browser, you will see the script tags are there.
Related
Hi I am new to React and recently built my app which was working fine locally but when my colleagues deployed it on the azure , we are facing this issue.
I tried looking for answers in stackoverflow itself but it was associated with changing webpack.config.js file which looks nothing like my config file which is in node_modules/react-scripts/config. So no idea how to solve it. Here is my public/index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<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"
/>
<title>Booking System</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
I have removed the default React icon from the index.html file in create-react-app, but, it is still showing up.
Here is the code of index.html file
<!DOCTYPE html>
<html lang="en" class="h-full bg-gray-50">
<head>
<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"
/>
<title>ResumeBuilder</title>
</head>
<body class="h-full">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
Folder structure of public of create-react-app:
How can I remove it?
A simple shortcut could help:
Ctrl+F5 will do a force cache purge for your page.
You should replace reactjs Icon with your website logo Icon
you can easily generate online a favicon there are many websites available like this - https://www.favicon-generator.org/
Open the above site select your site logo and generate a favicon then download the zip file and extract the zip file and copy the logo icon from the generated folder and replace it with react js default icon.
I was using the CDN release of office-js, but had to change to a local version. After this change, it seems Office.initialize is not being run, which means the add-in doesn't work correctly. On the console, I see the following error:
SCRIPT5022: MicrosoftAjax.js is not loaded successfully.
office.js (18,26767)
The only references to MicrosoftAjax.js that I can find are ASP.NET related, but my project is Typescript/React. Here's how office.js is being loaded in the html:
<!doctype html>
<html lang="en" data-framework="typescript">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>wincross-formatter</title>
</head>
<body class="ms-font-m">
<script src="/assets/office.js"></script>
<div id="container"></div>
</body>
</html>
How can I fix this error?
EDIT:
As per this page, I added the following line just above the office-js script:
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
Adding it after the office-js script gives me this error instead of the previous one, and Office.initialize still isn't being called:
SCRIPT5022: Neither the locale, en-us, provided by the host app nor the fallback locale en-us are supported.
FINAL EDIT: That was completely my fault. I didn't copy the contents of office-js/dist recursively.
I'm trying to work with an Angular app I don't know so much about. It uses TypeScript Angular 1.5. I need to be able to change the page's title. This is what I have to work with. I'm not sure how it works without ng-app specified, but it works.
Is there a way to set the title in the head dynamically? Or would I need to change the ng-controller attr to the html element? If so how could it affect the system?
<!DOCTYPE html>
<html lang="sv">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>MySajt</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/styles.css" rel="stylesheet">
</head>
<body ng-controller="AppController as vm" ng-class="{ 'v-dolj-overflow': vm.togglaScroll }">
<my-header></my-header>
<div class="v--header-offset" ui-view></div>
<script src="js/app.js"></script>
<script src="js/angular-locale_sv.js"></script>
</body>
</html>
It is not good idea to work with document or window directly. There are some better solutions.
Your own solution
If you want use plain old JavaScript you have to use at least $document or $window providers to implement it.
Reasons to use them is: AngularJS providers are testable. If you write tests for your application you can mock $document or $window. So you will be able to cover all methods and lines by unit tests.
Custom module
One of the solutions is to use some custom module. Just an example: http://ngmodules.org/modules/ngTitle. There module is not much code.
You should be able to accomplish this with document.title regardless of where the controller lives
https://developer.mozilla.org/en-US/docs/Web/API/Document/title
I'm using Yeoman and the angular-fullstack generator to bootstrap an angular app. When I do grunt serve or grunt serve:dist everything works as expected.
Now the question is, when I open the index.html file directly in the browser, isn't it supposed to work equally?
So I have a hard time understanding whats tasks grunt is executing here to make it work. Or maybe I am missing something else.
The console tells me:
GET file:///app/8d57a97f.app.css net::ERR_FILE_NOT_FOUND
GET file:///app/47ab0f3e.vendor.js net::ERR_FILE_NOT_FOUND
GET file:///app/01b9b8a8.app.js net::ERR_FILE_NOT_FOUND
The generated index.html looks something like this:
<!doctype html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<base href="/">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="app/8d57a97f.app.css"/>
</head>
<body ng-app="myApp">
<!-- some functionality... -->
<script src="app/47ab0f3e.vendor.js"></script>
<script src="app/01b9b8a8.app.js"></script>
</body>
</html>
The reason why I do this:
I try to run the angular app with phonegap on an android device. When I load it to the android mobile, the screen remains blank. So I opened it in the browser and got the same result.
So this is my first attempt to solve this issue.
The problem was the <base href="/"> in the header.
Explanation can be found here (Loading local file in browser referenced css or js).