fredrik-lundin

import { RouterLink } from '@angular/router/router';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <h1> Angular CI Example! </h1>
    <nav>
      <a routerLink="/red">RED</a>
      <a routerLink="/blue">BLUE</a>

fredrik-lundin

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-blue',
  template: `
    <div class="wrapper"></div>
  `,
  styles: ['div.wrapper { width: 500px; height: 500px; background-color: blue; }']
})
export class BlueComponent {}

fredrik-lundin

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-red',
  template: `
    <div class="wrapper"></div>
  `,
  styles: ['div.wrapper { width: 500px; height: 500px; background-color: red; }']
})
export class RedComponent {}

fredrik-lundin

<configuration>
    <system.webServer>
        <rewrite>
        <rules>
            <rule name="redirect all requests" stopProcessing="true">
                <match url="^(.*)$" ignoreCase="false" />
                <conditions logicalGrouping="MatchAll">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" pattern="" ignoreCase="false" />
                </conditions>
                <action type="Rewrite" url="index.html" appendQueryString="true" />