ionic-team / angular-toolkit Goto Github PK

View Code? Open in Web Editor NEW

68.0 17.0 30.0 3.27 MB

Angular Schematics and Builders for `@ionic/angular` apps.

License: MIT License

TypeScript 99.51% HTML 0.49%

ionic ionic4 angular angular-devkit cordova

angular-toolkit's People

Contributors

Stargazers

Watchers

angular-toolkit's Issues

feat: Angular 10 support

Feature Request

Update Ionic framework to support Angular 10 and typescript 3.9.

Ionic version:
[x] 5.x

Describe the Feature Request
The new version of Angular came out (Angular 10).
Update Ionic Angular dependencies to support the new version of Angular.
Angular 10 also pushes Typescript to version 3.9.

Describe Preferred Solution
Update Ionic Angular dependencies to support the new version of Angular.

Additional Context
Blog post about release: https://blog.angular.io/version-10-of-angular-now-available-78960babd41
Change Log v10: https://github.com/angular/angular/blob/master/CHANGELOG.md

Route path is the literal name of the page

❯ ionic g page "Hello World"
> ng generate page "Hello World"
CREATE src/app/hello-world/hello-world.module.ts (564 bytes)
CREATE src/app/hello-world/hello-world.page.scss (0 bytes)
CREATE src/app/hello-world/hello-world.page.html (138 bytes)
CREATE src/app/hello-world/hello-world.page.spec.ts (720 bytes)
CREATE src/app/hello-world/hello-world.page.ts (275 bytes)
UPDATE src/app/app-routing.module.ts (470 bytes)
[OK] Generated page!

❯ git diff
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 41f546e..28c56f4 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,6 +4,7 @@ import { Routes, RouterModule } from '@angular/router';
 const routes: Routes = [
   { path: '', redirectTo: 'home', pathMatch: 'full' },
   { path: 'home', loadChildren: './home/home.module#HomePageModule' },
+  { path: 'Hello World', loadChildren: './hello-world/hello-world.module#HelloWorldPageModule' },
 ];

 @NgModule({

bug: Cannot generate app-shell (Angular)

Bug Report

Ionic version:
[x] 5.x

Current behavior:
Command ng generate app-shell in "fresh" Ionic gives error:

Schematic input does not validate against the Schema: {}
Errors:

  Data path "" should have required property 'clientProject'.

Expected behavior:

User should be able to exec ng generate app-shell when he chose Angular during the generation of a new Ionic application

Ionic info:

Ionic:

   Ionic CLI                     : 6.0.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Utility:

   cordova-res                          : not installed
   native-run (update available: 1.0.0) : 0.3.0

System:

   NodeJS : v13.11.0 (/Users/test/.nvm/versions/node/v13.11.0/bin/node)
   npm    : 6.14.4
   OS     : macOS Catalina

Schematic "interceptor" not found in collection "@ionic/angular-toolkit"

I was trying to add a interceptor using the CLI, but i get this error:

ionic g interceptor interceptors/auth
[ERROR] interceptor is not a known feature.

If I try to run directly from the Angular CLI:

ng generate interceptor interceptors/auth
An unhandled exception occurred: Schematic "interceptor" not found in collection "@ionic/angular-toolkit".

Interceptor schematic seems to exist at least in version 9.
Angular Docs: https://angular.io/cli/generate#interceptor-command

Ionic:

   Ionic CLI                     : 6.6.0 (C:\Users\hsantos\AppData\Roaming\nvm\v13.9.0\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.901.6
   @angular-devkit/schematics    : 9.1.6
   @angular/cli                  : 9.1.6
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.1.0
   @capacitor/core : 2.1.0

Cordova:

   Cordova CLI       : 8.1.2 ([email protected])
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : 0.3.0

System:

   Android SDK Tools : 26.1.1 (C:\Users\hsantos\AppData\Local\Android\Sdk)
   NodeJS            : v13.9.0 (C:\Program Files\nodejs\node.exe)
   npm               : 6.13.7
   OS                : Windows 10

Update to version 2.0.0 problem

> ng run app:ionic-cordova-build:production --platform=android            
architect_1.createBuilder is not a function

ionic info is below:


Ionic:

   Ionic CLI                     : 5.0.3 (/usr/local/Cellar/node/11.9.0/lib/node_modules/ionic)
   Ionic Framework               : not installed
   @angular-devkit/build-angular : 0.800.6
   @angular-devkit/schematics    : 7.3.9
   @angular/cli                  : 8.0.6
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 8.1.2 ([email protected])
   Cordova Platforms : android 8.0.0, ios 5.0.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.1, (and 23 other plugins)

Utility:

   cordova-res : not installed
   native-run  : 0.2.7

System:

   Android SDK Tools : 26.1.1 (/Users/dfa/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v11.15.0 (/Users/dfa/.nvm/versions/node/v11.15.0/bin/node)
   npm               : 6.7.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

Add --watch option to cordova-build

ref: ionic-team/ionic-cli#3999

Generating child page should add to immediate parent module

Ionic Version: 4.10.2

It seems to me that by default, if you generate a page within an existing page with a module (i.e. child page) it should add the page to the parent module (i.e. module in directory you are generating it in).

For example, given existing app structure:

- app
  - home
    - home.module.ts
    - home.page.*
  - app-routing.module.ts
  - app.component.*
  - app.module.ts

And the CLI command:

ionic g page home/child

... you would think that it would add "child" to the routes in home.module.ts by default, but instead it adds it to app-routing.module.ts. This seems counter-intuitive, as you would expect when purposefully organizing your structure as a tree, that it would add it to the closest "parent" module, not the top-level module.

Now, I will note that this is indeed possible with the addition of the --module argument, as indicated in this command: ionic g page home/child --module home, but I would think this would be used if you wanted to add the subpage to the top level routes, as an exception to the above assumptions.

feat: Rework the app-shell schematic to support ionic apps

Feature Request

Ionic version:
[x] 5.x

Describe the Feature Request
With rework the app-shell schematic to support ionic apps we can gives users a meaningful first paint of your application that appears quickly because the browser can simply render the HTML and CSS without the need to initialize any JavaScript, being able to improve the user experience.

--consolelogs serialization does not work for Errors

There should be some sort of stringification here, otherwise Error instances fail to serialize:

angular-toolkit/assets/consolelogs.js

Line 56 in 07af906

msg.data.push(arguments[i]);

ref: ionic-team/ionic-cli#3169 (comment)

component generator does not respect --changeDetection Flag

Steps to Reproduce:

ionic start
npm install @angular/[email protected]
ng g component Test --changeDetection=OnPush --entryComponent

Output:
Generated component:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-training-options',
  templateUrl: './training-options.component.html',
  styleUrls: ['./training-options.component.scss'],
})
export class TrainingOptionsComponent implements OnInit {

  constructor() { }

  ngOnInit() {}

}

My ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.3 (C:\Users\distante\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.3.4
   @angular/cli                  : 7.3.4
   @ionic/angular-toolkit        : 1.4.0

System:

   NodeJS : v10.14.1 (C:\Program Files\nodejs\node.exe)
   npm    : 6.5.0
   OS     : Windows 10

Other Information:
Using a Pure angular Project ng g generates the correct component.

Toolkit for Capacior

Hi @mhartington!
Is there any chance to get some builders for Ionic + Capacitor instead Cordova?
Is it possible? needed? or we just skip the ionic tooling it to run the App with the Native editor like we have to do while working with Xplat+ Monorepo?
Thanks for the great stuff!

Implement `--skip-import` for page

see ionic-team/ionic-cli#3844

Generating component does not add declaration to module

This will successfully create a module

ionic generate module tstmdule

When creating a component inside a module,

ionic generate component tstmdule/tstcmpnt

it does create the component files but it does not update the tstmdule (app/tstmdule/tstmdule.module.ts) module to have the TstcmpntComponent declaration

When I commented out this part in angular.json file and generate a component it updates the module successfully

"cli": {
"defaultCollection":"@ionic/angular-toolkit"
}

Workspace Project support

The schematics in @ionic/angular-toolkit do not appear to support --project.

ionic g page child doesn't update nearest routing module

Description:
I'm generating module with --routing option.
If I generate child page to this module, routing.module.ts is marked as updated but in fact it is not.

Steps to Reproduce:

ionic start errorgene blank
cd errorgene
ionic g module todos --routing
ionic g page todos/todos-list

Output:

For the following command ionic g page todos/todos-list

CREATE src/app/todos/todos-list/todos-list.module.ts (559 bytes)
CREATE src/app/todos/todos-list/todos-list.page.html (129 bytes)
CREATE src/app/todos/todos-list/todos-list.page.spec.ts (713 bytes)
CREATE src/app/todos/todos-list/todos-list.page.ts (271 bytes)
CREATE src/app/todos/todos-list/todos-list.page.scss (0 bytes)
UPDATE src/app/todos/todos-routing.module.ts (248 bytes)
[OK] Generated page!

but todos-routing.module.ts is not updated

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class TodosRoutingModule { }

My ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\hugob\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.1.2
   @angular-devkit/build-angular : 0.13.7
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.7
   @ionic/angular-toolkit        : 1.4.1

System:

   NodeJS : v10.15.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 10

Investigate component schematic applicability with lazy-loaded page structure

In Ionic 4, pages are lazy-loaded by default, but that presents some challenges when one wants to use components within pages.

It may be best to generate an NgModule for each component so that it can be used across the app.

ref: https://blog.ionicframework.com/ionic-and-lazy-loading-pt-2/

Data path "" should have required property 'name' & @ionic/angular-toolkit

Is it possible to use a custom "webpack.config.js" without loosing livereload option?

Using the following configuration with the command "ionic cordova run browser --livereload" I receive the error: [ng] Schema validation failed with the following errors:
[ng] Data path "" should NOT have additional properties(customWebpackConfig).

"ionic-cordova-serve": {
"builder": "@ionic/angular-toolkit:cordova-serve",
"options": {
"cordovaBuildTarget": "app:ionic-cordova-build",
"devServerTarget": "app:serve",
"customWebpackConfig": {
"path": "./config/webpack.config.js"
}
},
"configurations": {
"production": {
"cordovaBuildTarget": "app:ionic-cordova-build:production",
"devServerTarget": "app:serve:production"
}
}
}

New Architect API for builders

Angular's Architect API is getting refactored.

angular/angular-cli#13463

This is just to keep track of the progress on the Angular side and update the cordova builders we have.

Support custom builder in cordova-serve

In the resolution of issue #32 the capability was added to use browserTarget to specify an arbitrary builder that the cordova-build builder wraps. It would be very helpful to have the analogous capability for cordova-serve: rather than hardcoding DevServerBuilder and extending it, use getBuilder to pick up a specified builder.

It looks, however, like this might not be possible with Angular Architect as it stands now: their DevServerBuilder seems to be grabbing the browser build options out of the specified browserTarget, and doing so internally within run(). That would make an override of buildWebpackConfig() the only place where the browser build options are accessible to modify...and this is not part of the Builder<> interface, only of DevServerBuilder, so this strategy doesn't work for an arbitrary Builder loaded by Architect.

Does this seem right - and if so, is there any resolution coming with the new Angular build API? I haven't been able to find any documentation on the new API, so hard to tell what might be changing with it. This problem throws a bit of a wrench into my development, because my project (which builds for both Cordova and Electron with a single codebase) relies on a custom webpack config to ignore imports of node-provided modules like fs when building for Angular.

A way to generate a page without a module, and link it to the relative module.

I had my hands on Ionic CLI today, and I usually build my apps with Angular CLI. I heard Ionic CLI integrates well with the Angular CLI (or to be more accurate, using angular CLI) so I thought why not give it a try.

Usually, when I start an app, I structure it like so (in a nutshell):

App folder contains all of the modules
Each module (that is not a Core/Shared Module) has pages and dummy components.

I read that there's an option to generate a page, which is simply a component, with a Page suffix instead of Component suffix, and it generates along the way a module for the page, and lastly, it links the generated module to the app routing.

IMO (and people are free to argue about it), the generate page does much more than just creating a new page, and that limits me to build my app with my own structure. I might have 1 module with multiple pages (e.g AuthModule with login, register, and a profile page).

So my alternative is to use the traditional way by creating a new component and not a page. But then, to keep the style guide of Ionic, I would like to have a Page suffix and not a Component suffix. Plus, I would like to link the generated component (which would be a page) to the relative module (e.g AuthModule) and not the AppModule, since I've already linked my AuthModule to AppModule.

Data path "" should have required property 'name'.

After install: npm i @ionic/angular-toolkit

I got this error when I tried to use the ionic generator , (same error for modules, pages...)

ionic g component test2
> ng generate component test2
Schematic input does not validate against the Schema: {"styleext":"scss","inlineStyle":false,"inlineTemplate":false,"changeDetection":"Default","spec":true,"flat":false,"skipImport":false,"export":false,"entryComponent":false,"lintFix":false}
Errors:

  Data path "" should have required property 'name'.
[ERROR] Could not generate component.

Ionic:

   ionic (Ionic CLI)             : 4.5.0
   Ionic Framework               : @ionic/angular 4.0.0-beta.17
   @angular-devkit/build-angular : 0.7.5
   @angular-devkit/schematics    : 0.7.5
   @angular/cli                  : 6.1.5
   @ionic/angular-toolkit        : 1.2.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.2
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.3.1, (and 11 other plugins)

System:

   Android SDK Tools : 26.1.1 
   NodeJS            : v11.4.0
   npm               : 5.6.0
   OS                : Linux 4.15

After uninstalling the toolkit, everything went back to normal.

ionic g page, cli creates 6 files

I encountered to an issue when I want to create a page by ionic cli as follows:
ionic g page list:
then the created pages as follows:
CREATE src/app/list/list-routing.module.ts (339 bytes)
CREATE src/app/list/list.module.ts (458 bytes)
CREATE src/app/list/list.page.html (123 bytes)
CREATE src/app/list/list.page.spec.ts (633 bytes)
CREATE src/app/list/list.page.ts (248 bytes)
CREATE src/app/list/list.page.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (578 bytes)

as you have seen 6 files created!

but when i downgrade @ionic/angular-toolkit : 2.1.1 to 2.0.0 so the issue has been resolved and created files are 5 files as follows:
CREATE src/app/list/list.module.ts (533 bytes)
CREATE src/app/list/list.page.html (123 bytes)
CREATE src/app/list/list.page.spec.ts (677 bytes)
CREATE src/app/list/list.page.ts (248 bytes)
CREATE src/app/list/list.page.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (540 bytes)

I installed latest nodejs and ionic cli as follows:

Ionic CLI : 5.4.13
Ionic Framework : @ionic/angular 4.11.7
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.1.1

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v12.14.0 (C:\Program Files\nodejs\node.exe)
npm : 6.13.4
OS : Windows 10

please check this issue and let me know if you need more info.
Thanks

Angular 8, support

This library is not working with lastest angular 8 versions.
To repoduce just update the angular libraries in the package.json to 8.0.2

Could not find the implementation for builder @ionic/angular-toolkit:cordova-build
Error: Could not find the implementation for builder @ionic/angular-toolkit:cordova-build

Ability to use custom builder

Right now the cordova-build builder is hard-coded to use @angular-devkit/build-angular:browser:

angular-toolkit/builders/cordova-build/index.ts

Line 16 in 7bc2839

 const browserBuilder = new BrowserBuilder(this.context); // TODO: shouldn't this use `architect.getBuilder()`? 

We should be able to use architect.getBuilder() to instantiate a builder from the workspace configuration.

Forward `--source-map` to builder

Ref: ionic-team/ionic-cli#3890

Ionic Generate Application within existing Application

Feature Request

Ionic version:

[x] 4.x

Describe the Feature Request

Please provide the ability to generate a workspace and new libraries and applications within the workspace. I am asking for capabilities equal to "ng generate application", "ng new", and "ng generate library". This would allow people to generate a workspace and multiple projects within the workspace, and shared libraries.
Currently when "ng generate application" is run within an app created with "ionic start" an error is given:

Schematic "e2e" not found in collection "@ionic/angular-toolkit".

No error is given when "ng generate library" is used within an ionic app and code is generated in the "projects" directory, though I am unsure if the code is correct and useful.

Describe Preferred Solution

Either allow "ng generate application" and "ng generate library" to work within an ionic project or create new commands to generate a workspace, library, and sub-application from the ionic cli.

Additional Context

Wrong build path on Windows 10

Summary

Build path is wrong on windows 10. It create a C folder like C:/C/path/to/project/www

Steps to reproduce

Using @ionic/[email protected]
Run ìonic cordova build Android` on Windows 10

Fix

In angular-toolkit/builders/cordova-build/index.ts, line 56
Replace :

browserOptions.outputPath = join(cordovaBasePath, normalize('www'));

By :

browserOptions.outputPath = getSystemPath(join(cordovaBasePath, normalize('www')));

otherwise, outputPath get the following value : /C/path/to/project/www

Unit test for component generator references `.page.ts`

https://github.com/ionic-team/angular-toolkit/blob/master/schematics/component/files/__name%40dasherize%40if-flat__/__name%40dasherize__.component.spec.ts

angular 9 cli livereload -l cause cordova_not_available cordova.js not injected

Bug Report

Ionic version:

[x] 5.x

Current behavior:

ionic cordova run ios -l
casue cordova_not_available

Expected behavior:

works fine with angular 8 cli 8.3.25

Steps to reproduce:

https://github.com/mohamedsharaf/i5ng9
clone repo and run in ios simulator or device with live reload
npm i
ionic cordova run ios -l

you will see that cordova not injected cordova_not_available

Related code:

insert short code snippets here

Other information:

Ionic info:


Ionic:

   Ionic CLI                     : 6.0.2 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.0.0
   @angular-devkit/build-angular : 0.900.1
   @angular-devkit/schematics    : 9.0.1
   @angular/cli                  : 9.0.1
   @ionic/angular-toolkit        : 2.1.2

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

   cordova-res : 0.9.0
   native-run  : 0.3.0

System:

   Android SDK Tools : 26.1.1 (/Users/mohamed/Library/Android/sdk/)
   ios-deploy        : 1.10.0
   ios-sim           : 8.0.2
   NodeJS            : v12.11.1 (/usr/local/Cellar/node/12.11.1/bin/node)
   npm               : 6.13.7
   OS                : macOS Catalina
   Xcode             : Xcode 11.3.1 Build version 11C504

mohamed@mbp i5ng9 %

serialize-javascript high vulnerability

Are there any plans to update serialize-javascript in the near future? As I'm getting a high vulnerability on NPM as of today.

  High            Remote Code Execution

  Package         serialize-javascript

  Patched in      >=3.1.0

  Dependency of   @ionic/angular-toolkit [dev]

  Path            @ionic/angular-toolkit > copy-webpack-plugin >
                  serialize-javascript

  More info       https://npmjs.com/advisories/1548

found 1 vulnerabilities (1 high) in 1570 scanned packages
  1 vulnerability requires manual review. See the full report for details.

Thanks in advance

Cordova build no longer using `www` folder

The IFs in the code below in builders/utils/index.ts will never be true because the CordovaBuildBuilderSchema does not allow outputPath option which results in build dumping files in public folder instead of www.

  // We always need to output the build to `www` because it is a hard
  // requirement of Cordova.
  if ('outputPath' in options) {
    optionsStarter.outputPath = join(cordovaBasePath, normalize('www'));
  }

  // Cordova CLI will error if `www` is missing. The Angular CLI deletes it
  // by default. Let's keep it around.
  if ('deleteOutputPath' in options) {
    optionsStarter.deleteOutputPath = false;
  }

Generate page adds unnecessary padding attribute to ion-content

The template for a new Ionic page includes an unnecessary "padding" attribute on ion-content. This results in a border around the main Ionic app content that looks "off" and less "app-like."

<ion-content padding>

</ion-content>

To reproduce, run this command:
ionic g page test

Then, open up test.page.html to see the "padding" attribute.

Unknown option: '--changeDetection'

Hi,

I can't use changeDetection option with component generator, returns Unknown option

$ ionic info

Ionic:

   Ionic CLI                     : 5.2.6 (/Users/victor.dias/.nvm/versions/node/v12.6.0/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.8.1
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : not available
   Cordova Plugins   : not available

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.6.0 (/Users/victor.dias/.nvm/versions/node/v12.6.0/bin/node)
   npm    : 6.9.0
   OS     : macOS Mojave
$ ng g c items/components/item-headline --changeDetection=OnPush -d
Unknown option: '--changeDetection'

Data path ".builders['cordova-build']" should have required property 'class'

this happen on ios and android after updating to ionic cli v5
and installing cordova-res native-run
testing on emulator

ionic info

Ionic:

Ionic CLI : 5.2.1 (/Users/abdelhakim/.nvm/versions/node/v10.15.1/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.6.0
@angular-devkit/build-angular : 0.800.6
@angular-devkit/schematics : 8.1.0
@angular/cli : 7.2.4
@ionic/angular-toolkit : 2.0.0

Capacitor:

Capacitor CLI : 1.0.0-beta.25
@capacitor/core : 1.0.0-beta.25

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : android 8.0.0, ios 5.0.1
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 14 other plugins)

Utility:

cordova-res : 0.5.2
native-run : 0.2.7

System:

Android SDK Tools : 26.1.1 (/Users/abdelhakim/Library/Android/sdk/)
ios-deploy : 1.9.4
ios-sim : 8.0.1
NodeJS : v10.15.1 (/Users/abdelhakim/.nvm/versions/node/v10.15.1/bin/node)
npm : 6.4.1
OS : macOS Mojave
Xcode : Xcode 10.1 Build version 10B61

ionic generate modal

Feature Request

Describe the Feature Request

I think it would be great to generate a modal. It should add Modal suffix instead of Component for the modal class name. Plus, in case it's an angular app, it would add the modal to entryComponents.

Describe Preferred Solution

ionic generate modal MODAL_PATH

Describe Alternatives

ionic g c my-modal
refactor MyModalComponent to MyModal
add MyModal to app.module.ts > entryComponents

Concerns:

It would be a problem to do ionic g m my-modal since m is for module.

bug: @ionic/angular-toolkit shows warnings in new project

TLDR:
A freshly created ionic app using latest @ionic/cli results in warnings. (Also happens on existing projects using these versions)

warning " > @ionic/[email protected]" has unmet peer dependency "@angular-devkit/architect@>=0.800.0".
(and a few others)

It seems that capacitor libs exhibit the same issue.

ionic --version
6.10.1
yarn --version
1.22.4

ionic start testdeps tabs --capacitor --type=angular
cd testdeps
rm -rf node_modules package-lock.json
yarn install

yarn add @capacitor/ios @capacitor/android

yarn add v1.22.4
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
warning " > @ionic/[email protected]" has unmet peer dependency "@angular-devkit/architect@>=0.800.0".
warning " > @ionic/[email protected]" has unmet peer dependency "@angular-devkit/core@>=8.0.0".
warning " > @ionic/[email protected]" has unmet peer dependency "@angular-devkit/schematics@>=8.0.0".
warning "@ionic/angular-toolkit > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning " > @capacitor/[email protected]" has incorrect peer dependency "@capacitor/core@~2.1.0".
warning " > @capacitor/[email protected]" has incorrect peer dependency "@capacitor/core@~2.1.0".
[4/4] 🔨 Building fresh packages...
success Saved lockfile.
success Saved 2 new dependencies.
info Direct dependencies
├─ @capacitor/[email protected]
└─ @capacitor/[email protected]
info All dependencies
├─ @capacitor/[email protected]
└─ @capacitor/[email protected]
✨ Done in 6.54s.

An unhandled exception occurred: context.getProjectMetadata is not a function

I get this error message, when I try to run my ionic app in the simulator.

An unhandled exception occurred: context.getProjectMetadata is not a function

The command I'm using to run my project (works fine on angular 8, and angular toolkit 2.1)

ionic cordova run ios --livereload --target '...'

Ionic info

`Ionic:

Ionic CLI : 6.1.0 (/Users/user/.nvm/versions/node/v10.19.0/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.0.1
@angular-devkit/build-angular : 0.900.3
@angular-devkit/schematics : 9.0.3
@angular/cli : 9.0.3
@ionic/angular-toolkit : 2.2.0

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : ios 5.1.1
Cordova Plugins : cordova-plugin-ionic-webview 4.1.3, (and 14 other plugins)

Utility:

cordova-res : not installed
native-run : 0.3.0

System:

ios-deploy : 1.10.0
ios-sim : 8.0.2
NodeJS : v10.19.0 (/Users/user/.nvm/versions/node/v10.19.0/bin/node)
npm : 6.13.7
OS : macOS Catalina
Xcode : Xcode 11.3.1 Build version 11C504 `

ng version

`Angular CLI: 9.0.3
Node: 10.19.0
OS: darwin x64

Angular: 9.0.2
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes`

Cordova.js will not be added on livereload with Angular 9

Summary

After updating an app to Angular 9, the cordova.js file will not be added anymore on ionic cordova run with livereload.

The app will start without problems, but will not have any cordova context

Steps to reproduce

Run the following command on Angular 8 app with Ionic: ionic cordova run android -l
The app is working as expected because it will add the cordova.js (can be checked by enter localhost:8100 and you see it)
Upgrade the app to Angular 9 (ng update @angular/cli @angular/core --next=true)
Run the same command as mentioned in step 1. The cordova.js will NOT be added anymore

At the moment I do not have a clue why this is happening, but tested on three apps after upgrading to Angular 9, so Angular seems to have something changed.

Workaround

For the moment, you have to add the cordova.js manually inside the angular.json, e.g. for Android. The same for the assets under platforms/android/platform_www

Unable to install @ionic/angular-toolkit

I recently upgraded my Ionic 4 beta project to Ionic 4.1.0. I tried to npm i --save-dev @ionic/angular-toolkit, however I get an error Not Found: @ionic/angular-toolkit@latest. Here is my project info:

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.0
   @angular-devkit/build-angular : 0.13.3
   @angular-devkit/schematics    : 7.3.3
   @angular/cli                  : 7.3.3
   @ionic/angular-toolkit        : not installed

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4, ios 4.5.5, windows 6.0.1
   Cordova Plugins       : cordova-plugin-ionic 5.3.0, cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.3, (and 12 other plugins)

System:

   ios-deploy : 1.9.4
   NodeJS     : v10.13.0 (/usr/local/bin/node)
   npm        : 6.4.1
   OS         : macOS Sierra
   Xcode      : Xcode 9.2 Build version 9C40b

Custom webpack is not working when using livereload on cordova run

Description

I'm using the auth0 cordova plugin and it requires to add a custom webpack configuration to add a polyfill for the crypto library (see https://auth0.com/docs/quickstart/native/ionic4/01-login#install-the-dependencies ).
This works for normal builds like ionic cordova run android or ionic cordova build android. But when using livereload like ionic cordova run android -l I'm getting the following error while building:

[ng] WARNING in ./node_modules/crypto-js/core.js
[ng] Module not found: Error: Can't resolve 'crypto' in '\node_modules\crypto-js'
[ng] ERROR in ./node_modules/@auth0/cordova/src/crypto.js
[ng] Module not found: Error: Can't resolve 'crypto' in '\node_modules\@auth0\cordova\src'

I think there might be some issue with the configurtion in the "ionic-cordova-serve" section of the angular.json but I couldn't figure out what to change.

Environment

Ionic:

   Ionic CLI                     : 6.6.0
   Ionic Framework               : @ionic/angular 5.0.7
   @angular-devkit/build-angular : 0.901.1
   @angular-devkit/schematics    : 9.1.1
   @angular/cli                  : 9.1.1
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : none
   Cordova Plugins   : no whitelisted plugins (0 plugins total)

Utility:

   cordova-res (update available: 0.12.1) : 0.9.0
   native-run (update available: 1.0.0)   : 0.3.0

System:

   Android SDK Tools : 26.1.1
   NodeJS            : v12.16.2 
   npm               : 6.14.4
   OS                : Windows 10

Dependencies

"dependencies": {
    "@angular/common": "~9.1.2",
    "@angular/core": "~9.1.2",
    "@angular/forms": "~9.1.2",
    "@angular/platform-browser": "~9.1.2",
    "@angular/platform-browser-dynamic": "~9.1.2",
    "@angular/router": "~9.1.2",
    "@auth0/angular-jwt": "^4.0.0",
    "@auth0/cordova": "^0.4.3",
    "@ionic-native/android-fingerprint-auth": "^5.24.0",
    "@ionic-native/core": "^5.24.0",
    "@ionic-native/network": "^5.24.0",
    "@ionic-native/safari-view-controller": "^5.24.0",
    "@ionic-native/splash-screen": "^5.24.0",
    "@ionic-native/status-bar": "^5.24.0",
    "@ionic/angular": "^5.0.7",
    "@ionic/storage": "^2.2.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@sentry/wizard": "^1.0.2",
    "auth0-js": "^9.13.2",
    "cordova-android": "^8.1.0",
    "cordova-plugin-android-fingerprint-auth": "^1.5.0",
    "cordova-plugin-customurlscheme": "^5.0.1",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^4.2.0",
    "cordova-plugin-network-information": "^2.0.2",
    "cordova-plugin-safariviewcontroller": "^1.6.0",
    "cordova-plugin-splashscreen": "^5.0.3",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "core-js": "^2.5.4",
    "crypto-js": "^4.0.0",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.28",
    "rxjs": "~6.5.5",
    "sentry-cordova": "^0.17.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^9.1.0",
    "@angular-devkit/architect": "~0.901.1",
    "@angular-devkit/build-angular": "~0.901.1",
    "@angular-devkit/core": "~9.1.1",
    "@angular-devkit/schematics": "~9.1.1",
    "@angular/cli": "~9.1.1",
    "@angular/compiler": "~9.1.2",
    "@angular/compiler-cli": "~9.1.2",
    "@angular/language-service": "~9.1.2",
    "@ionic/angular-toolkit": "^2.2.0",
    "@types/auth0-js": "^9.12.4",
    "@types/crypto-js": "^3.1.44",
    "@types/jasmine": "~3.5.10",
    "@types/jasminewd2": "~2.0.8",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.5.13",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "sharp": "^0.24.1",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.8.3"
  },

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "defaultProject": "app",
  "newProjectRoot": "projects",
  "projects": {
    "app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "webpack.config.js"
            },
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              },
              {
                "glob": "**/*.svg",
                "input": "node_modules/ionicons/dist/ionicons/svg",
                "output": "./svg"
              }
            ],
            "styles": [
              {
                "input": "src/theme/variables.scss"
              },
              {
                "input": "src/global.scss"
              }
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            },
            "ci": {
              "progress": false
            }
          }
        },
        "serve": {
          "builder": "@angular-builders/custom-webpack:dev-server",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            },
            "ci": {
              "progress": false
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "app:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "styles": [],
            "scripts": [],
            "assets": [
              {
                "glob": "favicon.ico",
                "input": "src/",
                "output": "/"
              },
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "/assets"
              }
            ]
          },
          "configurations": {
            "ci": {
              "progress": false,
              "watch": false
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": ["**/node_modules/**"]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "app:serve:production"
            },
            "ci": {
              "devServerTarget": "app:serve:ci"
            }
          }
        },
        "ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "app:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "app:build:production"
            }
          }
        },
        "ionic-cordova-serve": {
          "builder": "@ionic/angular-toolkit:cordova-serve",
          "options": {
            "cordovaBuildTarget": "app:ionic-cordova-build",
            "devServerTarget": "app:serve"
          },
          "configurations": {
            "production": {
              "cordovaBuildTarget": "app:ionic-cordova-build:production",
              "devServerTarget": "app:serve:production"
            }
          }
        }
      }
    }
  },
  "cli": {
    "defaultCollection": "@ionic/angular-toolkit"
  },
  "schematics": {
    "@ionic/angular-toolkit:component": {
      "styleext": "scss"
    },
    "@ionic/angular-toolkit:page": {
      "styleext": "scss"
    }
  }
}

[request] CLI register page module to current router

I think ionic g pg command should page module to current router.
Now, all page module registered to src/app/app-routing.module.ts .

For example:
in tabs template, $ ionic g pg tab1/sample register SamplePageModule to src/app/app-routing.module.ts. I expect register to src/tab1/tab1.module.ts. generate pipe works like this.

Thanks.

bug: Angular "ionic g page SomeName --no-module" is broken

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

Create an app with ionic start --type=angular my-app blank
Go to new directory and run: ionic generate page SomeName --no-module
Output:

> ng generate page SomeName --module=false --project=app
Specified module does not exist
[ERROR] Could not generate page.

It does not generate a page

Expected behavior:

Expected it to generate a page

Steps to reproduce:

See above

Ionic info:

Ionic:

   Ionic CLI                     : 6.10.1 (/Users/ammulder/.nvm/versions/node/v12.18.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.2
   @angular-devkit/build-angular : 0.901.9
   @angular-devkit/schematics    : 9.1.9
   @angular/cli                  : 9.1.9
   @ionic/angular-toolkit        : 2.2.0

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.18.1 (/Users/ammulder/.nvm/versions/node/v12.18.1/bin/node)
   npm    : 6.14.5
   OS     : macOS Catalina

Cannot destructure property `styles` of 'undefined' or 'null'.

Hey!

I get the following error, when I update @ionic/angular-toolkit from v1.4.1 to v1.5.0:

> ng run app:ionic-cordova-serve --host=0.0.0.0 --port=8100 --cordova-mock
[ng] Cannot destructure property `styles` of 'undefined' or 'null'.
[ng] TypeError: Cannot destructure property `styles` of 'undefined' or 'null'.
[ng]     at Object.getCommonConfig (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs/common.js:33:107)
[ng]     at BrowserBuilder.buildWebpackConfig (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular-devkit/build-angular/src/browser/index.js:81:31)
[ng]     at CordovaDevServerBuilder.buildWebpackConfig (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular-devkit/build-angular/src/dev-server/index.js:109:46)
[ng]     at CordovaDevServerBuilder.buildWebpackConfig (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@ionic/angular-toolkit/builders/cordova-serve/index.js:47:22)
[ng]     at MergeMapSubscriber.rxjs_1.from.pipe.operators_1.concatMap [as project] (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular-devkit/build-angular/src/dev-server/index.js:36:40)
[ng]     at MergeMapSubscriber._tryNext (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/operators/mergeMap.js:69:27)
[ng]     at MergeMapSubscriber._next (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/operators/mergeMap.js:59:18)
[ng]     at MergeMapSubscriber.Subscriber.next (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/Subscriber.js:67:18)
[ng]     at TapSubscriber._next (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/operators/tap.js:65:26)
[ng]     at TapSubscriber.Subscriber.next (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/Subscriber.js:67:18)
[ng]     at MergeMapSubscriber.notifyNext (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/operators/mergeMap.js:92:26)
[ng]     at InnerSubscriber._next (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/InnerSubscriber.js:28:21)
[ng]     at InnerSubscriber.Subscriber.next (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular-devkit/build-angular/node_modules/rxjs/internal/Subscriber.js:67:18)
[ng]     at SafeSubscriber.__tryOrUnsub (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular/cli/node_modules/@angular-devkit/architect/node_modules/rxjs/internal/Subscriber.js:209:16)
[ng]     at SafeSubscriber.next (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular/cli/node_modules/@angular-devkit/architect/node_modules/rxjs/internal/Subscriber.js:147:22)
[ng]     at Subscriber._next (/Users/carstenbaumhoegger/Docker/tabya/bauhofmanagement/frontend/mobile/node_modules/@angular/cli/node_modules/@angular-devkit/architect/node_modules/rxjs/internal/Subscriber.js:90:26)

[ERROR] ng has unexpectedly closed (exit code 1).

Here's my ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.2
   @angular-devkit/build-angular : 0.13.6
   @angular-devkit/schematics    : 7.3.6
   @angular/cli                  : 7.3.1
   @ionic/angular-toolkit        : 1.5.0

Cordova:

   cordova (Cordova CLI) : 8.1.2 ([email protected])
   Cordova Platforms     : android 7.1.4, ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.0.0, (and 11 other plugins)

System:

   ios-deploy : 1.9.4
   NodeJS     : v10.15.0 (/usr/local/bin/node)
   npm        : 6.8.0
   OS         : macOS Mojave
   Xcode      : Xcode 10.2 Build version 10E125

There are no breaking changes mentioned in the Changelog, so I'm wondering what I have to change to get the update working?

Does not support angular schematics

From an existing angular project. After running ng add @ionic/angular.

Installing packages for tooling via yarn.
yarn add v1.16.0
[1/4] Resolving packages...
[2/4] Fetching packages...
info [email protected]: The platform "linux" is incompatible with this module.
info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 3 new dependencies.
info Direct dependencies
└─ @ionic/[email protected]
info All dependencies
├─ @ionic/[email protected]
├─ @ionic/[email protected]
└─ [email protected]
Done in 16.14s.
Installed packages for tooling via yarn.
The package that you are trying to add does not support schematics. You can try using a different version of the package or contact the package author to add ng-add support.

> ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 8.0.3
Node: 11.15.0
OS: linux x64
Angular: 8.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.3
@angular-devkit/build-angular     0.800.3
@angular-devkit/build-optimizer   0.800.3
@angular-devkit/build-webpack     0.800.3
@angular-devkit/core              8.0.3
@angular-devkit/schematics        8.0.3
@angular/cli                      8.0.3
@ngtools/webpack                  8.0.3
@schematics/angular               8.0.3
@schematics/update                0.800.3
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.30.0

--changeDetection=OnPush doesn't work on Ionic 5/ Angular 9 project

Hi,

I need to generate Components with --changeDetection=OnPush. But it is not working.

Error:

$ ionic g component components/client/shipping-service-type --changeDetection=OnPush
> ng.cmd generate component components/client/shipping-service-type --change-detection=OnPush --project=app
Unknown option: '--change-detection'
[ERROR] Could not generate component.

Ionic:

Ionic CLI : 6.9.2 (C:\Users\Sampath\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.901.5
@angular-devkit/schematics : 9.1.5
@angular/cli : 9.1.5
@ionic/angular-toolkit : 2.1.1

Capacitor:

Capacitor CLI : 2.1.0
@capacitor/core : 2.1.0

Utility:

cordova-res (update available: 0.9.0) : 0.8.1
native-run (update available: 0.3.0) : 0.2.5

System:

NodeJS : v12.13.1 (C:\Program Files\nodejs\node.exe)
npm : 6.12.1
OS : Windows 10

No cordova.js added to index.html without "scripts" property in angular.json

Hi,
I just spent hours investigating why cordova.js wasn't included in the final index.html of my Ionic project. It looks like after updating to Angular 8 / Ionic toolkit 2.0.0 I have to add "scripts" property to angular.json's build section even if I don't have any additional scripts to configure.
This is really weird behavior and should be documented or a warning given at least. Better yet Ionic toolkit should be updated to add cordova.js without checking for "scripts" in options.

Custom webpack support

I'm trying to use React with ionic 4 out of the box. I started out with a blank ionic project with
ionic start react-test blank --type=angular and used custom builders to add additional configuration to webpack (for JSX, babel-preset-react, etc).

However, I'm not able to use Cordova that way as it is inject via ionic cli during the build process. This is a request to provide extensibility in the builder @ionic/angular-toolkit:cordova-serve.

Reference: ionic-team/ionic-framework#15893 (comment)

No build path with angular 8+

Versions :

Angular 8+
Ionic Angular 5
"@angular-devkit/architect": "0.803.25",
"@angular-devkit/build-angular": "0.803.25",
"@angular-builders/custom-webpack": "8.4.1",
"@angular-devkit/core": "8.3.25",
"@angular-devkit/schematics": "8.3.25",
"@angular/cli": "8.3.25",
"@angular/compiler": "8.2.14",
"@angular/compiler-cli": "8.2.14",
"@angular/language-service": "8.2.14",
"@ionic/angular-toolkit": "2.1.2",
"@ionic/app-scripts": "3.2.4",

In angular json


"ionic-cordova-build": {
          "builder": "@ionic/angular-toolkit:cordova-build",
          "options": {
            "browserTarget": "ea6-nie-ep-front-mobile:build"
          },
          "configurations": {
            "local-cordova": {
              "browserTarget": "ea6-nie-ep-front-mobile:build:local-cordova"
            }
          }
        },

And 

"build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "webpack.config.js"
            },
            "outputPath": "dist/ea6-nie-ep-front-mobile",
            "index": "ea6-nie-ep-front-mobile/src/index.html",
            "main": "ea6-nie-ep-front-mobile/src/main.ts",
            "polyfills": "ea6-nie-ep-front-mobile/src/polyfills.ts",
            "tsConfig": "ea6-nie-ep-front-mobile/src/tsconfig.app.json",
            "scripts": []
          },
          "configurations": {
      
            "local-cordova": {
              "fileReplacements": [
                {
                  "replace": "ea6-nie-ep-front-mobile/src/environments/environment.ts",
                  "with": "ea6-nie-ep-front-mobile/src/environments/environment.local.ts"
                }
              ],
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "10mb"
                }
              ],
              "serviceWorker": true,
              "ngswConfigPath": "src/ngsw-config.json",
              "baseHref": "/"
            }
          }
        },


`

The problem is with ionic cordova build or run the outputPath is not in the options but in the browserBuildTargetOptions so the cordova outputPath is never set because of the condition line 25 :
if ('outputPath' in options) {

after update to 1.2.2 ionic cordova build fails

after the update the command
ionic cordova build ios
fails with the warning that the directory is not a cordova path apparently due to the missing www folder

reverting to 1.2.0 fixed this behaviour

New pages should have a separate routing module

Routes are currently defined in the .module.ts:

angular-toolkit/schematics/page/files/__name@dasherize@if-flat__/__name@dasherize__.module.ts

Lines 10 to 15 in 7bc2839

 const routes: Routes = [ 

 { 

 path: '', 

 component: <%= classify(name) %>Page 

 } 

 ];

Angular recommends integrating routing with a separate -routing.module.ts.

	const routes: Routes = [
	{
	path: '',
	component: <%= classify(name) %>Page
	}
	];

ionic-team / angular-toolkit Goto Github PK

angular-toolkit's People

Contributors

Stargazers

Watchers

Forkers

angular-toolkit's Issues

Feature Request

Bug Report

Ionic Version: 4.10.2

Feature Request

Feature Request

Bug Report

Feature Request

Describe the Feature Request

Describe Preferred Solution

Describe Alternatives

Concerns:

Description

Environment

Dependencies

angular.json

Bug Report

Recommend Projects

Recommend Topics

Recommend Org

Jobs