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.
Related
I have a very simple react program that imports react using a script command and a cdn.
How do I covert it to preact while keeping the same structure?
I tried to follow these instruction, but they weren't very clear
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://unpkg.com/react#15/dist/react.js"> </script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div id='root'></div>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
ReactDOM.render(<T title='welcome'/>,document.getElementById('root'))
</script>
</body>
</html>
As per this github issue you have a couple of different options for using Preact with a script tag. You can directly call h- Preact's version of React.createElement or you can use babel standalone to transform your JSX as you were in your original React example. Here is a Preact conversion of your original example.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/preact/7.2.0/preact.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.js"></script>
</head>
<body>
<div id='root'></div>
<!-- option 1: alias it -->
<script>window.React = { createElement: preact.h }</script>
<script type="text/babel">
function T(props){
return <h1>{props.title}</h1>
}
preact.render(<T title="Welcome" />, document.getElementById('root'));
</script>
</body>
</html>
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 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='/'>
I'm starting to use Angular Material and a problem occur: I have this simple page, built with Angular Material, with a NavBar but it doesn't appear, and I don't know why.
This is my page:
<html lang="it">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Angular Material style sheet -->
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css">
</head>
<body ng-app="MyApp" ng-cloak>
<!-- NavBar -->
<div ng-controller="AppCtrl" ng-cloak="" class="navBardemoBasicUsage" ng-app="MyApp">
<md-content class="md-padding">
<md-nav-bar md-selected-nav-item="currentNavItem" nav-bar-aria-label="navigation links">
<md-nav-item md-nav-click="goto('page1')" name="page1">Page One</md-nav-item>
<md-nav-item md-nav-click="goto('page2')" name="page2">Page Two</md-nav-item>
<md-nav-item md-nav-click="goto('page3')" name="page3">Page Three</md-nav-item>
</md-nav-bar>
<span>{{currentNavItem}}</span>
</md-content>
</div>
<!-- End NavBar -->
<!-- Angular Material requires Angular.js Libraries -->
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<!-- Your application bootstrap -->
<script type="text/javascript">
(function() {
'use strict';
angular.module('MyApp',['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.controller('AppCtrl', AppCtrl);
function AppCtrl($scope) {
$scope.currentNavItem = 'page1';
}
})();
angular.module('MyApp', ['ngMaterial']);
</script>
</body>
The result is a blank page.
Thanks for help!
There are many things you did wrong in this code. First use ng-app at only in body tag. You also tried to use it in div element so remove that.
You defined MyApp two times in your javascript so remove the last definition.
Remove material.svgAssetsCache import since it is not avaliable. and try to use the below code for in your angular javascript file.
angular.module('MyApp',['ngMaterial', 'ngMessages'])
.controller('AppCtrl', function($scope) {
$scope.currentNavItem = 'page1';
});
I have developed single page application using Angular 2, node , express. It is running fine on chrome and firefox. but same is now working on IE 11. Used following code
Giving error to System in script tag. SCRIPT5009: 'System' is undefined
<html class="ng-scope">
<head>
<base href="/"/>
<title>Test application</title>
<!-- 1. Load libraries -->
<script src="libs/angular2/bundles/angular2-polyfills.js"></script>
<script src="libs/systemjs/dist/system.src.js"></script>
<script src="libs/rxjs/bundles/Rx.js"></script>
<script src="libs/angular2/bundles/angular2.dev.js"></script>
<script src="libs/angular2/bundles/router.dev.js"></script>
<script src="libs/angular2/bundles/http.dev.js"></script>
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/bootstrap')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
<!-- End wrapper-->
<script src="js/jquery/jquery-2.1.1.min.js"></script>
<script src="js/plugins/jquery-ui/jquery-ui.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
</body>
</html>
thanks in advance.
Finally I got the solution using following link.
I have added two javascript reference es6-shim.min.js and shims_for_IE.js
<script src="libs/es6-shim/es6-shim.min.js"></script>
<script src="libs/systemjs/dist/system-polyfills.js"></script>
<script src="libs/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
https://github.com/angular/angular/issues/7144
Note : In this reference libs = node_modules
Try adding
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.1/es6-shim.js"></script>
as first script library