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.
Related
I'm trying to override the primary color in Bootstrap but it just doesn't work. Btw I'm using NextJS.
This is my "globals.scss" which I have imported in "_app.js".
$primary: black;
#import 'bootstrap/scss/bootstrap';
And I have imported Bootstrap in index.js like this
import 'bootstrap/dist/css/bootstrap.css'
I tried looking it up but everything I tried didn't work.
What I've tried:
Importing functions, variables, and mixins from Bootstrap SCSS.
Rearranging the imports.
Importing bootstrap/scss/bootstrap.scss to "_app.js"
But I've noticed that in the inspector it says my primary color is black but then right above it changes back to the original:
Below:
Above:
How to override Bootstrap variables in a Next.js project
Let's create an app and try to change the $primary color from default to black.
App structure:
Code:
index.js
import Head from 'next/head'
import styles from '../styles/Home.module.css'
export default function Home() {
return (
<div className={styles.container}>
<Head>
<title>Create Next App</title>
<meta name='description' content='Generated by create next app' />
<link rel='icon' href='/favicon.ico' />
</Head>
<main className={styles.main}>
<h1 className={styles.title}>
Welcome to <a href='https://nextjs.org'>Next.js!</a>
</h1>
<button type='button' className='btn btn-primary mt-4'>Primary</button>
</main>
</div>
)
}
_app.js
import '../styles/globals.css'
import { useEffect } from 'react'
function MyApp({ Component, pageProps }) {
useEffect(() => {
require('bootstrap/dist/js/bootstrap.bundle.min.js');
}, []);
return <Component {...pageProps} />
}
export default MyApp
globals.scss
$primary: black;
#import '../node_modules/bootstrap/scss/bootstrap';
Screenshot:
I think the problem of your codes is about the order of importing files. If you use globals.scss file to change bootstrap default values, Then you must import that file after your main bootstrap file. I'm not sure about the project structure you have, but for example if you imported Bootstrap in index.js file, change that file from just this:
import 'bootstrap/dist/css/bootstrap.css'
To something like this:
import 'bootstrap/dist/css/bootstrap.css'
import 'your/path/to/globals.scss'
Maybe that overrides the bootstrap file with your custom file.
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.
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>
The thing that works for me is that I get a button with the html code. But the button isn't styled so it's a plain button without any css characteristics.
Down is the code that should be relevant to primeNg.
So my problem is that primeNg isn't styling my components.
edit: Once trying to re run the application I get the error: InvalidConfigError... ensure the file is valid JSON Which is the Style section.
index.html
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
.angular-cli.json
"styles":{
"styles.css",
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css"
}
app.component.html
<button pButton type="button" class="ui-button-warning"></button>
app.component.ts
import {ButtonModule} from 'primeng/primeng';
app.module.ts
import { ButtonModule } from 'primeng/primeng';
imports: [
ButtonModule
]
Im starting coding reactjs and im confusing how html5 work on reactjs. Do we need to build a separate html5 sheet or code html5 direct into jsx sheet?
React is component based java-script lib. so on your html code just link jsx by main.js code structure. your xml code build and make application in the extension of JSX like App.jsx . Refer here to build react app
index.html
This is just regular HTML. We are setting div id = "app" as a root element for our app and adding index.js script which is our bundled app file.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
</head>
<body>
<div id = "app"></div>
<script src = "index.js"></script>
</body>
</html>
App.jsx
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
Hello World!!!
</div>
);
}
}
export default App;
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));