feat(playground): Added a small playground based on systemjs

[izifortune]

This feature enable to visualize changes of your
module without the needs to link the module to another
app.

[jvandemo]

@izifortune — This is awesome, thank you!

Would you be able to make the following changes:

• move all playground related files in the generator to src/app/templates/playground
• move all playground related files in the output library to playground

Currently, index.html and the SystemJS files are in the root of the library. It would be great if everything was in the same playground directory.

Can you also rebase on the latest version of this generator? Then we can merge your changes.

Thanks again, wonderful job!! 🏆

[izifortune]

@jvandemo I've managed to contain everything inside playground but there is a catch:

Currently lite-server will server everything from the root folder of the package, moving to have a baseDir of playground means that the node_modules and dist folder are not visible.

The only way that i've found to make this work is to use symlinks inside the playground.
Is this acceptable?

[jvandemo]

@izifortune — What if you run lite-server in the root and navigate your browser to http://localhost:3000/playground/? Would that allow playground to access node_modules?

Thanks again for your great work!

[izifortune]

Yes that will work but i'm not in a position to say which one is better. Your call 😄

[izifortune]

@jvandemo rebased, fixed the linting errors and also managed to run from the root but serving only /playground/index.html as default.

This is done in the bs-config.json using routes i've configured the main route / to be /playground.

So no symlinks but at the same time localhost:3000 will serve the index.html of the playground.

[matthewharwood]

Any update on this ?!

[jvandemo]

@izifortune — Awesome work, thank you so much! 👍 🏆

[pietromarrone]

While the library works well even exported and installed, the Playground cannot fin my dependency:
http://localhost:3000/ng2-webstorage 404 (Not Found)
How and where to configure it?

[ghost]

@pietromarrone -| I had the very same issue. If you look at the file path you are importing from it is probably missing the file extension, which we typically leave off as the loader will add it. If you notice your ng2-webstorage has no file extension. What worked for me was to add this to the systemjs.config.js

packages: {
".": {
defaultExtension: 'js'
},
app: {......

NOTE: All I added to packages: {} was ".": {defaultExtension: "js"},

After I added this, the playground would load my files. The other fix is to just add the extension yourself to the file paths in your modules. I noted that worked for me as well. As in

import { thingComponent } from './components/thing.component.js'

NOTE: It will be a .js file by the time it imports even though it may begin a '.ts' file.

I tried "playground" but only "." has worked so far.

Then I just added an NPM Link to the real package guts as mentioned above. Everything is working now for developing locally for me.

[jvandemo]

@izifortune — Would you be able to have a look at this? Thanks in advance!

[jvandemo]

Change has been implemented and released as v12.2.0.

Thank you for reporting, much appreciated! 👍