damienbod / dotnet-template-angular Goto Github PK

i am trying to setup build for this solution (azure ad oidc). i am facing an issue where the dist folder is not getting created on build server. Do we have any specific command for prod build. i tried "build:ssr": "npm run build -- --app=ssr --output-hashing=media". But i am getting an error Unknown option: '--app'.
i even tried ng build --extract-css.
This created the below files.

chunk {main} main.js, main.js.map (main) 51.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 349 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 5.22 kB [entry] [rendered]
chunk {styles} styles.css, styles.css.map (styles) 201 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 6.69 MB [initial] [rendered]

Will this be okay to perform server side rendering or am i missing anything. as Lighthouse shows 5% performance.

In the auto login / silent renew example of this repository: https://github.com/damienbod/dotnet-template-angular/blob/master/dotnet-angular-azure-ad-oidc/ClientApp/src/app/app.component.ts

Use case:

• auto login for default route is invoked
• user redirects to a different secured page after authentication
• five minutes pass
• silent-refresh is invoked
• this.router.navigate([path]); redirects to the default route, leaving the current page.

Debug findings:

• onOidcModuleSetup() is only invoked during the initial auto-login use case.
• local storage 'redirect' only contains the initial, default route
• silent-refresh does not invoke onOidcModuleSetup() to re-write to the 'redirect' key.
• onAuthorizationResultComplete() is invoked after silent-refresh completes
• this.router.navigate([path]); redirects to the original stored route which is not the current route.

My fix:

• since navigating to the current route is ultimately ignored by the angular router code, remove the local storage of 'redirect' and redirect to unauthorized only if the result is not AuthorizationResult.authorized.

console.log quick fix:
onOidcModuleSetup() has console.log('AppComponent:onModuleSetup'); included in the else block. Might help if moved outside of the if block.

Thanks for this cool template and upgrading to the latest frameworks!

Can you kindly give any suggestions as what I might have missed as I'm getting above error after logging in with my Azure AD details.

Thanks for putting this example together. Very helpful.

I made my own version (inspired by this one), which uses the .NET backend to query the openid-configuration, etc. thus avoiding the static files with keys that could become invalid. It is here:

https://github.com/hansenms/dotnet-angular-oidc

Would you be interested in a PR to add similar functionality to this example?

Hello Damien.
Can you please implement this in SampleDataController?

    [HttpGet("[action]")]
    public IEnumerable<WeatherForecast> WeatherForecasts(int startDateIndex)
    {
        var rng = new Random();
        return Enumerable.Range(1, 5).Select(index => new WeatherForecast
        {
            DateFormatted = DateTime.Now.AddDays(index + startDateIndex).ToString("d"),
            TemperatureC = rng.Next(-20, 55),
            Summary = Summaries[rng.Next(Summaries.Length)]
        });
    }

Please also add the buttons "Previous" and "Next" on the fetch-data view.
I have come this far:
In nav-menu.componenet.html:
<div id="navbarNav" class='navbar-collapse collapse p-0' [ngClass]='{ "in": isExpanded }'>

<li class="nav-item" [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
<a [routerLink]='["/"]' class="nav-link" (click)='collapse()'>
Home


<li class="nav-item" [routerLinkActive]='["link-active"]'>
<a [routerLink]='["/counter"]' class="nav-link" (click)='collapse()'>
Counter


<li class="nav-item" [routerLinkActive]='["link-active"]'>
<a [routerLink]='["/fetch-data", {startDateIndex:"0"}]' class="nav-link" (click)='collapse()'>
Fetch data

However, I cannot figure out how to inject startDateIndex in fetch-data.component.ts. Can you give a hint about that?
import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@component({
selector: 'app-fetch-data',
templateUrl: './fetch-data.component.html',
})
export class FetchDataComponent {
public forecasts: WeatherForecast[];

constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string, @Inject('startDateIndex') startDateIndex:number) {
    http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts/'+ startDateIndex).subscribe(result => {
  this.forecasts = result;
}, error => console.error(error));

}
}

Thanks in advance, Gunnar Sireus

Hi

thank you for the great library. Unfortunately it not runs with a local ADFS 2016 in IE11. I've added ie-shim and isomorphic-fetch, but no success (in all other browsers it's running). This is the error:

My package.json:

{ "name": "dotnet_angular", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build --extract-css", "build:ssr": "npm run build -- --app=ssr --output-hashing=media", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular-devkit/build-angular": "^0.7.2", "@angular-devkit/core": "^0.7.2", "@angular/animations": "6.1.0", "@angular/common": "6.1.0", "@angular/compiler": "6.1.0", "@angular/core": "6.1.0", "@angular/forms": "6.1.0", "@angular/http": "6.1.0", "@angular/platform-browser": "6.1.0", "@angular/platform-browser-dynamic": "6.1.0", "@angular/platform-server": "6.1.0", "@angular/router": "6.1.0", "@nguniversal/module-map-ngfactory-loader": "^6.0.0", "angular-auth-oidc-client": "6.0.5", "aspnet-prerendering": "^3.0.1", "bootstrap": "^4.1.3", "classlist.js": "^1.1.20150312", "core-js": "^2.5.7", "es6-promise": "^4.2.4", "ie-shim": "^0.1.0", "isomorphic-fetch": "^2.2.1", "rxjs": "^6.2.2", "web-animations-js": "^2.3.1", "zone.js": "^0.8.26" }, "devDependencies": { "@angular/cli": "^6.1.2", "@angular/compiler-cli": "6.1.0", "@angular/language-service": "6.1.0", "@types/jasmine": "~2.8.8", "@types/jasminewd2": "~2.0.3", "@types/node": "~10.5.5", "codelyzer": "^4.4.2", "jasmine-core": "~3.1.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~2.0.5", "karma-chrome-launcher": "~2.2.0", "karma-cli": "~1.0.1", "typescript": "2.7.2", "karma-coverage-istanbul-reporter": "^2.0.1", "karma-jasmine": "~1.1.2", "karma-jasmine-html-reporter": "^1.2.0", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.11.0" } }

My polyfills.ts:
`/**

• This file includes polyfills needed by Angular and is loaded before the app.
• You can add your own extra polyfills to this file.
• This file is divided into 2 sections:
• 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
• 2. Application imports. Files imported after ZoneJS that should be loaded before your main

•  file.
  

• The current setup is for so-called "evergreen" browsers; the last versions of browsers that
• automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
• Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
• Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
  */

/***************************************************************************************************

• BROWSER POLYFILLS
  */

import 'ie-shim'; // Internet Explorer 9 support.

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
import 'core-js/es6/weak-set';

// import 'core-js/es7/symbol';
// import 'core-js/es7/object';

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run npm install --save classlist.js.

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';

/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';

/**

• Required to support Web Animations @angular/platform-browser/animations.
• Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
  **/
  import 'web-animations-js'; // Run npm install --save web-animations-js.

/***************************************************************************************************

• Zone JS is required by default for Angular itself.
  */
  import 'zone.js/dist/zone'; // Included with Angular CLI.

/** Workaround for IE11 and polyfill problem */
import 'isomorphic-fetch';

/***************************************************************************************************

• APPLICATION IMPORTS
  */
  `

And my app.module.ts:
`import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Inject, APP_INITIALIZER, PLATFORM_ID } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { isPlatformBrowser } from '@angular/common';
import { AppComponent } from './app.component';
import { NavMenuComponent } from './nav-menu/nav-menu.component';
import { HomeComponent } from './home/home.component';

import {
AuthModule,
OidcSecurityService,
OpenIDImplicitFlowConfiguration,
OidcConfigService,
AuthWellKnownEndpoints
} from 'angular-auth-oidc-client';
import { AutoLoginComponent } from './auto-login/auto-login.component';
import { routing } from './app.routes';
import { ForbiddenComponent } from './forbidden/forbidden.component';
import { UnauthorizedComponent } from './unauthorized/unauthorized.component';
import { ProtectedComponent } from './protected/protected.component';
import { AuthorizationGuard } from './authorization.guard';
import { environment } from '../environments/environment';

export function loadConfig(oidcConfigService: OidcConfigService) {
console.log('APP_INITIALIZER STARTING');
// https://login.microsoftonline.com/damienbod.onmicrosoft.com/.well-known/openid-configuration
// jwt keys: https://login.microsoftonline.com/common/discovery/keys
// Azure AD does not support CORS, so you need to download the OIDC configuration, and use these from the application.
// The jwt keys needs to be configured in the well-known-openid-configuration.json
return () => oidcConfigService.load_using_custom_stsServer('https://my.server.net/adfs/.well-known/openid-configuration');
}

@NgModule({
declarations: [
AppComponent,
NavMenuComponent,
HomeComponent,
AutoLoginComponent,
ForbiddenComponent,
UnauthorizedComponent,
ProtectedComponent
],
imports: [
BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
HttpClientModule,
AuthModule.forRoot(),
FormsModule,
routing,
],
providers: [
OidcSecurityService,
OidcConfigService,
{
provide: APP_INITIALIZER,
useFactory: loadConfig,
deps: [OidcConfigService],
multi: true
},
AuthorizationGuard
],
bootstrap: [AppComponent]
})

export class AppModule {

constructor(
@Inject(PLATFORM_ID) private platformId: Object,
private oidcSecurityService: OidcSecurityService,
private oidcConfigService: OidcConfigService,
) {
if (isPlatformBrowser(this.platformId)) {
this.oidcConfigService.onConfigurationLoaded.subscribe(() => {
console.log('Subscribe starting');
console.log(this.oidcConfigService);
console.log(this.oidcConfigService.clientConfiguration);
console.log(this.oidcConfigService.wellKnownEndpoints);

    const openIDImplicitFlowConfiguration = new OpenIDImplicitFlowConfiguration();
    openIDImplicitFlowConfiguration.stsServer = 'https://my.server.net/adfs';
    openIDImplicitFlowConfiguration.client_id = 'dc3460d7-d8a8-4a42-83ad-ae67c1fd2f1f';
    openIDImplicitFlowConfiguration.redirect_url = window.location.origin;
    openIDImplicitFlowConfiguration.post_logout_redirect_uri = window.location.origin;
    openIDImplicitFlowConfiguration.response_type = 'id_token token';
    openIDImplicitFlowConfiguration.scope = 'openid profile email ';
    openIDImplicitFlowConfiguration.trigger_authorization_result_event = true;
    openIDImplicitFlowConfiguration.start_checksession = true;
    openIDImplicitFlowConfiguration.silent_renew = true;
    openIDImplicitFlowConfiguration.silent_renew_url = '/assets/html/openid_silent_renew.html';
    openIDImplicitFlowConfiguration.silent_renew_offset_in_seconds = 10;
    openIDImplicitFlowConfiguration.post_login_route = '/mytools';
    openIDImplicitFlowConfiguration.forbidden_route = '/error/forbidden';
    openIDImplicitFlowConfiguration.unauthorized_route = '/error/unauthorized';
    openIDImplicitFlowConfiguration.auto_userinfo = false;
    openIDImplicitFlowConfiguration.log_console_warning_active = true;
    openIDImplicitFlowConfiguration.log_console_debug_active = false;
    openIDImplicitFlowConfiguration.max_id_token_iat_offset_allowed_in_seconds = 1000;     

    const authWellKnownEndpoints = new AuthWellKnownEndpoints();
    authWellKnownEndpoints.setWellKnownEndpoints(this.oidcConfigService.wellKnownEndpoints);
    this.oidcSecurityService.setupModule(openIDImplicitFlowConfiguration, authWellKnownEndpoints);
  });
}

console.log('APP STARTING');

}
}
`

Can you help me, please?

Best regards,

Stefan