I have a requirement to display different screens in my Angular application based on the URL pasted by the user in the browser:
- http://localhost/screen1 (should show screen1)
- http://localhost/screen2 (should show screen2)
To achieve this, I have set up two components - Screen1Component and Screen2Component for the respective paths.
In `screen1.component.ts`:
import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
@Component({
selector: 'app-screen1',
templateUrl: './screen1.component.html',
styleUrls: ['./screen1.component.css']
})
export class Screen1Component implements OnInit {
constructor() {
}
ngOnInit() {
}
}
In `screen2.component.ts`:
import {Component, OnInit} from '@angular/core';
import {Router} from '@angular/router';
@Component({
selector: 'app-screen2',
templateUrl: './screen2.component.html',
styleUrls: ['./screen2.component.css']
})
export class Screen2Component implements OnInit {
constructor() {
}
ngOnInit() {
}
}
To make these modules children of the base route, I defined them as follows in `routing.module.ts`:
import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {Screen1Component} from './screen1/screen1.component';
import {Screen2Component} from './screen2/screen2.component';
const appRoutes: Routes = [
{
path: '',
children: [
{
path: 'screen1',
component: Screen1Component
},
{
path: 'screen2',
component: Screen2Component
}
]
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
Additionally, here's how I configured my main.ts:
import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {Screen1Component} from './screen1/screen1.component';
import {Screen2Component} from './screen2/screen2.component';
const appRoutes: Routes = [
{
path: '',
children: [
{
path: 'screen1',
component: Screen1Component
},
{
path: 'screen2',
component: Screen2Component
}
]
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
Furthermore, my `app.component.ts` looks like this:
import {Component} from '@angular/core';
import {Screen1Component} from './screen1/screen1.component';
import {Screen2Component} from './screen2/screen2.component';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}
As for `app.module.ts`:
import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {Screen1Component} from './screen1/screen1.component';
import {Screen2Component} from './screen2/screen2.component';
import {routing} from './routing.module';
@NgModule({
declarations: [AppComponent, Screen1Component, Screen2Component],
imports: [BrowserModule, routing],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
The content of `app.component.html` is:
<h1>{{title}}</h1>
<router-outlet></router-outlet>
For `index.html`:
<!doctype html>
<html lang="en>
<head>
<meta charset="utf-8">
<title>Tryout</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
While I am able to successfully deep link to the components when running `npm start` with `ng serve -o`, after creating a production build using `ng build --prod`, directly accessing URLs like http://localhost/ loads the application but hitting http://localhost/screen1 or http://localhost/screen2 results in a 404 error.
I have tried deploying the generated files to an Nginx server with no success. Any assistance on resolving this issue would be highly appreciated.