I got an Angular2 project that was developed by a different person and I need to run it. When I do, using npm start I get the server to run but the component, called my-app is not rendering on the page.
This is the index.html:
<html>
<head>
<base href='/'>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<my-app>Loading......</my-app>
</body>
</html>
This is app.components.ts:
import { Component } from '#angular/core';
import { AuthenticationService } from './authentication.service';
import { Router } from '#angular/router';
#Component({
selector: 'my-app',
templateUrl: 'app/app.component.html',
styleUrls: ['app/app.component.css']
})
export class AppComponent {
title = '';
isProd:boolean;
constructor(private authenticationService: AuthenticationService, private router: Router) {
this.isProd = false;
}
In the template for my-app, which is app/app.component.html I put a simple div for testing:
<div><h1>app components</h1></div>
When running this I can see the Loading..... which is in index.html but not the contents of app/app.component.html.
What am I missing?
I can't see if you are loading angular and your transpiled ts anywhere in index.html. You need to load all required dependeny for run angular2 app in index.html and allso your transpiled ts.
Note:- you need to put base tag after all you link to load css.
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="c3.css" rel="stylesheet" type="text/css">
<base href='/'>
Related
I am using handlebars template in express and node. But seems like it cannot apply style in my template
here is my directory:
my template
<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>RYZE Report</title>
<link rel="stylesheet" href="./css/style.css" >
</head>
<body>
<h1>Hello hi</h1>
</body>
</html>
and in my app.js, I have this line
app.use(express.static(__dirname + '/public'))
Thank you
I have looked at the code and I made a couple of improvements to make this work, instead of compiling the document without any inputs, I have made a css input as the following in the template.hbs:
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
{{css}}
</style>
<title>Hello, world!</title>
I have also edited the app.js to read the css along with the html and embed the css into it like so: app.js:
const template = fs.readFileSync('template.hbs', 'utf8');
const css = fs.readFileSync('./public/css/style.css', 'utf-8');
const DOC = Handlebars.compile(template);
and used the DOC as following:
DOC({css})
this will inline the css inside of the hbs file, I hope this answers your question
I want to use middleware func to serve static file,but the problem is that my css file is not linking with html file using node and express
error is:
Refused to apply style from 'http://localhost:4000/static/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
app.js:
const express=require('express');
const path=require('path');
const app=express();
app.use('/public',express.static(path.join(__dirname,'static')));
app.get('/',(req,res)=>{
res.sendFile(path.join(__dirname,'static','index.html'));
});
app.listen(3000);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="/static/css/style.css">
</head>
<body>
<div class="asd">
Hi xyz here..
</div>
<script src="/static/js/script.js"></script>
</body>
</html>
folder structure is:
static
css
main.css
js
script.js
index.html
app.js
I tried a lot , but i am not able to find the error,
please help!!
Thanks!!
We will have to do something like that:
app.js
const express=require('express');
const path=require('path');
const app=express();
app.use('/public', express.static(path.join(__dirname,'./static')));
app.get('/',(req,res)=>{
res.sendFile(path.join(__dirname,'static','index.html'));
});
app.listen(3000, () => {
console.log("Starting at", 3000);
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="/public/js/main.js"></script>
<link rel="stylesheet" href="/public/css/style.css">
</head>
<body>
<div class="asd">
Hi xyz here..
</div>
<script src="/public/js/script.js"></script>
</body>
</html>
Here is the screenshot:
A basic thumbs rule we can think of:
app.use('<something_here>', express.static(path.join(__dirname,'./static')));
<link rel="stylesheet" href="<something_here>/css/style.css">
<link rel="stylesheet" href="<something_here>/css/style.css">
You don't need to add '/' in the path:
<link rel="stylesheet" type="text/css" href="css/style.css">
Also, you should make a change in your app file:
app.use(express.static(__dirname + '/static'));
This way express knows from where it has to serve the static files.
You are serving the static folder at /public endpoint. So you should change the link to
<link rel="stylesheet" type="text/css" href="/public/css/style.css">
and
<script src="/public/js/script.js"></script>
Also check the name of the css file.
I recently took a course on back-end web developing.
As the title says, I don't get how can I use a header partial for the whole website but have different titles for each page. (because is included in the tag)
Is there any trick?
1st) In your Express route:
app.get("/", function(req, res){
res.locals.title = "Abel's Home Page"; // THIS LINE IS KEY
res.render("home.ejs");
});
2nd) In your views/home.ejs file:
<% include partials/header.ejs %>
3rd) In your views/partials/header.ejs file:
<!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">
<title><%= title %></title> <!-- THIS LINE IS KEY -->
<link rel="stylesheet" href="../style.css">
<link rel="shortcut icon" href="../logo_sm.png" type="image/x-icon">
</head>
<body>
Each page that includes the partial is free to pass data to said partial through parameters. See here for an example.
I hosted a MERN app which uses webpack on heroku. React Routing works fine on local host. But on heroku, when I click refresh on /any-path page is blanked out.
Console shows an error "The character encoding of the plain text document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the file needs to be declared in the transfer protocol or file needs to use a byte order mark as an encoding signature."
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Raven</title>
<link rel="icon" type="image/png" href="/assets/img/logo.png">
<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="/js/app.js"></script></body>
</html>
index.js
import React from 'react';
import { render } from 'react-dom';
import {Bootstrap, Grid, Row, Col} from 'react-bootstrap';
import {
BrowserRouter as Router,
Route,
Link,
Switch
} from 'react-router-dom'
import App from './components/App/App';
import NotFound from './components/App/NotFound';
import Home from './components/Home/Home';
import './styles/styles.scss';
render((
<Router>
<App>
<Switch>
<Route exact path="/" component={App}/>
<Route exact path="/login" component={Home}/>
<Route component={NotFound}/>
</Switch>
</App>
</Router>
), document.getElementById('app'));
server.js
app.use(express.static(path.resolve(__dirname, '../dist')));
app.get('*', function (req, res) {
res.sendFile(path.resolve(__dirname, '../dist/index.html'));
res.end();
});
I am trying to learn angular 2, I am learning from the official website 5 min quick start https://angular.io/guide/quickstart
When I do npm start I get only loading... being displayed in the browser
I am using typescript 1.8
node 4.4.7
npm 2.15.8
using windows
has you can see from the above picture that it is not going to the app.component.ts file
import { bootstrap } from '#angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
my main.ts file
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
my index.html file
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }
my app.component.ts file
The rest of the files are the same has given in the tutorial all config files.