jvitor83/angular-pwa-seed

Multiplatform Angular project (Web/PWA, Mobile and Desktop) with Ionic (and optionally Bootstrap) - Sample: https://angular-pwa-seed.netlify.com

angular-pwa-seed's Issues

Server side technologies

Are you using MEAN stack for the server side? If not, what do I need to get familiar with to code the backend that you are using in your seed project?

Thanks

Error cloning the project

I am trying cloning the project by running the following:
PS D:\angular-pwa-seed> git clone https://github.com/jvitor83/angular-pwa-seed.git AngIonic1
Cloning into 'AngIonic1'...
fatal: unable to access 'https://github.com/jvitor83/angular-pwa-seed.git/': error setting certificate verify locations:
CAfile: C:/Program Files/Git/mingw64/libexec/ssl/certs/ca-bundle.crt

CRUD Samples

Can provide a `ion-content` demo ?

Found this greet git repo when try to fix ionic + angular cli + url hashing + angular router. Routing works ok, but found could not using ion-content.

ion-content + ion-nav seems combined tightly, and some other ionic component ( such as FABs etc)

Had not tried @angular/flex-layout yet, do you had considerd to useion-content , or any other layout components?

---updated :
Found ionic team begin to do some investigations in milestone @ionic/angular 4.0.0, such as:

• Router
• Angular CLI?

Hope these can be implemented in ionic 4.x.

Backend using firebase

Can you change backend database to firebase?

Structure docs improve

At readme.md

Error running npm install

Interesting seed... thank you.

Getting the following error when running... npm install

npm WARN [email protected] No repository field.

npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected]
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'angular-pwa-seed'
npm ERR! notarget

Any Ideas?
Thanks

Differences between Web vs Browser (Cordova)

Discussion about if it is worth to keep both build process (npm run start and npm run start.browser) since the cordova already support a web/browser target!

Should mantain only cordova to keep it simple?
Any pros and cons is welcome!

Things to consider:

• Different code when using device (hardware) features (even to web).

  Have to test/check if device apis of browser work inside cordova (with and without crosswalk webview)

  References:

  • https://developer.mozilla.org/pt-BR/docs/WebAPI
  • http://blog.teamtreehouse.com/exploring-javascript-device-apis
  • http://mobilehtml5.org/

• Another, LiveReload is already working on web ng serve (Now works at cordova too)
• Slightly faster build at npm run start (once no cordova is involved).

  Have importance once livereload is working?

More info at: https://www.raymondcamden.com/2016/03/22/the-cordova-browser-platform/

Components location

You are providing a location for Angular components as a single file. But my understanding it's supposed to be a folder named Components where all Angular components are going to be. Can you please clarify?

Thanks

Docs about Authentication/Authorization configuration

Executing npm install never finishes

After cloning the project I am running npm install. Here is what I get
PS K:\Project1> npm install
npm WARN tar ENOENT: no such file or directory, open 'K:\Project1\node_modules.staging\nan-1c7803b7\doc\new.md'
npm WARN tar ENOENT: no such file or directory, open 'K:\Project1\node_modules.staging\nan-1c7803b7\doc\asyncworker.md'
npm WARN tar ENOENT: no such file or directory, open 'K:\Project1\node_modules.staging\nan-1c7803b7\doc\callback.md'
npm WARN tar ENOENT: no such file or directory, open 'K:\Project1\node_modules.staging\nan-1c7803b7\doc\converters.md'
npm WARN tar ENOENT: no such file or directory, open 'K:\Project1\node_modules.staging\nan-1c7803b7\doc\errors.md'
npm WARN tar ENOENT: no such file or directory, open 'K:\Project1\node_modules.staging\nan-1c7803b7\doc\json.md'
npm WARN tar ENOENT: no such file or directory, open 'K:\Project1\node_modules.staging\nan-1c7803b7\doc\maybe_types.md'
npm WARN [email protected] No repository field.

npm ERR! code ETARGET
npm ERR! notarget No matching version found for [email protected]
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.
npm ERR! notarget
npm ERR! notarget It was specified as a dependency of 'angular-pwa-seed'
npm ERR! notarget

And the command is not finishing.

Actually it did finish. Should I be concerned with errors?

I guess, I should be because next command did not work at all:

PS K:\Project1> npm run start

[email protected] start K:\Project1
npm run ng -- serve --port 5555 --aot

[email protected] ng K:\Project1
ng "serve" "--port" "5555" "--aot"

'ng' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] ng: ng "serve" "--port" "5555" "--aot"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] ng script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Mark\AppData\Roaming\npm-cache_logs\2018-03-22T09_10_42_892Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: npm run ng -- serve --port 5555 --aot
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Mark\AppData\Roaming\npm-cache_logs\2018-03-22T09_10_42_923Z-debug.log

Can you please help?

Thanks

NPM Error in starting the project

Hello all,

The project cloned
npm runned successfully.

And this is what I get trying to run it:

─smarzougui@smarzougui-VirtualBox /var/www/private-projects/angular-pwa-seed ‹master›
╰─$ sudo npm run start

[email protected] start /var/www/private-projects/angular-pwa-seed
npm run ng -- serve --port 5555

[email protected] ng /var/www/private-projects/angular-pwa-seed
ng "serve" "--port" "5555"

/var/www/private-projects/angular-pwa-seed/node_modules/@angular/cli/models/config/config.js:17
constructor(_configPath, schema, configJson, fallbacks = []) {
^

SyntaxError: Unexpected token =
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object. (/var/www/private-projects/angular-pwa-seed/node_modules/@angular/cli/models/config.js:3:18)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)

npm ERR! Linux 4.4.0-66-generic
npm ERR! argv "/usr/bin/nodejs" "/var/www/private-projects/angular-pwa-seed/node_modules/.bin/npm" "run" "ng" "--" "serve" "--port" "5555"
npm ERR! node v4.8.4
npm ERR! npm v2.15.12
npm ERR! code ELIFECYCLE
npm ERR! [email protected] ng: ng "serve" "--port" "5555"
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] ng script 'ng "serve" "--port" "5555"'.
npm ERR! This is most likely a problem with the angular-pwa-seed package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! ng "serve" "--port" "5555"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-pwa-seed
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls angular-pwa-seed
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /var/www/private-projects/angular-pwa-seed/npm-debug.log

npm ERR! Linux 4.4.0-66-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "start"
npm ERR! node v4.8.4
npm ERR! npm v2.15.11
npm ERR! code ELIFECYCLE
npm ERR! [email protected] start: npm run ng -- serve --port 5555
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script 'npm run ng -- serve --port 5555'.
npm ERR! This is most likely a problem with the angular-pwa-seed package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run ng -- serve --port 5555
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular-pwa-seed
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!
npm ERR! npm owner ls angular-pwa-seed
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /var/www/private-projects/angular-pwa-seed/npm-debug.log

Docs about Routing configuration

Auth issue when "Add to Home Screen" used in iOS

This works fine when you browse to the site using iOS (iPhone/iPad) and the authentication works as expected. However, if you use the "Add to Home Screen" option and then launch the app from the home screen icon and try and login you get a 403 error with "disallowed_useragent". Here is the relevant bit from the error but see screen shot:

"This user-agent is not permitted to make an OAuth authorization request to Google as it is classified as an embedded user-agent (also known as a web-view). Per our policy, only browsers are permitted to make authorization requests to Google. We offer several libraries and samples for native apps to perform authorization requests in the browser."

I thought there wouldn't be any difference between using the app in the safari browser and using it via a home screen icon as they are both just using safari?

Source structure

Can you add to readme your source structure?
Where is the best to put my source such as ionic, angular, shared component.

Thanks

AOT Build support

Make ng serve --aot work in runtime without error!

Ng2 Translate integration

Hi,

i try to integrate ng2-translate but i have a bug because the translation update only the current page(not over layout). Example: i'm on Dashboard, i insert ng2 translate, only this component work.

On my app.component:
`import { Component, ViewEncapsulation, ViewChild, ElementRef, OnInit, AfterContentInit, ApplicationRef } from '@angular/core';
import { TranslateService } from 'ng2-translate';
import { Platform, MenuController } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';
import { Storage } from '@ionic/storage';

@component({
templateUrl: 'app.html'
})
export class MyApp {

constructor(
public platform: Platform,
public translate: TranslateService,
public menu: MenuController,
public application: ApplicationRef,
private storage: Storage,
) {
this.initializeApp();

this.translate.setDefaultLang('fr');
	storage.get('language').then((value) => {
		if (value) {
			this.translate.use(value);
		} else {
			this.translate.use('fr');
			this.storage.set('language', 'fr');
		}
	});

}`

My shared.module
`import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { Storage } from '@ionic/storage';
//import { CommonModule } from '@angular/common';
import { HttpModule, Http } from '@angular/http';
import { TranslateModule, TranslateLoader, TranslateStaticLoader } from 'ng2-translate';

import { TruncatePipe } from './pipes/truncate.pipe';
import { TrimHtmlPipe } from './pipes/trim-html.pipe';

import { Config } from '../app.config';

//import { MyApp } from '../app.component';

export function createTranslateLoader(http: Http) {
return new TranslateStaticLoader(http, './assets/translations', '.json');
}

@NgModule({
declarations: [
TruncatePipe,
TrimHtmlPipe
],
imports: [
HttpModule,
TranslateModule.forRoot({
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [Http]
})
],
exports: [
IonicModule,
TranslateModule,
TruncatePipe,
TrimHtmlPipe
],
providers: [
Config,
Storage
]
})
export class SharedModule {
constructor(private translate: TranslateService, private storage: Storage) {
this.translate.setDefaultLang('fr');
storage.get('language').then((value) => {
if (value) {
this.translate.use(value);
} else {
this.translate.use('fr');
this.storage.set('language', 'fr');
}
});
}
}
`