QuotesapplicationforWebandMobile(Android,iOS)withsinglecodebasebuitwithAngularandNativescript.
Ifyouwanttocreateyourowncross-platformappsimilartothis,checkthisstarter:nativescript-angular-web-starter.
PreviewsandScreenshotsYoucancheckpreviewsandscreenshotsofthisapplicationforWeb,AndroidandiOSplatformsatngxp.io
PrerequisitesGloballyinstalledNativecript-npminstall-gnativescriptGloballyinstalledAngularCLI-npminstall-gangular-cliMacOStobuildiOSapp.Installationgitclonehttps://github.com/shripalsoni04/ngxp-quotes-app.gitcdngxp-quotes-appnpmrunngxp-installAsweareusingnativescript-firebaseplugin,justpressyforbelowtwoquestionswhenaskedwhileinstallation.areyouusingiOS?areyouusingandroid?Forallotherquestionspressn.RunWebapplicationnpmstart-Thiswillstarttheapplicationathttps://localhost:4200.
RuniOSApplicationFirststartthesimulatororconnecttheiOSdevice.Executenpmrunstart.iosNote-IfyouareusingXCode8thenyouneedtosettheDEVELPMENT_TEAM.Therearetwowaystosetit.UsingXCodeAfterexecutingnpmrunstart.ioscommand,openprojectwordspacefilenativescript/platforms/ios/nativescript.xcworkspaceinXCodeClickonnativescriptprojectinXCodeandsetTeamfromGeneralTab.Theissuewiththieapproachis,youneedtosetiteverytimeyouremoveandaddtheiOSplatform.Frombuild.xconfig(preferable)Opennativescript/app/App_Resources/iOS/build.xconfigfile.UncommentDEVELOPMENT_TEAM=YOUR_TEAM_ID;line,andenteryourteamid.RunAndroidApplicationExecutenpmrunstart.androidCommandsYoucanexecuteanyvalidcommandofangular-clifromweb/folderandanyvalidcommandofnativescript-clifromnativescript/folder.Forconvenincebelowarethecommandswhichyoucanexecutefromrootdirectory.
CommonCommandDescriptionnpmrunngxp-installInstallsdependenciesofwebandnativescriptapplications.Createssymlinkofx-sharedfolderinbothwebandnativescriptproject.WebApplicationCommandDescriptionnpmstartStartswebapplicationathttps://localhost:4200npmrunstart.prodStartswebapplicationinproductionmode.Runsuglificationandminification.npmrunstart.aotPerformsAOTforwebapplicationtemplatesandstartswebapplication.npmrunstart.aot.prodPerformsAOT,minification,uglificationandstartswebapplication.npmrunbuildBuildsthewebapplicationandcopythebuiltprojectinweb/distfolder.npmrunbuild.prodBuildsthewebapplicationinproductionmodeandcopythebuiltprojectinweb/distfolder.npmrunbuild.aotPerformsAOT,buildtheprojectandthencopythebuiltprojectinweb/distfolder.npmrunbuild.aot.prodPerformsAOT,preparesproductionbuildandthencopythebuiltprojectinweb/distfolder.npmtestRunswebapplicationandx-sharedunittestcases.Itwillnotgeneratecodecoveragereport.npmruntest-ccRunswebapplicationandx-sharedunittestcasesandgeneratescodecoveragereport.NativescriptApplicationCommandDescriptionnpmrunstart.iosRunsapplicationoniOSemulator/devicenpmrunstart.androidRunsapplicationonAndroidemulator/devicenpmrunlivesync.iosStartsapplicationinlivesyncmodeoniOSemulator/device.npmrunlivesync.androidStartsapplicationinlivesyncmodeonAndroidemulator/device.KnownIssuesandSolutionAngulardependenciesattwolevelsforAOTsupportCurrentlywehaveaddedangulardependenciesinrootlevelpackage.jsonandweb/package.json.Because,AOTdoesnotworkproperlywhenweusepathmappingandthisissueisreportedandcanbetrakedathttps://github.com/angular/angular-cli/issues/1732andPR:https://github.com/angular/angular-cli/pull/2470.Oncethisissueisresolvedwecanaddpathmappingasshownbelowandremovetheangulardependenciesfromweb/package.json,soincaseofanyversionupdatewejustneedtochangetheversionatrootdirectorylevel.
web/src/tsconfig.json
"paths":{"@angular/*":["../../node_modules/@angular/*"]}Attributes(Allarenpmpackages)nativescript-cardviewnativescript-floatingactionbuttonnativescript-iqkeyboardmanagernativescript-material-iconsnativescript-ngx-fonticonnativescript-plugin-firebasenativescript-social-sharenativescript-swiss-army-knifenativescript-theme-coreangular-mdlAwesomeframeworkandtoolchainofNativescriptandAngular.
评论