I'm studying the structure of an angular project. I saw that the index.html file is the only html code that is displayed on the page. How do I view the code related to other html pages? I thought about importing the selector for the file I want to include in the index.html file but it doesn't work for me. I tried to create this exercise that iterates through an array and checks if the first person is called Andrea. If yes, set background color to red. But nothing is displayed on the screen. That is what I wonder all the tags related to the selectors of all the components should be imported into the index.html file?
import { Component } from '#angular/core';
#Component({
selector: 'app-esercizi',
templateUrl: './esercizi.component.html',
styleUrls: ['./esercizi.component.scss']
})
export class EserciziComponent {
studente: any;
}
//ESERCIZIO 2
let studente: { id: number, name: string} [] = [
{"id": 0, "name": "Andrea"},
{"id": 1, "name": "Nicola"},
{"id": 2, "name": "Sabrina"}
]
.red-background {
background-color: red;
}
<body [ngClass]="{'red-background': studente.name=='Andrea'}">
<div *ngFor="let s of studente">
<div>{{studente.name}}</div>
<body>
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Esercizi</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>
<app-esercizi></app-esercizi>
</body>
</html>
In Angular, when we take a look to the index we can see a tag that generally is like
<my-app>loading</my-app>
//or
<app-root>loading</app-root>
Angular reemplace this tag by the different components
What is this tag?
In Angular you have in angular.json some like
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
...
"projects": {
"demo": {
"root": "",
...
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
...
"main": "src/main.ts",
}
See your src/main.ts. There you see
platformBrowserDynamic().bootstrapModule(AppModule)
It's possible you see some like
bootstrapApplication(AppComponent)
If we use platformBrowserDynamic().bootstrapModule(AppModule) we are going to where are defined the AppModule. And you see
#NgModule({
imports: [ BrowserModule, FormsModule ],
declarations: [ AppComponent, HelloComponent ],
bootstrap: [ AppComponent ]
})
That's the "bootstrap" is AppComponent
what it's the selector of the AppComponent? exact: my-app
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ]
})
Well, nobody oblige us to use these names
Related
In an extension I'm developing, I set the manifest without the popup page, so that when you click the icon of the app in the browser's toolbar it immediately opens the app's page.
The app's page is index.html and in this page I load the
<script src="background.js"></script> & <script src="./index.js"></script>
The background.js file has the following code to open the index.html page after the click:
chrome.browserAction.onClicked.addListener(function (tab) {
chrome.tabs.create(
{
active: true,
url: "index.html",
},
null
);
});
also tested with: chrome.tabs.create({ url: chrome.extension.getURL("index.html") }); , but same issue occurs.
The manifest.json file:
"background": {
"page": "index.html",
"persistent": false
},
"browser_action": {
"browser_style": true,
"default_icon": {
"16": "images/icon16.png"
}
},
When I first click the icon, it opens the index.html, ... , but the second time I click the icon it opens 2 index.html files, if I click it again then it opens 4, and so on. It's ok to open another index.html, but just one for each icon click.
What would be the mistake I'm doing?
Thanks in advance, Ken
Try this.
manifest.json
{
"name": "Test",
"version": "0.0.1",
"manifest_version": 2,
"background": {
"scripts": [
"./background.js"
]
},
"permissions": [
"tabs"
],
"browser_action": {
}
}
background.js
chrome.browserAction.onClicked.addListener((tab) => {
chrome.tabs.create({
url: chrome.runtime.getURL("./page.html")
});
});
page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>extension page</title>
</head>
<body>
<h2>Extension Page</h2>
</body>
</html>
I am completely new in this field.I apologize for any mistakes. I am working on a node js project using webpack, HTML loader. I am using dev server dependency to test in the localhost. All the models and views and the template index.html files are located in the 'src' folder. The webpack config and package json and the server.js files are located in the root directory. The webpack HTML loader is used to load index.html file in the 'dist' folder. In the 'dist' folder, there is a folder called css and inside of it style.css is located.
Everything works in the development mode and I can run the page in my localhost but problem starts when I try to run "npm run start" which actually includes "node server.js". And then when I try to access the page in the localhost then the styling of the page does not work but the interactive behavior of the page works fine. I think, the 'href' that links the css in the index.htm file is not correct.
Does anybody have idea what is wrong in my code? I have attached all the images and code that I am using.
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: ['./src/js/index.js'],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
devServer:{
contentBase: './dist'
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html'
})
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use:{
loader: 'babel-loader'
}
}
]
}
}
package.json file
{
"name": "forkify",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development",
"dev-start": "webpack-dev-server --mode development --open",
"heroku-postbuild": "webpack --mode production",
"start": "node server.js"
},
"author": "Sayeedur Rahman",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.9.0",
"#babel/preset-env": "^7.9.5",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.2.0",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.1",
"webpack-dev-server": "^3.10.3"
},
"dependencies": {
"axios": "^0.19.2",
"core-js": "^3.6.5",
"express": "^4.17.1",
"fractional": "^1.0.0",
"regenerator-runtime": "^0.13.5",
"uniqid": "^5.2.0"
},
"engines": {
"node": "12.16.1",
"npm": "6.13.4"
}
}
server.js file
const express = require('express');
const path = require('path');
const port = process.env.PORT || 8080;
const app = express();
app.use(express.static(__dirname + '/dist'));
app.get('/', (req, res) =>{
res.sendFile(path.resolve(__dirname, '/dist', 'index.html'))
});
app.listen(port);
console.log(`server started on ${port}`);
index.html file section
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:400,600,700" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<title>forkify // Search over 1,000,000 recipes</title>
</head>
I'm not sure if this works but try adding this line after your routes in the server.js file:
app.use(express.static(path.resolve(__dirname, './dist')));
Also note the dot befor /dist
If this doesn't work try changing the following line in your index.html:
<link rel="stylesheet" href="../../css/style.css">
or
<link rel="stylesheet" href="../css/style.css">
I am trying to do a Crud with MySQL + Express + ReactJS + NodeJS.
I have done the backend part and its working fine i.e. NodeJS + MySQL + Express. Now I need to embed react in it. So, I have done some code and trying to compile it using "browserify -t [ babelify --presets [ react ] ] src/App.js -o build.js" but I am getting the error as mentioned in my Question Title. Please let me know where I am doing wrong?
I have tried changing my Package.json from the online solution but still the problem exist.
Package.json
{
"name": "react-tutorial",
"version": "0.1.0",
"private": true,
"dependencies": {
"#babel-preset-react": "^7.0.0",
"#babel/core": "^7.4.4",
"#babel/preset-env": "^7.4.4",
"#babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.6",
"babelify": "^10.0.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.1",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
App.js
import React from 'react';
import ReactDOM from 'react-dom';
var App = React.createClass({
render: function() {
return <div>Something something Dark Side</div>;
}
});
ReactDOM.render(
<App />,
document.getElementById('app')
);
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
.babelrc
{
"presets": ["#babel/preset-env", "#babel/preset-react"]
}
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
I'm trying to move my React code base to ES2016, but can't get pass the simplest sample, need some help here!
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<wrapper></wrapper>
<script src="js/lib/react-with-addons.min.js"></script>
<script src="js/lib/react-dom.min.js"></script>
<script src="js/bundle.js"></script>
</body>
</html>
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './app';
ReactDOM.render(
<App/>,
document.querySelector('wrapper')
);
app.js
import React from 'react';
export default class App extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<app>something goes there</app>
)
}
};
gulpfile.js
var gulp = require('gulp'),
browserify = require('browserify'),
source = require('vinyl-source-stream'),
gutil = require('gulp-util'),
babelify = require('babelify');
gulp.task('jsx', function() {
browserify({
entries: './src/web/js/main.jsx',
extensions: ['.jsx'],
debug: true
})
.transform(babelify, {presets: ['es2015', 'react']})
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./dist/web/js/'))
});
gulp.task('default', ['jsx']);
and package.json
{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "?.git"
},
"author": "",
"license": "ISC",
"dependencies": {
"react": "^15.0.1",
"react-dom": "^15.0.1"
},
"devDependencies": {
"babel-preset-es2015": "^6.6.0",
"babel-preset-react": "^6.5.0",
"babelify": "^7.2.0",
"browserify": "^13.0.0",
"gulp": "^3.9.1",
"gulp-util": "^3.0.7",
"reactify": "^1.1.1",
"vinyl-source-stream": "^1.1.0"
}
}
Seems like it should work, but I keep getting the following two errors
warning.js:44 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
and
invariant.js:38 Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
I know it must be something stupidly simple, but just can't figure it out. Please help.
Change this
import { App } from './app';
to:
import App from './app';
I've just started to learn and use polymer and I've made all the installations and imports as in Google's Polymer website but I still can't make a single polymer element to work. These are the files:
bower.json
{
"name": "take0",
"description": "0.0",
"main": "index.html",
"moduleType": [
"amd"
],
"keywords": [
"polymer"
],
"authors": [
"Balajee"
],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"core-component-page": "Polymer/core-component-page#^0.5",
"core-elements": "Polymer/core-elements#^0.5.6",
"paper-elements": "Polymer/paper-elements#^0.5.6",
"platform": "Polymer/platform#^0.4.2",
"polymer": "Polymer/polymer#^1.3.0"
}
}
Index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>
Take 0 on polymer
</title>
<link rel"import" href="bower_components/polymer/polymer.html">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- Componenet kicks in-->
<link rel="import" href="components/component-one.html">
</head>
<body>
<component-one>
</component-one>
</body>
</html>
components/component-one.html:
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<!-- Component one-->
<dom-module id="component-one">
<style>
paper-button.fancy {
background: green;
color: yellow;
}
paper-button.fancy:hover {
background: lime;
}
</style>
<template>
<h1>{{title}}</h1>
<p>Ready to take you out with polymer!!</p>
<paper-button raised>
Click Me!!</paper-button>
</template>
</dom-module>
<script>
Polymer({
is: "component-one",
properties: {
title: {
type: String,
value: "Hello World!!!"
}
},
ready: function() {
console.log("I'm Working!!!!!")
}
});
</script>
I've spent 2 days of looking for the problem and can't find anything that solves the issue.
The problem here is that you are using Polymer 1.3.0 with elements build for the 'ancient' Polymer 0.5.
Try replacing the dependency part of your bower.json file with this one :
"dependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-elements": "PolymerElements/iron-elements#^1.0.0",
"paper-elements": "PolymerElements/paper-elements#^1.0.0",
"polymer": "Polymer/polymer#^1.3.0"
}
You can see that the core-elements library is replaced by the iron-elements.
To avoid this kind of error, I recommend you to always use the Polymer Elements Catalog to find Google elements (For example here is the paper-button page, use the recommended bower command displayed at the bottom of the menu drawer to import it).
Also, if you find an interesting element on Github or customelements.io, always check it's bower.json to be certain of which Polymer version it is based on.