I created sample angular app and want to get directed to another page using browser url http://localhost:1800/demo.
index.html
<!doctype html>
<html lang="en">
<head>
<title>Sample Angular app</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<app-root></app-root>
<router-outlet></router-outlet>
</body>
</html>
Following is the home page (app.component.ts) having code
import { Component } from '#angular/core';
#Component ({
selector: 'app-root',
template: `<div class="sample-class">Sample text to test this sample angular app</div>`,
styles: [] }) export class AppComponent {
title = "Sample title"; };
Following is app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { DemoComponent } from './demo/demo.component';
const routes: Routes = [
//{ path: '', redirectTo: '/login' }
{ path: 'demo', component: DemoComponent }
]
#NgModule ({
imports: [RouterModule.forRoot(routes)]
})
export class AppRoutingModule{};
I defined demo.component.ts as
import { Component } from '#angular/core';
#Component ({
selector: 'demo',
template: `<div>Demo page</div>`,
styles: []
})
export class DemoComponent {};
and its corresponding module as
import { NgModule } from '#angular/core';
import { DemoComponent } from './demo.component';
#NgModule ({
declarations: [DemoComponent],
exports: [DemoComponent],
bootstrap: [DemoComponent]
})
export class DemoModule {};
app.component.html
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{title}}!
</h1>
<img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://angular.io/cli">CLI Documentation</a></h2>
</li>
<li>
<h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
</li>
</ul>
<router-outlet>
</router-outlet>
When try to get http://localhost:1800/demo, its the same home page which is shown and no redirection happens. There is no error shown as well. Please help me to fix this issue.
Export RouterModule in your AppRoutingModule.
exports: [RouterModule]
Without exporting Angular was not able to find out your routing configuration.
Related
I created a test react component library (React, Typescript) and am trying to use Rollup to package it up into UMD to I can import the component into an HTML page.
The sample component I created just takes a label prop and colors it orange. Something super simple so complex logic would be taken out of the equation.
React code to render the above text:
import * as React from 'react';
import * as Test from 'react-webpack-demo';
function App() {
return (
<div>
<h1>
{
React.createElement(Test.Brand, { label: 'Brand Label Text'})
}
</h1>
</div>
);
}
export default App;
The above component was packaged via Rollup into CJS format to be imported. I have also attempted to package the same content into UMD so it can be imported into HTML. The full rollup.config.js file is below:
import resolve from '#rollup/plugin-node-resolve';
import commonjs from '#rollup/plugin-commonjs';
import typescript from '#rollup/plugin-typescript';
import external from 'rollup-plugin-peer-deps-external';
import packageJson from './package.json';
export default [
{
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true
},
{
file: packageJson.module,
format: 'umd',
name: 'Test',
sourcemap: true
}
],
plugins: [
resolve(),
babel({
exclude: 'node_modules/**',
presets: [
'#babel/preset-react',
'#babel/preset-typescript'
]
}),
external(),
commonjs(),
typescript({ tsconfig: './tsconfig.json' })
],
external: [
...Object.keys(packageJson.dependencies || {}),
...Object.keys(packageJson.peerDependencies || {})
]
}
]
I then attempt to import the newly packaged UMD file into my HTML page and render it into a DOM element as such:
<html lang="en-US">
<head>
<title>Test</title>
<meta charset="utf-8" />
<script src="./react-webpack-demo/dist/umd/index.js" crossorigin></script>
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<h1>Testing rollup in plain HTML</h1>
<hr />
<div id='brand-test'></div>
<script>
const el = React.createElement;
const domContainer = document.getElementById('brand-test');
ReactDOM.render(el(
Test.Brand,
{
label: 'Demo works!'
}
), domContainer);
</script>
</body>
</html>
But I get the following error:
The above error occurred in the component:
Brand#file:///Users/jacorbello/repos/temp/react-webpack-demo/dist/umd/index.js:33:1
Uncaught TypeError: React__namespace.createElement is not a function
Brand Brand.tsx:8
React 17
test.html:20 Brand.tsx:8:11
Any help would be greatly appreciated here.
Thanks in advance for your time!
Seems like the script tag is in incorrect order. Your library needs React to be imported before it's script can be executed.
Just fix the order to get it working
<script src="https://unpkg.com/react#17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js" crossorigin></script>
<script src="./react-webpack-demo/dist/umd/index.js" crossorigin></script>
I'm trying to make a webpage, with angular, and make a header with component. For making the files i'm using the ng g c commons/header that make the html,scss,ts and .spec.ts files, and modify the app.module.ts file like this:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { HeaderComponent } from './commons/header/header.component';
import { FooterComponent } from './commons/footer/footer.component';
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
NgbModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
but, when i'm put it in the index.html file, the component html doesen't show up.
<!DOCTYPE html>
<head>
<title>TEST</title>
<meta name="keywords"
content="" />
<meta name="description" content="" />
<meta name="author" content="Szabó Boldizsár">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<link href="styles.scss" rel="stylesheet" type="text/scss">
</head>
<body>
<app-header></app-header>
<app-footer></app-footer>
</body>
</html>
the generic files(what the console command made) is still the same, i didn't modifyd it.
What can be the wrong? I'm using even bootswatch.
In Angular index.html file have only app-root tag like this:
<body>
<app-root></app-root>
</body>
just put your header & footer in app.component.html file, which is parent component wrapper of all components in your application.
<div class="wrapper">
<app-header></app-header>
<router-outlet></router-outlet>
<app-footer></app-footer>
</div>
It isn't how Angular works : you can't just render your components into a .html file.
As a SPA (Single Page Application), your content is rendered into a container (app-root by default).
It advice you to follow the official Angular tutorial to understand how components are rendered into the application.
You have to put the selectors of the header and footer component in the template of the AppComponent instead of putting it in Index.html .
AppComponent is your bootstrap component , as you can see in the #NgModule metadata property .
You can think of the components mentioned in the bootstrap array as the starting point of you angular application . So any other angular components has to be inside those Base components in order to show up.
And also please refer to the official angular tutorial.
I have a main.js file
main.js
import React from 'react';
import { Meteor } from 'meteor/meteor';
import { render } from 'react-dom';
import { renderRoutes } from '../imports/startup/client/routes.jsx'
Meteor.startup(() => {
render(renderRoutes(), document.getElementById('target'));
});
and an index.html file which contains the divider "target"
index.html
<head>
<body>
<div id="target" />
</body>
</head>
How can I remove the HTML file and render it on the main.js file as I need it for react-helmet.
I started learning react by writhing this simple code. but it shows me different output in the browser I mean my previous example. I refresh it many times but noting has changed. I write code in visual studio code.
I write this code as App.js
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
header: "Header from state...",
content: "Content from state..."
}
}
render() {
return (
<div>
<h1>{this.state.header}</h1>
<h2>{this.state.content}</h2>
</div>
);
}
}
export default App;
and this as main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));
This will produce the following result.
this as index.html
<!DOCTYPE html>
<html lang = "en">
<head>
<link rel="shortcut icon" href="">
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app">
</div>
<script src="build/bundle.js"></script>
</body>
</html>
I am trying to create an angular application.
When the index.html page is loaded 2 links login and register are displayed.
When either login or register is clicked the entire view is replaced by the corresponding view.
1. Register/Login links should stay at the top and the corresponding view should be displayed below after clicking on them.
2. After successful authentication in login controller, The complete view including the login and register link should be replaced with menu-auth.html view.
I have tried using the below code, but still the 2 links disappear and login/register views appear.
Also after the http Post is fired in login controller, the menu-auth.html is displayed but appropriate css is not displayd, so I am not able to click the menu links.
I guess the menu-auth.html view is not placed in the view of index.html
index.html
<!doctype html>
<html>
<head>
<script src = "js/angular.min.js"></script>
<script src = "js/angular-ui-router.min.js"></script>
<script src = "app/app.js"></script>
<script src = "controller/login.js"></script>
<script src = "controller/register.js"></script>
<script src = "app/config.js"></script>
<style>.active { color: red; font-weight: bold; }</style>
</head>
<body>
<div ng-app="app">
<ui-view>
</ui-view>
</div>
</div>
</body>
</html>
I have two views
menu-unauth.html
<a ui-sref="login" ui-sref-active="active">Login</a>
<a ui-sref="register" ui-sref-active="active">Register</a>
<ui-view="unauth"></ui-view>
menu-auth.html
<a ui-sref=".nentry" ui-sref-active="active">Create Entry</a></br>
<a ui-sref=".ventry" ui-sref-active="active">View entry</a></br>
<a ui-sref=".logout" ui-sref-active="active">Logout</a></br>
<ui-view="auth"></ui-view>
config.js
app.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('unauth', {
url:'',
templateUrl: 'view/menu-unauth.html'
})
.state('unauth.login', {
url:'/login',
templateUrl: 'view/login.html',
controller: 'login'
})
.state('unauth.register', {
url:'/register',
templateUrl: 'view/register.html',
controller:'register'
})
.state('auth', {
url:'/menu',
templateUrl: 'view/menu-auth.html'
})
}]);
app.js
var app = angular.module("app", ['ui.router','ngCookies']);
login.js (Controller)
app.controller('login', function($scope,$http,$cookieStore,$state){
$scope.login=function(){
$scope.credentials={
UserName:$scope.email,
Password:$scope.password
};
$http({
method: 'POST',
url: 'test.com/sess',
data: $scope.credentials
}).then(function(response) {
$state.go('auth');
}
}
});
I made the following changes to (observe the ui-sref value changed to contain . dot)
menu-unauth.html
<a ui-sref=".login" ui-sref-active="active">Login</a>
<a ui-sref=".register" ui-sref-active="active">Register</a>
<ui-view></ui-view>
config.js
app.config(['$stateProvider', function($stateProvider) {
$stateProvider
.state('unauth', {
url:'',
templateUrl: 'view/menu-unauth.html'
})
.state('unauth.login', {
url:'/login',
templateUrl: 'view/login.html'
})
.state('unauth.register', {
url:'/register',
templateUrl: 'view/register.html'
})
}]);