ngx-rocket/generator-ngx-rocket

:rocket: Extensible Angular 14+ enterprise-grade project generator

generator-ngx-rocket's Issues

Support the starter-kit via the dotnet new command ?

With the release of VS2017 comes a new update for .Net Core. This update will bring a better experience for the dotnet new command to scaffold new projects, including support for custom templates.

Do you think that would be useful to have a template for the starter-kit?

• This post explains the new experience with dotnet new
• This post explains how to create a custom template
• The code for the template engine used by dotnet new is available here.

Contributing

Hi,
I wanted to look a bit at the generator... and maybe help... But I can't find how to start with it.
How is your environment?
How do you test the generator itself?

In the README.md of this repo, we can learn how to use the generator. But not how to develop/contribut.
Could you write somehting about it please?

Thank you

Improve typescript rules

Should we force typing in all/some cases?

What could be improved over default rules? What would benefit from being enforced?

Publish new npm package

...and tag the "old" generator-ngx-app as moved under npm.

Add ionic authentication templates and navigation guard

Add authentication templates and make authentication/guard working with Ionic

Related to #5

Port SK web template to angular-2

Use angular-cli as a start for the tooling,
Then port the web template using:

• Angular 2 (obviously)
• Bootstrap 4
• Font Awesome
• Same responsive design (or close enough)

Add the mobile specific app configuration and base templates

Add the Ionic/mobile specific app configuration (onReady...) and base templates (no authentication, will be done in another task)

Related to #5

New home and renaming the project

Because we have awesome upcoming features for this project (like #33) and to allow us to associate the forthcoming family of tools (cli, addon generators, etc...) with a unique, distinct name we created a new home: 🚀 ngX-Rocket

As part of this effort, we also renamed the generator name and NPM package to generator-ngx-rocket. Why? The ngx prefix alone, along with the starter kit were too generic to distinguish ourself and what we are doing from the crowded space of Angular project starters, so we went for a new naming to give our effort a distinct identity.

We aim to be more open than ever, build a community around the project and hope to gather development effort around customized starter kits in reusable addons generators instead.

HTML minification (angular-cli addon)

Once angular-cli reach 1.0, one of its upcoming features is addon support.

With this we should be able to add HTML minification by adding html-minify-loader to the webpack build process.

Update to latest bootstrap/ng-bootstrap version

Port mobile template to NG2

In a separate branch, port SK mobile template to Angular 2, using Ionic v2 instead of Bootstrap v4/Font Awesome.

Warning: the build system should still be using angular-cli, not the ionic-cli. The project template/structure should be compatible with the web template (as it should be interchangeable later).

Here are the list of tasks I have in mind, feel free to suggest changes:

• Create the feature branch with generator questions
• Add the Ionic/mobile specific app configuration (onReady...) and base templates (no auth)
• Add authentication templates and make authentication/guard working with Ionic
• Detect device locale/language on startup and setup i18n accordingly using cordova-plugin-globalization
• Create npm scripts for: cordova passthrough (like for angular-cli), prepare, build, run... with Android + iOS support
• Improve the templates with common/recommended plugins: cordova-plugin-splashscreen, cordova-plugin-device, cordova-plugin-whitelist etc
• Add service worker/PWA support => will be in a separate update/issue
• Add generator questions (or use by default?) + configuration for Crosswalk (legacy devices) and WKWebView
• Add platform choice (Android, iOS, ...) with generator questions
• Add cordova usage guide

Add doc to explain HTML5 routing

In light of #23, Add doc to explain HTML5 routing and explain potential server issues with some hints on how to resolve it (url rewriting).
If possible, also provide typical common server configs (express...)

Add authentication screens/workflow

Since most of the apps we'll create will use an authentication method method with eventually a login/logout screen, it could be interesting to provide the ground for this in this SK.

I imagine it would take the form of an additional auth component, with a dedicated overridable service with a mock implementation to start with, ability to save credentials for returning users and an auth guard redirecting to the login screen if the user is not authenticated.

Seems pretty "standard" to me, but do not hesitate to complete or discuss this approach if needed.

Base libraries

Hi,
I'm carefully watching this repo because good practices are there & sharded ;)

I would like to give my thought about the embedded libraries... (hope I can :p)
I feel that a pro starter kit should have:

• as less dependency as possible
• guides to help users on how to use the kit and how to make it working it with libs

For example, you are using Font Awesome just to add few icons in menu / header... maybe we should be able to set these icons from outside of these components. And provide a guide on how to embed Font Awesome.

You are also selecting Bootstrap, I feel that it's a too "strong" choice :). So it can be an example... but not part of the starter kit.

I would like to see more something like: angular/flex-layout

//let's speak// :)

Make a yeoman generator from the SK

Cannot extract translated strings from variables

translations:extract cannot extract translated strings from variables
(#10).

From the discussion there, the solution would be to fork the repo and make the correction ourselves, then propose a PR.

CLI and composition with other possible addons generators

Once #6 is done, a welcome suggestion (thanks @R0muald) was to provide a way to compose the base SK generator with any other "addon" generators.

One way could be to investigate yeoman's composability features or maybe create a custom CLI to simply wraps the generators setup/install/running.

The basic idea is to gather in a simple way for the user the ability to mix the SK with addon generator, something like:

$ ngx new myAwesomeProject --addons="myCompanyUiLibrary someBackendGenerator"

or even maybe

 # performs `npm install` + register addons with ngx cli
$ ngx addon install myCompanyUiLibrary someBackendGenerator
# registered addons will be used by default
$ ngx new myAwesomeProject

Yeoman also support generating a project from multiple generators, so we should also consider this.

Remaining tasks

• Extract generator code in a separate package
• Add template prefix to allow merging json files
• Refactor base generator to use core
• Create an example addon generator
• Create CLI
• Create generator for making addons
• Add documentation
• Create new issues for blueprints support...

Proposal: add IDE-specific configuration

This should come after the yeoman generator is done, but we could provide opt-in IDE/code editors configuration, like:

• Jetbrains' IDE (webstorm, intellij...)
• Visual Studio Code
• any ideas?

As far a the target IDE supports it, we could add code-style/formatting settings as well as tool/run configuration pre-bound to the npm tasks.

What do you think?

Allow update of existing projects

To simplify update process for existing generated project, if a previous config is found it should be used to replay automatically the generator and allow updating from a newer generator version.

A warning should also be issued to warn the user of uncommited changes, to prevent issues.

Broken jasmine typings

Seems that the new 2.5.46 version of @types/jasmine is broken due to this commit DefinitelyTyped/DefinitelyTyped@ba29010.

In the meantime for the fix, the version will be fixed to the previous working one.

Create github page for the project

As the issue on the website was lost, I'll recap here the remaining task for the website:

Tasks:

• Add open graph meta tags
• Add addons page to list available addons on NPMs, filtered by a static json blacklist
• Add form (google forms?) to submit person/companies using the project
• Add blog tab that redirects to ngx rocket
• Use hashbang routing instead of HTML5 mode to fix F5 issues (to be replaced later by a proper NodeJS server acting as a reverse proxy?)

---

Old issue description:

• Setup a Jekyll template for github pages deployment
• Write some promotion/communication stuff about the goals and benefits

For the design, use these for inspiration: http://fountainjs.io, https://github.com/CloudCannon/cause-jekyll-template, https://github.com/CloudCannon/hydra-jekyll-template

The idea would be to have a nice 1-page website with scroll hooks and links to github/npm etc.

Add/update dev documentation

Keep the same doc format as for SK v1

• coding guides
• tasks
• proxy
• multiple env
• etc

Add htmlhint

Improve test examples

• Add proper unit tests for components as examples
• Add simple e2e tests example (see https://github.com/angular-starter-kit/starter-kit)

Warning on build

There is currently this warning on build, due to a change in the angular-cli webpack config:

WARNING in ./~/encoding/lib/iconv-loader.js
9:12-34 Critical dependency: the request of a dependency is an expression

This is due to the @biesbjerg/ng2-translate-po-loader package, and we have no means of correction as for now.

The only way would be to move from .po translations files to plan .json files, and would probably be related to #3

Improve package version integration

Fix inclusion of whole package.json file in bundle, create script/plugin to extract it on build time

erreur sur la commande npm install

j'a l'erreur suivante quand je lance la commande npm install :

ERROR in ./src/app/core/i18n.service.ts Module build failed: Error: C:/Users/Thales/Documents/GitHub/ngx-starter-kit/src /app/core/i18n.service.ts (3,10): Module '"C:/Users/Thales/Documents/GitHub/ngx- starter-kit/node_modules/@types/lodash/index"' has no exported member 'includes' .) at _checkDiagnostics (C:\Users\Thales\Documents\GitHub\ngx-starter-kit\node_ modules\@ngtools\webpack\src\loader.js:145:15) at C:\Users\Thales\Documents\GitHub\ngx-starter-kit\node_modules\@ngtools\we bpack\src\loader.js:172:17 @ ./src/app/app.component.ts 22:0-50 @ ./src/app/app.module.ts @ ./src/main.ts @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts

j'ai l'impression que la dernière version de lodash fout le bordel. Quand je force la version en virant le "^" sur @types/lodash dans le package.json (ligne 43) ça marche.

Add project changelog

The <template> element is deprecated

Seems like ngx-app is using the old <template> tag which was deprecated recently in favour of ng-template

Reproducing:

• npm install -g yo generator-ngx-app && yo ngx-app
• open the localhost:4200
• open console
• refresh to get a new set of warnings (it shows after the [App] init from the logger.service.ts

Window service wrapper

Should we add a window service wrapper into Angular DI system (to allow mocking in unit tests)?

I tried a quick implementation using a custom provider with injecting directly the window value into the core module, but it did not work, need to investigate...

Is it just me or is URLSearchParams() being ignored by the HttpService?

So: This is a raw angular2.4 plunkr I found laying about: https://plnkr.co/edit/TTsy3IsY8t0hmo8Z0LaA?p=preview

The same cannot be done using this application (I failed to create a plunkr with the generator-ngx-app);

let search: URLSearchParams = new URLSearchParams();

Object.keys(data).forEach((key: string) => {
    search.set(key, data[key]);
});
console.log(search)
let options: RequestOptions = new RequestOptions({search});

this.http.get(<string>_endpoint, options)

This will make the HTTP call but ignore all the URLSearchParams that are inside options

htmlhint fails to find its config on Windows

Init project seed with angular-cli

The base project seed should include:

• Tooling (angular-cli at the moment)
• Quickstart doc (env install and dev start)
• Tasks to run serve / build / unit tests / e2e tests (npm tasks or plain angular-cli commands)
• Multiple env management (dev / prod at least in the seed)

Hightlight the value proposition of the starter-kit

I think the current documentation currently lacks explaining the value proposition of the starter-kit compared to going straight with the anguar-cli. In the README, we currently have:

Web project starter kit including modern tools and workflow based on angular-cli, best practices from the community, a scalable base template and a good learning base.
Benefits

• Quickstart a project in seconds and focus on features, not on frameworks or tools
• Industrial-grade tools, ready for usage in a continuous integration environment and DevOps
• Scalable architecture with base app template including example components, services and tests

I think it would be a nice addition to clearly explain the advantages of bootstraping a new projet from the starter-kit instead of the angular-cli. Back to the Angular 1.x world, because there was no cli so everyone was looking for a starter-kit to speed up their development. Now that the angular-cli is out, I think we should explain why using a starter-kit still makes a lot of sense.

Ideas?

New logo for ngx-rocket

After the project renaming, we are looking for a new and nice logo to illustrate the ngX-Rocket ecosystem!

Here is a (bad) draft I thought up quickly:

A cleaner version:

Another shot based on some of @gaetanmaisse ideas:

More refined, thinner font:

A few more tries, adding a ionic-like electron and with material blue or angular red + black like @gaetanmaisse:

I you have better ideas and design skills, feel free to propose 🎨 !

Image assets optimization (angular-cli addon)

Once angular-cli reach 1.0, one of its upcoming features is addon support.

With this we should be able to support images assets optimization by adding imagemin loader to the webpack build process.

An alternative solution based on imagemin-cli can also be investigated.

Add preliminary i18n support

https://github.com/ocombe/ng2-translate can be used in the meantime, while a complete solution based on .po files is available.

If already working, https://angular.io/docs/ts/latest/cookbook/i18n.html should be used instead (with .po or json files).

Add stylelint

Assets hosting

Dummy issue to host assets for GH presentation 😄

Add yarn option instead of npm

yarn is an alternative to NPM, with (almost) only benefits:

• faster, with better caching support
• more dev-friendly (use yarn test:ci instead of npm run test:ci with no silly noise
• lock dependencies by default (like shrinkwrap)

It would be nice to add a generator option to use yarn instead of npm, while keeping npm as the default as it needs to extra package to install.

Tasks:

• Update @ngx-rocket/core to add --packageManager option
• Update @ngx-rocket/core core docs
• Support overriding default package manager throughNGX_PACKAGE_MANAGER env variable
• Update generator-ngx-rocket to use specified package manager
  • update package.json scripts and other templates if applicable
  • update console output
• Adapt updating, proxy and cordova guides in consequence
• Add a yarn test case to CI
• Update addons to use specified package manager
• Update @ngx-rocket/scripts to use specified package manager, either through the .yo-rc file or NGX_PACKAGE_MANAGER env var
• Update CLI to use specified package manager, either through the .yo-rc file or NGX_PACKAGE_MANAGER env var
• Update generator-ngx-rocket-addon
• Add warning for cordova projects
• Add documentation on generator option

Upgrade to angular-cli latest beta

The latest angular-cli update introduced some breaking changes, causing regressions for the extended lint system. We have to take care of that, in the meanwhile I created and issue: angular/angular-cli#4344

Improve i18n workflow

Use the "official" tools as explained here: https://angular.io/docs/ts/latest/cookbook/i18n.html

• Update templates to be i18n ready
• Provide example for 2 languages (en/fr)
• Setup task to extract/import translations files

Note that it was planned at some point that .po format should be supported, which does not seems to be the case at the moment.

Create an Http service extension

Provide support for server configuration depending of the environment, default headers and user-configurable cache policy.

Should go in core module.

Integrate stylelint plugin for browsers features linting

As of stylelint/stylelint#2123, the no-unsupported-browser-features rule of stylelint is deprecated and will be removed in the upcoming 8.x version. This triggers a deprecation warning during the lint command as for now.

As per their recommendation, if no one took the job in the meantime, we should extract the current code for this rule into a separate stylelint plugin to fill the hole and remove the warning.

Update to Angular 4 and cli 1.0 final

Improve folder structure for large app

Looking into the app structure, I'm wondering how the app will scale on large apps. Mostly around the organization and creation of new components.
As I like to see apps in general, some components are state-full (home page, about page for example) and some other are state-less (a nav bar component).
Looking at the way the app is made, all pages components are at the /app root folder, where the header component is in the /app/shared folder.
would that make more sense if we could have a better separation between components? like:

|- app/                      app components
|  |- container/          container components
|  |  |- home/
|  |  |- home/
|  |- shared/                shared module  (common components, directives and pipes)
|  |  |- header/
|  |  |- nav/
|  |- app.component.*        app root component (shell)
|  |- app.module.ts          app root module definition
|  |- app-routing.module.ts  app routes

In that case, let say I want to add some redux state manager in my app, I will be able to add a redux folder aside with container and shared (maybe core as well, not sure I get why it's separated from the shared folder..). This way, I get a clear view of area of code I'm dealing with without having to find my /shared or /redux folder with the rest of the app...

It's definitively more an open discussion than anything else but I wanted to get a bit of your input and understand if you had some issue when scaling the app regarding to the app structure.

Uncaught (in promise): Error: No provider for ConnectionBackend!

trying to use generated HttpService but getting error
Uncaught (in promise): Error: No provider for ConnectionBackend!

Create a customizable cache service

Provides support for various cache policies (in-memory, local storage...) for the Http service.

Use hints from SK1 and adapt it to angular 2.

Page title is not translated

What about AOT?

Hi,
as far as I can see AOT support is not included by default? Any chance to see it in next release?