inrupt / generator-solid-angular Goto Github PK

View Code? Open in Web Editor NEW

31.0 31.0 12.0 9.65 MB

Generator for Solid Angular applications

License: MIT License

JavaScript 1.60% TypeScript 12.03% HTML 83.96% CSS 2.42%

angular inrupt solid starter-kit typescript yeoman yeoman-generator

generator-solid-angular's People

Contributors

Stargazers

Watchers

Forkers

opensourcedemocracy vleput sentenza msgpo kustomzone openlinksoftware literaryprogrammer stuffolio eurekachen ms-shankar joaquinceballos florencia-cames

generator-solid-angular's Issues

Fix importing for solid-auth-client and rdflib

Might split this into two issues, but for now these are placeholder issues.

Currently, solid-auth-client cannot be cleanly imported as normal, and rdflib breaks if you try to import it, even with workarounds in place. We need to fix and clean up how these are included in the project.

Generated App has security bugs

Here is a generated repo and github says this:

We found a potential security vulnerability in one of your dependencies.
A dependency defined in package-lock.json has known security vulnerabilities and should be updated.

Only users who have been granted access to vulnerability alerts for this repository can see this message.
Learn more about vulnerability alerts

I'm updating now the generated code, but I thought I'd pass it along upstream now.

Type error in generated application

I've built an angular application as per the instructions on https://github.com/Inrupt-inc/generator-solid-angular

I'm getting an error in the browser console when I press the 'go' button:

solid-auth-client.bundle.js:15 Error logging in with WebID-OIDC
j @ solid-auth-client.bundle.js:15
async function (async)
j @ solid-auth-client.bundle.js:15
login @ solid-auth-client.bundle.js:15
(anonymous) @ solid.auth.service.ts:89
step @ rdf.service.ts:21
(anonymous) @ rdf.service.ts:21
(anonymous) @ rdf.service.ts:21
ZoneAwarePromise @ zone.js:891
push../src/app/services/solid.auth.service.ts.__awaiter @ rdf.service.ts:21
AuthService.solidLogin @ solid.auth.service.ts:88
(anonymous) @ login.component.ts:46
step @ main.js:681
(anonymous) @ main.js:662
(anonymous) @ main.js:656
ZoneAwarePromise @ zone.js:891
push../src/app/login/login.component.ts.__awaiter @ main.js:652
LoginComponent.onLogin @ login.component.ts:41
(anonymous) @ LoginComponent.html:46
handleEvent @ core.js:10251
callWithDebugContext @ core.js:11344
debugHandleEvent @ core.js:11047
dispatchEvent @ core.js:7710
(anonymous) @ core.js:8154
(anonymous) @ platform-browser.js:988
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:3811
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
solid-auth-client.bundle.js:15 TypeError: Cannot read property 'importKey' of undefined
    at e.value (solid-auth-client.bundle.js:15)
    at Function.value (solid-auth-client.bundle.js:15)
    at Function.value (solid-auth-client.bundle.js:15)
    at solid-auth-client.bundle.js:15
    at Array.map (<anonymous>)
    at Function.value (solid-auth-client.bundle.js:15)
    at e.json.then.e (solid-auth-client.bundle.js:15)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)

Any ideas?

An unhandled exception occurred: Job name "..getProjectMetadata" does not exist.

Hi,

I've just completed all the steps in your readme, but I'm getting this error at the ng serve step.

Log file:

[error] Error: Job name "..getProjectMetadata" does not exist.
    at Observable._subscribe (node_modules/@angular-devkit/core/src/experimental/jobs/simple-scheduler.js:350:23)
    at Observable._trySubscribe (node_modules/@angular-devkit/core/node_modules/rxjs/internal/Observable.js:44:25)
    at Observable.subscribe (node_modules/@angular-devkit/core/node_modules/rxjs/internal/Observable.js:30:22)
    at node_modules/@angular-devkit/core/node_modules/rxjs/internal/util/subscribeTo.js:22:31
    at Object.subscribeToResult (node_modules/@angular-devkit/core/node_modules/rxjs/internal/util/subscribeToResult.js:10:45)
    at SwitchMapSubscriber._innerSub (node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/switchMap.js:65:54)
    at SwitchMapSubscriber._next (node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/switchMap.js:55:14)
    at SwitchMapSubscriber.Subscriber.next (node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:66:18)
    at SwitchMapSubscriber.notifyNext (node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/switchMap.js:86:26)
    at InnerSubscriber._next (node_modules/@angular-devkit/core/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
    at InnerSubscriber.Subscriber.next (node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:66:18)
    at node_modules/@angular-devkit/core/node_modules/rxjs/internal/util/subscribeTo.js:17:28
    at Object.subscribeToResult (/node_modules/@angular-devkit/core/node_modules/rxjs/internal/util/subscribeToResult.js:10:45)
    at SwitchMapSubscriber._innerSub (node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/switchMap.js:65:54)
    at SwitchMapSubscriber._next node_modules/@angular-devkit/core/node_modules/rxjs/internal/operators/switchMap.js:55:14)
    at SwitchMapSubscriber.Subscriber.next (node_modules/@angular-devkit/core/node_modules/rxjs/internal/Subscriber.js:66:18)%

Refactor login popup

Currently the login popup is injected in the app component, due to angular's build stripping out the script tag. We need to remove this and either host the file statically somewhere, wrap it in angular component to remove the script tag dependency, or build a new popup login with more basic functionality.

Unit Tests Fail

I tried to run npm test on the profile app that comes with the generator. The Karma UI has a debug button which I clicked and all the tests failed.

Phone number and Email can't add new items

Phone and Email fields don't work unless there's already a value in the pod. Once a value is added via the pod home page, they can be updated normally.

ng e2e Bug

Hello,
I´m working on a solid app based on this structure and I´m having some problems with the e2e tests.

In order to try to solve the error I deployed this small app from zero and tried to run the e2e tests, in this case I didn´t create any but I was expecting some error like empty tests or everything passed. But it raised this (you can skip the trace I´ve found the error):

 throw er; // Unhandled 'error' event
      ^

Error: write EPIPE
    at ChildProcess.target._send (internal/child_process.js:750:20)
    at ChildProcess.target.send (internal/child_process.js:634:19)
    at Observable.rxjs_1.Observable.obs [as _subscribe] (C:\Users\Pedro\Desktop\ASW\Testing\dechat_en2a\testingApp\node_modules\@angular-devkit\build-angular\src\utils\run-modul
e-as-observable-fork.js:57:23)
    at Observable._trySubscribe (C:\Users\Pedro\Desktop\ASW\Testing\dechat_en2a\testingApp\node_modules\rxjs\internal\Observable.js:44:25)
    at Observable.subscribe (C:\Users\Pedro\Desktop\ASW\Testing\dechat_en2a\testingApp\node_modules\rxjs\internal\Observable.js:30:22)
    at C:\Users\Pedro\Desktop\ASW\Testing\dechat_en2a\testingApp\node_modules\rxjs\internal\util\subscribeTo.js:22:31
    at Object.subscribeToResult (C:\Users\Pedro\Desktop\ASW\Testing\dechat_en2a\testingApp\node_modules\rxjs\internal\util\subscribeToResult.js:10:45)
    at MergeMapSubscriber._innerSub (C:\Users\Pedro\Desktop\ASW\Testing\dechat_en2a\testingApp\node_modules\rxjs\internal\operators\mergeMap.js:82:29)
    at MergeMapSubscriber._tryNext (C:\Users\Pedro\Desktop\ASW\Testing\dechat_en2a\testingApp\node_modules\rxjs\internal\operators\mergeMap.js:76:14)
    at MergeMapSubscriber._next (C:\Users\Pedro\Desktop\ASW\Testing\dechat_en2a\testingApp\node_modules\rxjs\internal\operators\mergeMap.js:59:18)
    at MergeMapSubscriber.Subscriber.next (C:\Users\Pedro\Desktop\ASW\Testing\dechat_en2a\testingApp\node_modules\rxjs\internal\Subscriber.js:67:18)
    at MergeMapSubscriber.notifyNext (C:\Users\Pedro\Desktop\ASW\Testing\dechat_en2a\testingApp\node_modules\rxjs\internal\operators\mergeMap.js:92:26)
    at InnerSubscriber._next (C:\Users\Pedro\Desktop\ASW\Testing\dechat_en2a\testingApp\node_modules\rxjs\internal\InnerSubscriber.js:28:21)
    at InnerSubscriber.Subscriber.next (C:\Users\Pedro\Desktop\ASW\Testing\dechat_en2a\testingApp\node_modules\rxjs\internal\Subscriber.js:67:18)
    at C:\Users\Pedro\Desktop\ASW\Testing\dechat_en2a\testingApp\node_modules\rxjs\internal\util\subscribeToPromise.js:7:24
    at process._tickCallback (internal/process/next_tick.js:68:7)
Emitted 'error' event at:
    at process.nextTick (internal/child_process.js:754:39)
    at process._tickCallback (internal/process/next_tick.js:61:11)

If you upgrade angular, the error trace will be more verbose.
Command : ng update @angular/cli @angular/core.

Now, it will show something like this:

ERROR in src/app/services/solid.auth.service.ts(37,5): error TS2322: Type 'Observable<{}>' is not assignable to type 'Observable<SolidSession>'.
  Type '{}' is missing the following properties from type 'SolidSession': accessToken, clientId, idToken, sessionKey, webId

To make it possible to run the test I just deleted the session type of solid.auth.service.ts

//code without modification
export class AuthService {
  session: Observable<SolidSession>;
  ...

Now you can run the tests, build etc. without any problem.

CORS Error

I was able to get around #3 with ng serve --host 0.0.0.0 --disableHostCheck true

Now I get:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://solid.community/.well-known/openid-configuration. (Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://localhost:4200’).

Loading Solid-Auth

13:58:20.372 localhost/:1 Failed to load https://solid.community/.well-known/openid-configuration: The 'Access-Control-Allow-Origin' header has a value 'https://localhost:4200' that is not equal to the supplied origin. Origin 'http://localhost:4200' is therefore not allowed access. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I assume I need to either change the header or get a cert, but shouldn't localhost be an exception?

Generator not working

Hi,

I am trying to create the sample Solid Angular application on my local machine, but the generator is not working. These are the steps I have followed:

npm install -g @angular/cli
npm install -g yo
npm install -g @inrupt/generator-solid-angular

This step yo @inrupt/solid-angular produces the following output:

Error @inrupt/solid-angular 

You don’t seem to have a generator with the name “@inrupt/solid-angular” installed.
But help is on the way:

You can see available generators via npm search yeoman-generator or via http://yeoman.io/generators/. 
Install them with npm install generator-@inrupt/solid-angular.

To see all your installed generators run yo without any arguments. Adding the --help option will also show subgenerators. 

If yo cannot find the generator, run yo doctor to troubleshoot your system.

Any help getting set up would be appreciated!

Registration Page is just a stub

Currently the registration page is just a blank UI that doesn't do anything. The plan is to build this out into a real registration workflow. Listed as an enhancement.

Upgrade to Angular 7

Since angular 7 is out, we should stay relevant and up to date.

Refactor how forms are generated and instead map to RDF

Right now we're manually mapping an RDF namednode to an input in the profile form. This is easy to get started and easy to follow, but not flexible and not how we want to do things moving forward.

A proposal from another developer was to dynamically generate the form instead, using RDF properties. More info coming...

Cannot find namespace '$rdf'

I went through the steps described on the readme.md and when I ran 'ng serve'

I was getting the following errors:

ERROR in src/app/services/rdf.service.ts(33,12): error TS2503: Cannot find namespace '$rdf'.
src/app/services/rdf.service.ts(41,18): error TS2503: Cannot find namespace '$rdf'.
src/app/services/rdf.service.ts(323,58): error TS2503: Cannot find namespace '$rdf'.

I checked the file src/app/services/rdf.service.ts
and the following line was commented out:
import * as $rdf from 'rdflib'

I uncommented it and the project built and I was able to load the page.

@james-martin-jd - is there a reason why that line needed to commented out?
I saw that you recently commented it out to fix an "issue where rdflib was throwing errors"
1c91ae7#diff-dca975bf5ad72321f0990d8416fddab0

Build and preview the production-ready app

Tried both npm run serve:dist and ng serve:dist and got errors.

routing components

hello i tried to use this generator and its working well but realised that the app-routing.module.ts that other angular projects have is missing. Is there any way to route components without using this file? Because I tried to just add it and it didnt work.
Thank you in advance

Feature Request: support Schematics

Hi, I'm the author of the Schematics library.

Reading https://solid.inrupt.com/docs/writing-solid-apps-with-angular, I see that you guys are using this yeoman generator for creating an Angular CLI project. I think this would fit better if you're using Schematics, as it is the backend for scaffolding and workflow in Angular CLI. As such, it is very easy to integrate with the Angular CLI (both generate and new commands).

I tried to find a point of contact for Inrupt to reach if you guys need support, but looking at this yeoman generator it wouldn't take much time to setup.

You can reach me at [email protected] with any questions or support.

Cheers!

Unable to save profile

I'm unable to update my profile via the app:

Steps to reproduce :

Generate the angular project
Serve it
Login
Get to the Profile page & edit profile properties
Click "Save"
Console logs: Error: Error: Missing IRI for NamedNode card.component.ts:68:8

Updating my profile via the solid.community/profile/card#me page works fine, and data is then properly read in the angular app.

Reproduced on: Chromium 69 + Firefox 62

Global Angular differs

Your global Angular CLI version (6.2.3) is greater than your local
version (6.0.8). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

Inrupt provider link points at wrong URL

Will update shortly to point to new URL