teammaestro / angular-native-seed

Build web apps and NativeScript applications from one codebase using the AngularCLI.

Angular NativeScript Seed

Build truly web and native applications using NativeScript and Angular. This seed allows your project to share code between the environments; having complete control over dependencies.

Highlights

• i18n Translations
• Lazy Loaded Modules
• Angular CLI // Webpack // Testing
• Target Phone and Tablet Templates Individually. The following extensions are supported:

Extension	Platform
.{html/scss}	Recommended for Web. Does apply to both platforms when .tns equivalent does not exist.
.tns.{html/scss}	Only for mobile
.tns.ios.{html/scss}	Only for iOS
.tns.android.{html/scss}	Only for Android
.tns.ios.phone.{html/scss}	Only for iOS Phone
.tns.android.phone.{html/scss}	Only for Android Phone

• Docker build provided using NGINX to serve web content and load balance reverse proxied backends. (See nginx folder for setup instructions)

Getting Started

Web is setup from the root.

npm i

Mobile is setup from the nativescript folder.

cd nativescript
npm i

Each platform is run respective to it's folder. View available commands here:

• Seed Commands

How To's

• Integrating Angular Material (@angular/material)
• Integrating Ionic Styles & Components - Demo Project @proyecto26
• NativeScript with Angular Web Application Conversion

Workspace Options

• VSCode WorkSpace Settings

Contributors

Don Burgess	Sean Perkins

angular-native-seed's Issues

Clean install errors

Hi!!
I just did a

git clone
cd angular-native-seed
npm i
cd nativescript
npm i

And on the last npm i it errored at nativescript-dev-webpack post install. I'm seeing that the whole subdir under npm_modules doesn't exist. I also see not-so-up-to-date versions in the package.json, maybe thats the cause?

I did it on both a Windows10 and a macOS (Sierra) machine, same results.

When upgrading to tns-core-modules 3.1.0+, update webpack config

Need to update the webpack config to as follows, to fix a change that occurred in 3.1.1.

resolve: {
            extensions,

            // Resolve {N} system modules from tns-core-modules
            modules: [
                "node_modules/tns-core-modules",
                "node_modules",
            ],
            alias: {
                '~': resolve("./app")
            }
        },

The parser encountered a bad or missing package name in the manifest..

Hi there.
I followed the Tutorial at
https://www.nativescript.org/blog/code-sharing-between-web-and-mobile-with-angular-and-nativescript
and after I finished the part with the simple component I got the following error after executing npm run android:

Unable to apply changes on device: emulator-5554. Error is: The parser encountered a bad or missing package name in the manifest..
Executing after-watch hook from /Users/mad/Documents/Projects/express-seed/angular-native-seed/nativescript/hooks/after-watch/nativescript-dev-sass.js

In the first place the seed worked quite fine, but after that few changes there were the first problems.
Can someone please tell me what the problem could be and how I could solve it? Thanks.

npm run android.phone doesn't working in mac

Hello everyone,

It is great package. I loved it. I was able to run following commands without problem.

ng serve
npm run ios
npm run ios.phone

However, when I tried to run npm run android.phone, it got stuck at following and it didn't open anything

Total time: 5.543 secs
Project successfully built.
Installing...

when I stop it then it showed me following lines at terminal

Successfully installed on device with identifier 'emulator-5554'.
Terminated: 15
Successfully transferred all files
Refreshing application...

I have mac, I have install all necessary steps from nativestcript

Any Suggestions ??

Question: Why is any ts file I add to the app folder being build by webpack?

I am attempting to add a nativescript module that sits next to my regular app module, but is symlinked to my nativescript folder. The issue I have is there are packages available in my nativescript app that aren't available in my web app, but for some reason, even though the new modules is not referenced at all, if there is a ts extension on it webpack tries to build it. Is there any way to turn this off?

Production Environment

Can we use the seed in production environment? Is there a list of known issues? Is it being updated Regularly?

How To: Integrate Firebase for Web & Native

Demonstrate how to integrate Firebase for both Web and NativeScript.

Ignoring all .js files, conflict with gulpfile.js file

Hi guys!
You're ignoring all .js files: https://github.com/TeamMaestro/angular-native-seed/blob/master/.gitignore#L36
And the nativescript/gulpfile.js is being ignored too

What do you think guys?

How to run code coverage?

How can I run and view results of test code coverage?

thank you

ListView ng-template ignored

When I try use a ListView with the data coming from an array, the ListView creates a label for each item and binds to it. When I provide my own ng-template nothing changes and the contents of the array are still displayed as before.

This happens with both iOS and Android.

To reproduce:

Open src/app/home/components/home/home.component.ts
add the following code: items: string[] = ['a', 'b', 'c'];

Open src/app/home/components/home/home.component.tns.html and replace it with

<GridLayout rows="auto,auto,*">
    <Label class="h1 title"
        [text]="'home.title' | translate"></Label>
    <Label class="p description" textWrap="true" row="1"
        [text]="'home.description' | translate"></Label>

    <ListView row="3" [items]="items" class="list-group">
        <ng-template let-item="item">
          <StackLayout>
              <Label text="Template text to display!" ></Label>
          </StackLayout>
        </ng-template>
    </ListView>
</GridLayout>

Result

The expected behaviour:

a ListView with 3 labels with the text:

Template text to display!
Template text to display!
Template text to display!

Actual behaviour:

a ListView with 3 labels with the text:

a
b
c

Build Script Copies Components Incorrectly

Introduced in commit: e44d3e4

The updated scripts incorrectly run on the wrong directory for clean-up of the component styles, causing the .ts based component to override any .tns.ts versions.

How to use modules at WEB only

Hello, is there a way to use module only in web and not in nativescript.

For example i have
import {MnFullpageService} from 'ngx-fullpage';
to *.component.ts, but i dont want to use this at nativescript. How to achieve this?

Livesync not working with Gulp 4.0

Hello,

Livesync seems not to work with the latest version of gulp.
When I run npm install from nativescript directory it gives me the 4.0-alpha-2 version of Gulp.
If I then run npm livesync android and modify any file like MyComponent.tns.html it does not trigger the watch from the tns.Livesync task.
If I run the same thing with gulp version 3.9.1 the watch gets triggered but it is incompatible with the "series" function of gulp.

I didn't manage to get the livesync working (on Android, didn't test on iPhone).
Maybe there is an alternative for the series function of gulp ?

Thank you for your help and great job for this awesome seed !

tns version: 3.1.3
npm version: 5.4.1
node version: 8.2.1

proxy.conf.json referenced in start script

start script explicitly references proxy.conf.json yet fresh clone has ".proxy.conf.json".

Was this intentional?

Proxy config file ~/angular-native-seed/proxy.conf.json does not exist.

[(ngModel)]

What could be wrong if [(ngModel)] is not working in the seed?

Could it be because of the { N } or Angular Version?
How could I update the Version in the seed?
Should I just replace the version number in the package.json with a * ?

No manifest found in <PATH>\nativescript\app\App_Resources\Android\AndroidManifest.xml

I cloned the repo into d:\git\companyname\productname and after I npm install both folder, I try to run it with npm run android.

I get this error

No manifest found in d:\git\companyname\productname\nativescript\app\App_Resources\Android\AndroidManifest.xml

If I clone it into d:\git\companyname, follow the same process, it all works.

I do not think it like the subfolder.

Working in Windows 10

Ionic theme vs Angular material

Hi guys,
What do you think to integrate the style and components of Ionic for the web version? Is it possible?

Thanks in advance, Nicholls

NativeScript theme doesn't seem to be working

Out of the box the project imports one of the {N} themes: @import 'nativescript-theme-core/css/core.light.css';, however that doesn't seem to work

When I add a button like: <Button text="TEST" class="btn btn-primary"></Button> to the home component, the button appears without the expected style.

Resources for all platforms

Hi guys,
One question, where is the best place to have the same resources (images) between iOS, Android and Web? Exist any option to do that?
Thanks in advance, Nicholls

How To: Integrating rxjs/ngrx into the seed

Create a Wiki page and video demonstrating how developers can integrate the @ngrx package, create an app state and manage a redux based application.

"The parser encountered a bad or missing package name in the manifest"

Hi guys,

I cloned, ran npm i in the root, npm i in the nativescript sub-folder, and then ran npm run android.phone to my Samsung S7.

First time around it works (although with the navigation buttons in grey boxes as opposed to matching blue with the background), but upon subsequent calls to npm run android.phone I get:

Unable to apply changes on device: ce091609f2b8d00704. Error is: The parser encountered a bad or missing package name in the manifest..

I tried recloning the project and starting again, same results. First time around it installs, second time around I end up with this error.

Does anybody have any thoughts?

All the best and thanks for the project,
Josh

Congrats and Angular 5

Hi,

I spend 2 days trying to have shared code between mobile and web and then I find your seed. In one hour, everything was working fine !!! Thank you very much !!!

Do you plan to upgrade the project to Angular 5 and NativeScript 3.4 ?

I'm trying to do that but I'm too new to Angular and TNS for the moment...

EDIT : I've upgraded all dependencies to their latest versions but I've 2 main problems :

• navigation fails on mobile while working on Web
• translation doesn't work anymore (home.title is written for example)

Thanks for your help !

EDIT 2:

• for translation, the error was on HttpClient due to NG5. I just used the new HttpClient / HttpClientModule for the Web and NativeScriptHttpClientModule / HttpClient in TNS and it works (updating also the imports and translateLoader function)

EDIT 3 :

• for navigation, we just have to add "./" before "app" in the lazy loaded routes. So, in "home.routes.ts", replace the route for "about" with

loadChildren: './app/+about/about.module#AboutModule'

The only problem is that it only works for mobile, not for the web...
Finally I have created a "home.route.tns.ts" with that type of links and there isn't any changes to "home.routes.ts".

Everything is working now with all latest versions :)

Nativescript Webpack AOT Build Stopped Working

Vanilla project no longer is building AOT. Initial errors are around package.json no longer being copied into the app directory.

Consistently getting error when compiling for android and ios

I cloned the project onto My MacBook pro and followed the instructions

On android:

Project successfully created.
Executing before-prepare hook from /Users/jbaird/Documents/development/test/nativescript/hooks/before-prepare/nativescript-dev-android-snapshot.js
Executing before-prepare hook from /Users/jbaird/Documents/development/test/nativescript/hooks/before-prepare/nativescript-dev-sass.js
Found peer node-sass
No input file was found.

Unable to apply changes on device: 3300c7a83f28a385. Error is: SASS compiler failed with exit code 1.

On IOS..

Project successfully created.
Executing before-prepare hook from /Users/jbaird/Documents/development/test/nativescript/hooks/before-prepare/nativescript-dev-android-snapshot.js
Executing before-prepare hook from /Users/jbaird/Documents/development/test/nativescript/hooks/before-prepare/nativescript-dev-sass.js
Found peer node-sass
No input file was found.

Unable to apply changes on device: f72f70777ff56844ed0217e01fe8d389ad058088. Error is: SASS compiler failed with exit code 1.

NativeScript references

I brought the tns-platform-declarations plugin into a project to provide type definitions for Andorid and iOS. I followed the README instructions on there repo but continued to get tsc errors for invalid types.

After some help from a co-worker we moved the references.d.ts from nativescript to nativescript/src so the resources.assets gulp task would copy the file to app/ during build. This resolved our compile error. The other approach we considered was to update the gulp task to include references.d.ts in the copy. Not sure which approach is favored by the seed.

Error is: SASS compiler failed with exit code 1.

I have download your code and try to run in but I got this issue

tns run android
Searching for devices...
Starting Android emulator with image Nexus_5X_API_25
Waiting for emulator device initialization....
Executing before-liveSync hook from C:\Users\rmartanto\Downloads\Typescript\NativeScript + Angular\angular-native-seed-master\nativescript\hooks\before-liveSync\nativescript-angular-sync.js
Executing before-prepare hook from C:\Users\rmartanto\Downloads\Typescript\NativeScript + Angular\angular-native-seed-master\nativescript\hooks\before-prepare\nativescript-dev-android-snapshot.js
Executing before-prepare hook from C:\Users\rmartanto\Downloads\Typescript\NativeScript + Angular\angular-native-seed-master\nativescript\hooks\before-prepare\nativescript-dev-sass.js
Found peer node-sass
No input file was found.

Unable to apply changes on device: emulator-5556. Error is: SASS compiler failed with exit code 1.

Thanks

Serious update

Hi guys....

I've just taken some time to update the package.json files to update it all to the latest tns 3 .... Any interest?
(and yes, it does work)

Problem is, I've never done a PR - I'm familiar to git though......

Sharing for reference; a few tips

https://github.com/megamindbrian/spotshot/

Sidenav container in Materials and Nativescript:
https://github.com/megamindbrian/spotshot/tree/master/src/app/shared/container

Referencing an image in the assets directory from SCSS:
https://github.com/megamindbrian/spotshot/blob/master/src/app/shared/container/container.component.tns.scss#L6

Added a menu service for keeping track of titles and if the sidenav is open:
https://github.com/megamindbrian/spotshot/blob/master/src/app/menu/menu.service.ts

Ran into a weird issue where SCSS and CSS files are being generated in the same directory, I added it in the shared directory and SCSS files only link to it, 1 direction:
https://github.com/megamindbrian/spotshot/blob/master/src/app/shared/colors.scss

Question: How does the symlink exclude the web module?

I am attempting to drop this seeds technique of sharing code with the nativescript app into another project I am already working on. I added the symlink, but I am noticing that the same link in my app copies over all files, whereas in this seed the web module is left behind and only the .tns.module is copied over. Can you explain what mechanism accomplishes that?

Copying of Files and Folders should not happen always

Hi ,

I am very new to this seed (and also nativescript and angular).

This seed main purpose is to built a hybrid web and Native app.I am aware of it.

My Problem is I have started the development first in nativescript. For that Views and folder structure will be different than the WEB.

Now the WEB Development I want to do it later.My Views for Web will be different.

I still want to reuse the SHARED code .So How I can restrict folders getting copied to WEB ? I can manually create the folder for WEB later.

This might be not an issue of this SEED.
Thanks
Manish Pandit

android built error

Hi there,

I tried to set up your seed-project, but failed to run the android emulation. The emulator starts, but ends with the attached error.

It's weird,.. when I clone the repo to my Desktop, all is working fine (web and android emulation). If I try cloning it to any subfolder, I get the described error.

====================================
ERROR:

FAILURE: Build failed with an exception.

• What went wrong:
  Execution failed for task ':mergeF0DebugResources'.

Error: Failed to crunch file "...\angular-native-seed\nativescript\platforms\android\build\intermediates\explo
ded-aar\com.android.support\appcompat-v7\26.0.0-alpha1\res\drawable-xxhdpi-v4\abc_text_select_handle_middle_mtrl_light.png" into ".../angular-native-seed\nativescript\platforms\android\build\intermediates\res\merged\F0\debug\drawable-xxhdpi-v4\abc_text_select_handle_middle_mtrl_light.png"

• Try:
  Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
  Unable to apply changes on device: emulator-5554. Error is: Command gradlew.bat failed with exit code 1.
  Executing after-watch hook from ".../angular-native-seed\nativescript\hooks\after-watch\nativescript-dev-sass.js"
  ====================================
  ====================================

Nativescript Webpack doesn't build

When building a webpack bundle the current script removes necessary vendor files from the app directory.

Navigation issues on Mobile

Hi guys,

I'm trying to modify the routes but the home modules doesn't load on iOS (Only works on Web):
https://github.com/proyecto26/nativescript-ionic-template

I want to have the routes like the following project: https://github.com/Especializa/nativescript-whatsapp-template/blob/master/app-routing.module.ts

Any help is really appreciated, Nicholls

Modules denoted with .tns prefix are not being compiled to JS

Say you have two modules:
feature.module.ts
feature.module.tns.ts

During the build process for tablet, the gulp script copies over the tns.ts version file over the normal (as it should). The problem I am noticing is these files are not be compiled to JS in the app build directory.

Error compiling with webpack for Android

Hi again all,

I cloned the repo fresh today, ran both npm i commands and then tried to run npm run build.phone-android-bundle or npm run phone-android-bundle and get the following error:

ERROR in Template parse errors:
Can't bind to 'text' since it isn't a known property of 'Label'. ("<GridLayout rows="auto,auto">
	<Label class="h1 title"
		[ERROR ->][text]="'home.title' | translate"></Label>
"): ng:///D:/Code/ngseed/nativescript/app/app/home/components/home/home.component.html@2:8
Can't bind to 'text' since it isn't a known property of 'Label'. ("ome.title' | translate"></Label>
	<Label class="p description" textWrap="true" row="1"
		[ERROR ->][text]="'home.description' | translate"></Label>
</GridLayout>
"): ng:///D:/Code/ngseed/nativescript/app/app/home/components/home/home.component.html@4:8
'GridLayout' is not a known element:
1. If 'GridLayout' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("[ERROR ->]<GridLayout rows="auto,auto">
	<Label class="h1 title"
		[text]="'home.title' | translate""): ng:///D:/Code/ngseed/nativescript/app/app/home/components/home/home.component.html@0:0

ERROR in ./main.aot.ts
Module not found: Error: Can't resolve './app/app.module.ngfactory' in 'D:\Code\ngseed\nativescript\app'
 @ ./main.aot.ts 4:29-66

I am getting this on two separate machines.

Any thoughts?

Any plans to include electron as well?

{N} AOT builds but fails to run

Just got a fresh copy of the seed and npm run start-ios-bundle --emulator gives me this error:

CONSOLE ERROR file:///app/vendor.js:1413:24: ERROR SyntaxError: JSON Parse error: Unexpected EOF

The app loads on the iOS emulator, but the Home page does not show up.

Running the app on the emulator works fine (npm run ios), just the AOT build fails.

Environment: OSX 10.11.6
webpack:2.6.1
node: 7.4.0
tsc: 2.3.4
tns: 2.5.2
simulator: iPad Pro 9.7 (iOS 10.2)

No app.module.ts

there is no app.module.ts in this directory https://github.com/TeamMaestro/angular-native-seed/tree/master/nativescript/src and this file is referred in main.ts.

Should I import the web's app.module.ts?

Unable to create absolute path or alias on import.

I am trying to set up an alias for my common module directory.
I want
import { RouterModule } from '~app/common';
instead of
import { RouterModule } from '../common';
How can i achieve this? I have tried to add alias in webpack.config.js but compiler is looking for module relative to "app/tns_modules/".

How did you test the application in the browser?

Not an issue. Query!

How did u do this?
https://camo.githubusercontent.com/e0adc7659a07e893159ded1f1c76377f573f2827/68747470733a2f2f692e6779617a6f2e636f6d2f31626134643362653762373333326365393162643637313564633735326438622e676966

npm run ios has errors during build

Hi,

I'm having some error after a fresh clone/install. XCode Version is 9.2 and npm install looks good.

tns run ios has error during build:

Building project... Xcode 8 requires a team id to be specified when building for device. You can specify the team id by setting the DEVELOPMENT_TEAM setting in build.xcconfig file located in App_Resources folder of your app, or by using the --teamId option when calling run, debug or livesync commands. Xcode build... 2017-12-22 00:49:03.181 xcodebuild[6781:196290] [MT] DVTAssertions: ASSERTION FAILURE in /Library/Caches/com.apple.xbs/Sources/IDEXcode3ProjectSupport/IDEXcode3ProjectSupport-13756/Xcode3Core/LegacyProjects/Frameworks/DevToolsCore/DevToolsCore/RuntimeSupport/MacroExpansion/XCMacroExpansionExtensions.mm:94 Details: Assertion failed: [value isKindOfClass:[NSString class]] || [value isKindOfClass:[NSArray class]]

Unable to apply changes on device: 8F019045-xxxx-xxxx-xxxx-375Cxxxx8B4C. Error is: Command xcodebuild failed with exit code null.

Any ideas why error points to xcode 8?

Thank you in advance.

Watch not triggering

Compilation complete. Watching for file changes.

Nothing happening on file changes.

Sample Nativescript Application Doesn't Use Translations Properly

When building the sample application using Webpack; translation text is not rendered in the label boxes or the translations are not piped.

[Discussion] What are the steps to update an existing project?

I've been asked in my article by Dinesh about the required steps to update an existing angular-native-seed clone.
I am not 100% sure what is the best way to approach it.
This looks like a good topic to have an open discussion about.

How to use specific CSS

Hi.
I would like to know the following:
What is the right approach of specific CSS usage?
How can I define specific ios/android CSS files in the angular components?

Thanks.

How To: Integrate Angular Material

Demonstrate how to integrate @angular/material into the Web package without conflicting with the NS app.

Update README/Wiki with Available Scripts

Update the README or add a Wiki page outlining how to run the seed tasks (i.e. npm run ios etc.).

Also up for discussion, should we just mirror the commands on the root level of the project, so you don't have to navigate into the nativescript directory to run those commands.

{N} and localhost

How can I achieve that a http-request to http://localhost:3000/example is working?
I assume the problem occurs because you make no request to https !?!

After npm run ios and the request I get the following error:

App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. Temporary exceptions can be configured via your app's Info.plist file.
CONSOLE ERROR file:///app/tns_modules/@angular/core/./bundles/core.umd.js:1052:24: ERROR Error: Uncaught (in promise): Response with status: 200  for URL: null

I would like to know the best/correct approach to solve that problem. (both for ios/android)
Thanks.

Fonts Folder

I tried to include FontAwesome as described in http://docs.nativescript.org/ui/icon-fonts. In a 'normal‘ {N} project it`s working as expected, but in the seed project, I have some problems. (I think the *.tff file is not found.)
I know that I usually have to place the *.tff file in app/fonts; but in the structure of the seed nativescript/app/app I am not sure where to place it exactly. I do not get it working.
Therefore I would like to know, where do I have to place the fonts folder in the seed?

Webpack build issue with nativescript-angular/router/router.module.d.ts

Hi,

I am using angular-native-seed to build cross-platform mobile apps. and when I ran 'npm run phone-android-bundle', I am stuck with following error

Please help me