+
This is an advance starter project for Angular 2 apps based on AngularClass's angular2-webpack-starter and Nathan Walker's angular2-seed-advanced.
I would like to thank both for their great work and collaboration. Please refer to both projects' pages for extra documentation.
write_key
hereThe zen of multiple platforms. Chrome, Android and iPhone all running the same code. |
Programming Nirvana. Mac and Windows desktop both running the same code. |
frameworks
:
app
: your shared application architecture codecore
: foundation layer (decorators and low-level services)analytics
: analytics provided by Google Analyticsi18n
: internationalization featureselectron
: Electron specific codesample
: Just a sample module providing some components and servicestest
: test specific code providing conveniences to make testing your code easier and fastertslint
options like "no-unused-variable": true
as the api hangs off a plain Object
instead of globals iit
or ddescribe
but didn't import those or vice versa, used iit
leaving an unused it
now in your tests? yeah, tslint
will be all over you :/unused
variable warnings altogether in tests since you are always using a valid key from the shorthand Object
Advice: If your project is intended to target a single platform (i.e, web only), then angular2-webpack-starter is likely more than suitable for your needs. However if your project goals are to target multiple platforms (web, native mobile and native desktop), with powerful out of the box library support and highly configurable/flexible testing options, then you might want to keep reading.
Additionally, this seed is intended to push a couple boundaries so if you see dependencies that are bleeding edge, this is intentional.
node v5.x.x or higher and npm 3 or higher.
To run the NativeScript app:
npm install -g nativescript
git clone --depth 1 https://github.com/JonnyBGod/angular2-webpack-advance-starter.git
cd angular2-seed-advanced
# install the project's dependencies
npm install or yarn install
# start the server
npm start
# use Hot Module Replacement
npm run start:hmr
# development
npm run build:dev
# production (jit)
npm run build:prod
# AoT
npm run build:aot
npm run server:dev:hmr
npm run watch
npm run test
npm run watch:test
# this will start a test server and launch Protractor
npm run e2e
# this will test both your JIT and AoT builds
npm run ci
npm run webdriver:update
npm run webdriver:start
npm run webdriver:start
# in another terminal
npm run e2e:live
npm run docs
npm run build:docker
Mac: npm run start:desktop
Windows: npm run start:desktop:windows
Mac: npm run build:desktop:mac
Windows: npm run build:desktop:windows
Linux: npm run build:desktop:linux
All: npm run build:desktop
src/assets/i18n/
[language code].json
(copy existing one and adapt the translation strings)src/client/app.config.json
availableLanguages
src/app/frameworks/i18n/components/lang-switcher.component.spec.ts
Please Note: The seed uses Angular's ChangeDetectionStrategy.OnPush
by default which requires some understanding of immutability and one-way data flows. Please check out the following resources to learn more:
If you experience issues with changes not occuring in your views, you can disable this by commenting out these lines. The seed uses OnPush
by default because it provides optimal performance and if you decide to turn it off while developing your application, you can always turn it back on when you're ready to refactor your data services to utilize OnPush
properly.
There’s actually only a few things to keep in mind when sharing code between web/mobile. The seed does take care of quite a few of those things but here’s a brief list:
OpaqueTokens
which is a fancy name for something quite simple. Learn more here. A great example of how to integrate 2 different plugins (1 for web, 1 for {N}) and share all the code exists in this wiki article: How to integrate Firebase across all platforms written by the awesome Scott Lowe.WindowService
provided by the seed instead. This includes usage of alert
, confirm
, etc. For example:If you were thinking about doing: alert('Something happened!');
, Don't.
Instead inject WindowService
:
constructor(private win: WindowService) {}
public userAction() {
if (success) {
// do stuff
} else {
this.win.alert('Something happened!');
}
}
This ensures that when the same code is run in the {N} app, the native dialogs
module will be used.
The advice Nathan Walker's likes to give, and I fully support it, is:
Code with web mentality first. Then provide the native capability using Angular’s
{provide: SomeWebService, useClass: SomeNativeService }
during bootstrap.
There are some cases where you may want to use useValue
vs. useClass
, and other times may need to use useFactory
. Read the Angular docs here to learn more about which you may need for your use case.
NOTE: This should be done first before you start making any changes and building out your project. Not doing so will likely result in dificulty when trying to merge in upstream changes later.
npm run git.setup
- This will initialize git
as well as setup upstream
properly.git remote add origin ...your private repo...
npm run git.prepare
- This will prepare git to handle the mergenpm run git.merge
- This will fetch upstream and run the first merge (*Important)
upstream
and your first commit) added.git add .; git commit -m'ready'
. Yes, you will be committing all those conflicts, which actually are not a problem in this 1 time case.git
setup and ready to develop your application as well as merge in upstream changes in the future.npm install
(and all other usage docs in this README
apply)framework
for your application in src/app/frameworks
to build your codebase out. Say your app is called AwesomeApp
, then create awesomeapp
and start building out all your components and services in there. Create other frameworks as you see fit to organize.i18n
, remove ng2-translate
as dependency root package.json
and nativescript/package.json
. Then remove any references to i18n
throughout.npm run git:merge:preview
- This will fetch upstream
and show you how the merge would looknpm run git:merge
- This will actually do the mergeYou can read more about syncing a fork here.
If you have any suggestions to this workflow, please post here.
Configuration files live in config/
we are currently using webpack, karma, and protractor for different stages of your application.
Use config/custom/
configuration files when possible to add your custom configurations or override our configurations. This will help you when updating upstream.
The following are some things that will make AoT compile fail.
Please see the CONTRIBUTING and CODE_OF_CONDUCT files for guidelines.