I am trying to show/hide a development page from most of people.
I changed the index.html like:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<app-wrapper></app-wrapper>
</body>
</html>
And AppModule like:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
And wrapper component as:
import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment';
@Component({
selector: 'app-wrapper',
template: `
<div *ngIf="isPasswordCorrect; else passwordPrompt">
<app-root></app-root>
</div>
<ng-template #passwordPrompt>
<button (click)="checkPassword()">Enter Password</button>
</ng-template>
`
})
export class WrapperComponent implements OnInit {
isPasswordCorrect = false;
constructor(private cdr: ChangeDetectorRef) {}
ngOnInit(): void {
console.log('Environment:', environment.environmentName);
if (environment.environmentName === 'dev') {
const correctPassword = 'your-password-here';
const storedPassword = localStorage.getItem('sitePassword');
console.log('Stored Password:', storedPassword);
console.log('Correct Password:', correctPassword);
if (storedPassword === correctPassword) {
this.isPasswordCorrect = true;
this.cdr.detectChanges(); // Trigger change detection
}
} else {
this.isPasswordCorrect = true;
this.cdr.detectChanges(); // Trigger change detection
}
}
checkPassword(): void {
const correctPassword = 'your-password-here';
let password = prompt('Please enter the password to access this site:');
if (password === correctPassword) {
localStorage.setItem('sitePassword', password);
this.isPasswordCorrect = true;
this.cdr.detectChanges(); // Trigger change detection
} else {
alert('Incorrect password. The page will reload.');
window.location.reload(); // Reload the page
}
}
}
import { AppComponent } from './app.component';
import { WrapperComponent } from './wrapper/wrapper.component';
@NgModule({
declarations: [
AppComponent,
WrapperComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [WrapperComponent]
})
export class AppModule { }
even when it was true the app-root was not shown, but I could be able to see it's components tree using the Angular Development tools. Does anyone have any solution for it?
So the end requirement is:
I know about it, is more to not list it on Google or other web search
Instead of hiding the content, which already happens, since web crawlers generally are designed for reading static content, some do read dynamic content, but not easily, meaning not everything gets indexed.
First we create a text file called, robots.txt inside the src folder of your project. Then we paste the below content inside it, which will prevent search engines from indexing it.
User-agent: *
Disallow: /
Then add this to the assets array of angular.json.
"assets": [
...
"src/assets",
"src/robots.txt",
...
],
Then for additional safety, we can add the meta tag for preventing indexing.
<!DOCTYPE html>
<html lang="en">
<head>
<title>My app</title>
<meta charset="UTF-8" />
<meta name="robots" content="noindex">
<base href="/">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>