Failed to load resource: the server responded with a status of 404 (Not Found)
Unhandled Promise rejection: Failed to load app.component.html ; Zone: ; Task: Promise.then ; Value: Failed to load app.component.html undefined
I followed the steps on https://manage.auth0.com/ installed the auth0.js library and the API is working - I can retrieve API (checked on Postman) but I cannot load the site on my browser when I run it. One thing I had to change was →
In index.cshtml I had to remove (or placed an X before asp)
Loading…
Because I was getting an error :
Exception: Call to Node module failed with error: Prerendering failed because of error: TypeError: require is not a function
This is my auth.service.ts
import { Auth0Lock } from 'auth0-lock';
// src/app/auth/auth.service.ts
import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import 'rxjs/add/operator/filter';
import auth0 from 'auth0-js';
@Injectable()
export class AuthService {
auth0 = new auth0.WebAuth({
clientID: 'smlkRNkeVFWJUpu9l9w6rVf2ShJLYoNT',
domain: 'aindriu80.eu.auth0.com',
responseType: 'token id_token',
audience: 'https://aindriu80.eu.auth0.com/userinfo',
redirectUri: 'http://localhost:4200/callback',
scope: 'openid'
});
constructor(public router: Router) {}
public login(): void {
this.auth0.authorize();
}
}
This does not really seem to be related to Auth0 as such, but rather an case of your ASP.NET Core application not serving the Angular application properly. Does it actually work at all when you remove Auth0 from the equation completely?
It was working before I added it, The Auth0 API also worked but when I tried to add a logon feature I started getting the errors. I’m removing the Auth0 now but I’m getting other errors like
external “vendor_64a239d…”?aba7:1 Uncaught ReferenceError: vendor_64a239d6942c40a72cd8 is not defined
I don’t think I have all of it gone because If I put back the pre render on index.cshtml I get
An unhandled exception occurred while processing the request.
Exception: Call to Node module failed with error: Prerendering failed because of error: Error: [HMR] Hot Module Replacement is disabled.
Thing is that those errors you are getting seems to indicate that the ASP.NET Core application is not able to serve up the Angular related files properly. Which is why I am saying this does not appear to be related to Auth0 at all.
Perhaps you changed something else when you integrated Auth0 into the appliction?
Also, is there a specific reason you are mixing your Angular frontend with your ASP.NET API backend? Why not have them completely separate?
Another thing, this appears to be the Microsoft.AspNetCore.SpaTemplates templates you are using, right? Maybe asking on their GH repo may also be helpful
I just rolled back to my previous version without Auth0 and it is working fine (bar running a npm install undercore line). Problem is with Auth0. The instructions to get it working with Angular 2 are not very clear. I have to say I’m having a lot of trouble with your service.
Project is run on a .NET Core project with Angular front end and API end points.
Then I followed the instructions at: Auth0 Angular SDK Quickstarts: Login
I implemented the steps up to and including 'Checkpoint: Try calling the login method from somewhere in your application.
When I now run the website, I get the following error:
“Exception: Call to Node module failed with error: Prerendering failed because of error: TypeError: require is not a function”
![alt text][2]
I suspect that this is not an auth0 problem, but adding auth0 highlights the problem.
@aindriu80 I have remove the line. This leads onto a lot of problems starting with:
AppComponent_Host.html:1 ERROR Error: The selector “app” did not match any elements
I played around with this a bit today, but sadly I am also running into all sorts of strange issues. And once I fix one error, I get a new error. I will continue to play around with this but the prognosis is not too good at this stage.
One question however which I already asked: Is there a specific reason you cannot use a standalone Angular application (using the Angular CLI)?
This is a scenario that we know works.
Also, using server rendered Angular app is creating other issues in my mind. For one, the OAuth flow being used for Single Page applications is the Implicit Grant flow (https://auth0.com/docs/api-auth/grant/implicit) which means that the id_token and access_token will be passed in a hash fragment.
Now, if you use a server rendered Angular app, I am not sure that this will even work, since the hash fragment will not be available.
So even once we can get past some of these other issues, I am not sure how this will work, because you will be trying to use a client side authorization flow with what is in effect a server side application.
@jerrie1@aindriu80
I have decided to go down the route of a standalone Angular application using the CLI. (I was just hoping for a quick win with the starter project mentioned above)
Thanks for your help.