search

NativeScript / nativescript-angular

Integrating NativeScript with Angular
http://docs.nativescript.org/angular/tutorial/ng-chapter-0
Apache License 2.0
1.21k stars 240 forks source link

'ns create' creating broken project with Nativescript 7 and Angular 10 #2247

Open lonerzzz opened 4 years ago

lonerzzz commented 4 years ago

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

Describe the bug With nativescript version 7, creation of an application from scratch creates a broken angular application that does not run with 'ns debug android'. Instead an exception is generated indicating a missing entry point.

To Reproduce I installed the latest version of nativescript and then created a new project without issue:

F:\Programs\work>ns create

# Let’s create a NativeScript app!

Answer the following questions to help us build the right app for you. (Note: you
can skip this prompt next time using the --template option, or the --ng, --react, --vue, --ts, or --js flags.)

? First, what will be the name of your app? JKTest

? Next, which style of NativeScript project would you like to use: Angular

? Finally, which template would you like to start from: SideDrawer
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.

> node-sass@4.14.1 install F:\Programs\work\JKTest\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\JK\AppData\Roaming\npm-cache\node-sass\4.14.1\win32-x64-64_binding.node

> ejs@2.7.4 postinstall F:\Programs\work\JKTest\node_modules\ejs
> node ./postinstall.js

Thank you for installing EJS: built with the Jake JavaScript build tool (https://jakejs.com/)

> @nativescript/core@7.0.2 postinstall F:\Programs\work\JKTest\node_modules\@nativescript\core
> node cli-hooks/postinstall.js

> @nativescript/webpack@3.0.4 postinstall F:\Programs\work\JKTest\node_modules\@nativescript\webpack
> node postinstall.js

Creating file: F:\Programs\work\JKTest\webpack.config.js
Dev dependency: @angular/compiler-cli already added. Leaving version: ~10.1.0
Dev dependency: @ngtools/webpack already added. Leaving version: ~10.1.0
Some dependencies have already been added. If you want to force update them, please run "node_modules/.bin/update-ns-webpack".

> node-sass@4.14.1 postinstall F:\Programs\work\JKTest\node_modules\node-sass
> node scripts/build.js

Binary found at F:\Programs\work\JKTest\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.1.2 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\watchpack-chokidar2\node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN @angular/core@10.1.1 requires a peer of zone.js@~0.10.3 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@9.0.3 requires a peer of sass@^1.3.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@9.0.3 requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.

added 895 packages from 500 contributors and audited 897 packages in 80.565s
found 0 vulnerabilities

Project JKTest was successfully created.

Now you can navigate to your project with $ cd JKTest

After that you can preview it on device by executing $ ns preview

I then ran 'ns preview' and the application worked fine.

However, when I subsequently ran 'ns debug android', I received the following:

F:\Programs\work\JKTest>ns debug android
Searching for devices...
Copying template files...
+ @nativescript/android@7.0.0
added 1 package and audited 898 packages in 7.888s
found 0 vulnerabilities

Platform android successfully added. v7.0.0
Preparing project...
Compiling @angular/core : module as esm2015
Compiling @angular/animations : module as esm2015
Compiling @angular/animations/browser : module as esm2015
Compiling @angular/common : module as esm2015
Compiling @angular/platform-browser : module as esm2015
Compiling @angular/router : module as esm2015
Compiling @angular/common/http : module as esm2015
Compiling @angular/platform-browser/animations : module as esm2015
Compiling @angular/forms : module as esm2015
Compiling @nativescript/angular : module as esm2015
Compiling nativescript-ui-sidedrawer-angular : module as esm2015
Warning: Unable to fully load F:/Programs/work/JKTest/node_modules/nativescript-ui-sidedrawer/angular/fesm2015/nativescript-ui-sidedrawer-angular.js for source-map flattening: ENOENT: no such file or directory, open 'F:/Programs/work/JKTest/node_modules/nativescript-ui-sidedrawer/angular/fesm2015/nativescript-ui-sidedrawer-angular.js.map'
File change detected. Starting incremental webpack compilation...

webpack is watching the files…

Hash: 617456656966b7dba849
Version: webpack 4.44.1
Time: 16149ms
Built at: 09/11/2020 12:23:41 PM
                   Asset      Size   Chunks             Chunk Names
                    0.js  13.9 KiB        0  [emitted]
                    1.js  14.1 KiB        1  [emitted]
                    2.js  13.7 KiB        2  [emitted]
                    3.js  13.9 KiB        3  [emitted]
                    4.js  14.1 KiB        4  [emitted]
               bundle.js   367 KiB   bundle  [emitted]  bundle
 fonts/fa-brands-400.ttf   131 KiB           [emitted]
fonts/fa-regular-400.ttf  39.1 KiB           [emitted]
  fonts/fa-solid-900.ttf   204 KiB           [emitted]
            package.json  1.88 KiB           [emitted]
              runtime.js  78.8 KiB  runtime  [emitted]  runtime
     tns-java-classes.js   0 bytes           [emitted]
               vendor.js  16.7 MiB   vendor  [emitted]  vendor
Entrypoint bundle = runtime.js vendor.js bundle.js
[../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy namespace object 160 bytes {bundle} [built]
[../package.json] 1.69 KiB {bundle} [optional] [built]
[./app.scss] 121 KiB {bundle} [built]
[./app/app-routing.module.ts] 1.59 KiB {bundle} [built]
[./app/app.component.ts] 5.75 KiB {bundle} [built]
[./app/app.module.ts] 1.49 KiB {bundle} [built]
[./app/browse/browse-routing.module.ts] 1.11 KiB {0} [built]
[./app/browse/browse.component.ts] 2.16 KiB {0} [built]
[./app/browse/browse.module.ts] 1.24 KiB {0} [built]
[./app/featured/featured-routing.module.ts] 1.13 KiB {1} [built]
[./app/featured/featured.module.ts] 1.27 KiB {1} [built]
[./app/home/home.module.ts] 1.2 KiB {2} [built]
[./app/search/search.module.ts] 1.24 KiB {3} [built]
[./app/settings/settings.module.ts] 1.27 KiB {4} [built]
[./main.ts] 1.8 KiB {bundle} [built]
    + 555 hidden modules

WARNING in F:\Programs\work\JKTest\nativescript.config.ts is part of the TypeScript compilation but it's unused.
Add only entry points to the 'files' or 'include' properties in your tsconfig.
Webpack compilation complete. Watching for file changes.
Webpack build done!
Updating runtime package.json with configuration values...
Project successfully prepared (android)
Building project...
Gradle build...
File change detected. Starting incremental webpack compilation...
Hash: e4cdfd3441f1e3d1a36e
                          Version: webpack 4.44.1
                                                 Time: 1442ms
                                                             Built at: 09/11/2020 12:23:44 PM
                                                                                                                            Asset      Size   Chunks                               Chunk Names
                                                                                                                                                                                              617456656966b7dba849.hot-update.json  35 bytes           [emitted] [immutable] [hmr]
                                          fonts/fa-brands-400.ttf   131 KiB           [emitted]
                                                                                                                               fonts/fa-regular-400.ttf  39.1 KiB           [emitted]
                                                                                                                                                                                                                       fonts/fa-solid-900.ttf   204 KiB           [emitted]
                                                                  runtime.js  78.8 KiB  runtime  [emitted]                    runtime
                                                                                                                                      + 7 hidden assets
                                                                                                                                                       Entrypoint bundle = runtime.js vendor.js bundle.js
                                                                                                                                                                                                         [../$$_lazy_route_resource lazy recursive] ../$$_lazy_route_resource lazy namespace object 160 bytes {bundle} [built]
                                                                           + 569 hidden modules
                                                                                               Webpack compilation complete. Watching for file changes.
                                                                                                                                                       Webpack build done!
         + setting applicationId
         + applying user-defined configuration from F:\Programs\work\JKTest\App_Resources\Android\app.gradle
         + using android X library androidx.legacy:legacy-support-v4:1.0.0
         + adding nativescript runtime package dependency: nativescript-optimized-with-inspector
         + adding aar plugin dependency: F:\Programs\work\JKTest\node_modules\@nativescript\core\platforms\android\widgets-release.aar
         + adding aar plugin dependency: F:\Programs\work\JKTest\node_modules\nativescript-ui-sidedrawer\platforms\android\TNSSideDrawer-release.aar
         + adding aar plugin dependency: F:\Programs\work\JKTest\node_modules\nativescript-ui-core\platforms\android\TNSCore-release.aar
Project successfully built.
The build result is located at: F:\Programs\work\JKTest\platforms\android\app\build\outputs\apk\debug\app-debug.apk
Installing on device 5203428bfa9fb4a7...
Successfully installed on device with identifier '5203428bfa9fb4a7'.
Restarting application on device 5203428bfa9fb4a7...
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
System.err:
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6020)
System.err:     at android.app.ActivityThread.-wrap3(ActivityThread.java)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1727)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:102)
System.err:     at android.os.Looper.loop(Looper.java:154)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6823)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1557)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1445)
System.err: Caused by: com.tns.NativeScriptException: Application entry point file not found. Please specify the file in package.json otherwise make sure the file index.js or bootstrap.js exists.\nIf using typescript make sure your entry point file is transpiled to javascript.
System.err:     at com.tns.Module.bootstrapApp(Module.java:316)
System.err:     at com.tns.Runtime.run(Runtime.java:680)
System.err:     at com.tns.NativeScriptApplication.onCreate(NativeScriptApplication.java:21)
System.err:     at android.app.Instrumentation.callApplicationOnCreate(Instrumentation.java:1032)
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:6017)
System.err:     ... 8 more
System.err: Caused by: com.tns.NativeScriptException: Failed to find module: "./", relative to: app//
System.err:     at com.tns.Module.resolvePathHelper(Module.java:151)
System.err:     at com.tns.Module.bootstrapApp(Module.java:314)
System.err:     ... 12 more
Unable to apply changes on device: 5203428bfa9fb4a7. Error is: The application org.nativescript.JKTest does not appear to be running on 5203428bfa9fb4a7 or is not built with debugging enabled. Try starting the application manually..

From this, I see that: 1) The project is created as esm2015 instead of the es2017 that is written in the tsconfig.json 2) The installation complains about the nativescript.config.ts file being unused indicating something is not right. 3) The created project is missing the entry point file or pointing to an invalid directory.

Expected behavior The default application should install and run without errors. Having an error in the default application prevents basic comparison of projects for other error resolution.

Sample project The reproduction steps are sufficient to create a project with the issue.

Additional context No

turing-tech commented 4 years ago

Same issue. Default angular tabs template fails to run.

lukas-eschstruth commented 3 years ago

@lonerzzz @turing-tech adding appPath: src in the nativescript.config.ts fixed this for me. Thanks to this comment: https://github.com/NativeScript/nativescript-angular/issues/645#issuecomment-727561722

kennethkeim commented 3 years ago

Same issue in Jan 2021, appPath: src in nativescript.config.ts has been set from the beginning.

kennethkeim commented 3 years ago

@lonerzzz @turing-tech Did you guys find any solution to this?

dudipsh commented 3 years ago

up

arLevi commented 2 years ago

Having the same issue with a default app using Angular, in my case i receive the errors during the create command ( which never happened before )

I didn't change anything on my MacOSX, and also couple of months ago everything worked fine.

$ ns create myProjectTest --ng

npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@ngtools/webpack@12.0.5',
npm WARN EBADENGINE   required: {
npm WARN EBADENGINE     node: '^12.14.1 || >=14.0.0',
npm WARN EBADENGINE     npm: '^6.11.0 || ^7.5.6',
npm WARN EBADENGINE     yarn: '>= 1.13.0'
npm WARN EBADENGINE   },
npm WARN EBADENGINE   current: { node: 'v16.13.0', npm: '8.1.3' }
npm WARN EBADENGINE }
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.

added 424 packages, and audited 425 packages in 39s

40 packages are looking for funding
  run `npm fund` for details

3 high severity vulnerabilities

To address all issues, run:
  npm audit fix --force

Run `npm audit` for details.
[@nativescript/webpack] Initialized config.

Project myProjectTest was successfully created.

Now you can navigate to your project with $ cd myProjectTest

After that you can preview it on device by executing $ ns preview

Then

ng g c menu
The generate command requires to be run in an Angular project, but a project definition could not be found.

When i create a default plain-Angular project everything works

$ ng new myProjectTest
... 
ng g c menu
CREATE src/app/menu/menu.component.scss (0 bytes)
CREATE src/app/menu/menu.component.html (19 bytes)
CREATE src/app/menu/menu.component.spec.ts (612 bytes)
CREATE src/app/menu/menu.component.ts (268 bytes)
UPDATE src/app/app.module.ts (467 bytes)