feat(angular): v9 support (#276)

README.md

@@ -6,7 +6,7 @@ This repository contains schematics for generating components in NativeScript An
 
 ### Install Angular CLI
 
-You should be using `@angular/cli@6.1.0` or newer.
+You should be using `@angular/cli@9.1.0` or newer.
 
 ```bash
 npm i -g @angular/cli
@@ -141,8 +141,8 @@ This includes the following steps:
 In a code sharing project to build:
 
  * a `web` app call: `ng serve`,
- * an `iOS` app call: `tns run ios --bundle`,
- * an `Android` app call: `tns run android --bundle`
+ * an `iOS` app call: `tns run ios --bundle --env.aot`,
+ * an `Android` app call: `tns run android --bundle --env.aot`
 
 ## Templates
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativescript/schematics",
-  "version": "1.0.0",
+  "version": "9.0.0",
   "description": "Schematics for NativeScript Angular apps.",
   "scripts": {
     "build": "tsc -p tsconfig.json",
@@ -17,20 +17,21 @@
   },
   "schematics": "./src/collection.json",
   "dependencies": {
-    "@angular-devkit/core": "~8.2.0",
-    "@angular-devkit/schematics": "~8.2.0",
-    "@nativescript/tslint-rules": "~0.0.3",
-    "@phenomnomnominal/tsquery": "^3.0.0"
+    "@angular-devkit/core": "~9.1.0",
+    "@angular-devkit/schematics": "~9.1.0",
+    "@nativescript/tslint-rules": "~0.0.5",
+    "@phenomnomnominal/tsquery": "^4.1.0"
   },
   "devDependencies": {
-    "@schematics/angular": "~8.2.0",
-    "@types/jasmine": "^2.6.0",
-    "@types/node": "^8.0.31",
+    "@schematics/angular": "~9.1.0",
+    "@types/jasmine": "~3.5.0",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/node": "^12.11.1",
     "conventional-changelog-cli": "^2.0.1",
     "jasmine": "^2.8.0",
     "jasmine-spec-reporter": "^4.2.1",
-    "tslint": "^5.18.0",
-    "typescript": "3.5.3"
+    "tslint": "~6.1.0",
+    "typescript": "~3.8.3"
   },
   "repository": {
     "type": "git",
@@ -55,4 +56,4 @@
     "Sebastian Witalec <Sebastian.Witalec@progress.com>"
   ],
   "license": "Apache-2.0"
-}
+}

src/add-ns/_ns-files/__sourceDir__/app/__entryModuleName@dasherize__.module__nsext__.ts

@@ -1,16 +1,13 @@
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
+import { NativeScriptModule } from '@nativescript/angular';
 
 import { AppRoutingModule } from './app-routing.module<%= nsext %>';
 import { <%= entryComponentClassName %> } from '<%= entryComponentImportPath %>';
 <% if (sample) { %>
 import { BarcelonaModule } from './barcelona/barcelona.module';<% } %>
 
-// Uncomment and add to NgModule imports if you need to use two-way binding
-// import { NativeScriptFormsModule } from 'nativescript-angular/forms';
-
-// Uncomment and add to NgModule imports  if you need to use the HTTP wrapper
-// import { NativeScriptHttpClientModule } from 'nativescript-angular/http-client';
+// Uncomment and add to NgModule imports if you need to use two-way binding and/or HTTP wrapper
+// import { NativeScriptFormsModule, NativeScriptHttpClientModule } from '@nativescript/angular';
 
 @NgModule({
   declarations: [

src/add-ns/_ns-files/__sourceDir__/app/app-routing.module__nsext__.ts

@@ -1,5 +1,5 @@
 import { NgModule } from '@angular/core';
-import { NativeScriptRouterModule } from 'nativescript-angular/router';
+import { NativeScriptRouterModule } from '@nativescript/angular';
 import { Routes } from '@angular/router';
 <% if (!skipAutoGeneratedComponent) { %>
 import { AutoGeneratedComponent } from './auto-generated/auto-generated.component';

src/add-ns/_ns-files/__sourceDir__/main__nsext__.ts

@@ -1,5 +1,5 @@
 // this import should be first in order to load some required settings (like globals and reflect-metadata)
-import { platformNativeScriptDynamic } from 'nativescript-angular/platform';
+import { platformNativeScriptDynamic } from '@nativescript/angular/platform';
 
 import { <%= entryModuleClassName %> } from '<%= entryModuleImportPath %>';
 

src/add-ns/_ns-files/ngcc.config.js

@@ -0,0 +1,19 @@
+module.exports = {
+  packages: {
+    "@nativescript/angular": {
+      entryPoints: {
+        ".": {
+          override: {
+            main: "./index.js",
+            typings: "./index.d.ts",
+          },
+          ignoreMissingDependencies: true,
+        }
+      },
+      ignorableDeepImportMatchers: [
+        /tns-core-modules\//,
+        /@nativescript\/core\//,
+      ]
+    }
+  }
+};

src/add-ns/_ns-files/tsconfig__nsext__.json

@@ -1,7 +1,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "module": "es2015",
+    "module": "ESNext",
     "moduleResolution": "node",
     "skipLibCheck": true,
     "paths": {

src/add-ns/_sample-files/barcelona/barcelona.module__nsext__.ts

@@ -1,6 +1,5 @@
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { NativeScriptCommonModule } from 'nativescript-angular/common';
-import { NativeScriptRouterModule } from 'nativescript-angular/router';
+import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
 
 import {
   componentDeclarations,
@@ -11,7 +10,6 @@ import {
 @NgModule({
   imports: [
     NativeScriptCommonModule,
-    NativeScriptRouterModule,
     NativeScriptRouterModule.forRoot(routes)
   ],
   exports: [

src/add-ns/index.ts

@@ -223,10 +223,12 @@ const addRunScriptsToPackageJson = (tree: Tree, context: SchematicContext) => {
   const packageJson = getPackageJson(tree);
 
   const scriptsToAdd = {
-    android: 'tns run android',
-    ios: 'tns run ios',
+    android: 'tns run android --env.aot',
+    ios: 'tns run ios --env.aot',
     mobile: 'tns run',
     preview: 'tns preview',
+    ngcc: 'ngcc --properties es2015 module main --first-only',
+    postinstall: 'npm run ngcc'
   };
   packageJson.scripts = {...scriptsToAdd, ...packageJson.scripts};
 
@@ -362,17 +364,17 @@ const addDependencies = () => (tree: Tree, context: SchematicContext) => {
 
   // @UPGRADE: Update all versions whenever {N} version updates
   const depsToAdd = {
-    'nativescript-angular': '~8.20.0',
+    '@nativescript/angular': '~9.0.0',
+    '@nativescript/core': '~6.5.5',
     '@nativescript/theme': '~2.2.1',
     'reflect-metadata': '~0.1.12',
-    'tns-core-modules': '~6.3.0',
     'tslib': '1.10.0',
   };
   packageJson.dependencies = {...depsToAdd, ...packageJson.dependencies};
 
   const devDepsToAdd = {
-    'nativescript-dev-webpack': '~1.4.0',
-    '@nativescript/schematics': '~1.0.0',
+    'nativescript-dev-webpack': '~1.5.0',
+    '@nativescript/schematics': '~2.0.0',
     '@nativescript/tslint-rules': '~0.0.5',
   };
   packageJson.devDependencies = {...devDepsToAdd, ...packageJson.devDependencies};

src/add-ns/index_spec.ts

@@ -8,7 +8,7 @@ import { getFileContent } from '@schematics/angular/utility/test';
 
 describe('Add {N} schematic', () => {
     const schematicRunner = new SchematicTestRunner(
-        'nativescript-schematics',
+        '@nativescript/schematics',
         resolve(__dirname, '../collection.json'),
     );
     const project = 'foo';
@@ -44,6 +44,7 @@ describe('Add {N} schematic', () => {
         it('should add {N} specific files', () => {
             const files = appTree.files;
 
+            expect(files).toContain('/ngcc.config.js');
             expect(files).toContain('/nsconfig.json');
             expect(files).toContain('/tsconfig.tns.json');
             expect(files).toContain('/src/app.css');
@@ -77,9 +78,9 @@ describe('Add {N} schematic', () => {
             const packageJson = JSON.parse(getFileContent(appTree, packageJsonPath));
             const { dependencies, devDependencies } = packageJson;
             expect(dependencies).toBeDefined();
-            expect(dependencies['nativescript-angular']).toBeDefined();
+            expect(dependencies['@nativescript/angular']).toBeDefined();
             expect(dependencies['@nativescript/theme']).toBeDefined();
-            expect(dependencies['tns-core-modules']).toBeDefined();
+            expect(dependencies['@nativescript/core']).toBeDefined();
             expect(dependencies['reflect-metadata']).toBeDefined();
 
             expect(devDependencies['nativescript-dev-webpack']).toBeDefined();
@@ -94,8 +95,10 @@ describe('Add {N} schematic', () => {
             const packageJson = JSON.parse(getFileContent(appTree, packageJsonPath));
             const { scripts } = packageJson;
             expect(scripts).toBeDefined();
-            expect(scripts.android).toEqual('tns run android');
-            expect(scripts.ios).toEqual('tns run ios');
+            expect(scripts.android).toEqual('tns run android --env.aot');
+            expect(scripts.ios).toEqual('tns run ios --env.aot');
+            expect(scripts.ngcc).toEqual('ngcc --properties es2015 module main --first-only');
+            expect(scripts.postinstall).toEqual('npm run ngcc');
         });
 
         it('should add NativeScript key to the package json', () => {

src/angular-json/index_spec.ts

@@ -5,7 +5,7 @@ import { Schema as angularJsonOptions } from './schema';
 
 describe('Angular JSON Config Schematic', () => {
   const schematicRunner = new SchematicTestRunner(
-    'nativescript-schematics',
+    '@nativescript/schematics',
     path.join(__dirname, '../collection.json'),
   );
 

src/collection.json

@@ -68,12 +68,6 @@
       "schema": "./add-ns/schema.json"
     },
 
-    "refactor-nsng-modules": {
-        "factory": "./refactor-nsng-modules",
-        "description": "Upgrades existing {N} Angular projects.",
-        "schema": "./refactor-nsng-modules/schema.json"
-    },
-
     "class": {
       "aliases": [ "cl" ],
       "extends": "@schematics/angular:class"

src/convert-relative-imports/index_spec.ts

@@ -27,7 +27,7 @@ const fixedImportContent = `
 
 describe('Convert relative imports to mapped imports', () => {
   const schematicRunner = new SchematicTestRunner(
-    'nativescript-schematics',
+    '@nativescript/schematics',
     join(__dirname, '../collection.json'),
   );
 

src/generate-template/master-detail/_files-nsonly/__name__/__master__.module.ts

@@ -1,7 +1,6 @@
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
 import { Routes } from '@angular/router';
-import { NativeScriptCommonModule } from 'nativescript-angular/common';
-import { NativeScriptRouterModule } from 'nativescript-angular/router';
+import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
 
 import { <%= masterClassName %>Component } from './<%= master %>/<%= master %>.component';
 import { <%= detailClassName %>DetailComponent } from './<%= detail %>-detail/<%= detail %>-detail.component';
@@ -14,7 +13,6 @@ export const routes: Routes = [
 @NgModule({
   imports: [
     NativeScriptCommonModule,
-    NativeScriptRouterModule,
     NativeScriptRouterModule.forRoot(routes)
   ],
   exports: [

src/generate-template/master-detail/_files-shared/__name__/__master__.module__nsext__.ts

@@ -1,6 +1,5 @@
 import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
-import { NativeScriptCommonModule } from 'nativescript-angular/common';
-import { NativeScriptRouterModule } from 'nativescript-angular/router';
+import { NativeScriptCommonModule, NativeScriptRouterModule } from '@nativescript/angular';
 
 import {
   componentDeclarations,
@@ -10,7 +9,6 @@ import {
 @NgModule({
   imports: [
     NativeScriptCommonModule,
-    NativeScriptRouterModule,
     NativeScriptRouterModule.forRoot(routes)
   ],
   exports: [

src/generate-template/master-detail/index_spec.ts

@@ -24,7 +24,7 @@ describe('Master-detail schematic', () => {
   };
 
   const schematicRunner = new SchematicTestRunner(
-    'nativescript-schematics',
+    '@nativescript/schematics',
     join(__dirname, '../../collection.json'),
   );
 

src/generate/component/index.ts

@@ -55,10 +55,10 @@ export default function(options: ComponentOptions): Rule {
       }
 
       const projectObject = getProjectObject(tree, options.project);
-      const styleext = (projectObject && projectObject.schematics && projectObject.schematics['@schematics/angular:component']
+      const style = (projectObject && projectObject.schematics && projectObject.schematics['@schematics/angular:component']
         && projectObject.schematics['@schematics/angular:component'].style);
-      if (styleext) {
-        options.styleext = styleext;
+      if (style) {
+        options.style = style;
       }
 
       validateGenerateOptions(platformUse, options);
@@ -162,7 +162,7 @@ const parseComponentInfo = (tree: Tree, options: ComponentOptions): ComponentInf
   const templateName = `/${component.name}.component.html`;
   component.templatePath = getGeneratedFilePath(templateName);
 
-  const stylesheetName = `/${component.name}.component.${options.styleext}`;
+  const stylesheetName = `/${component.name}.component.${options.style}`;
   component.stylesheetPath = getGeneratedFilePath(stylesheetName);
 
   return component;

src/generate/component/index_spec.ts

@@ -21,7 +21,7 @@ describe('Component Schematic', () => {
 
   const defaultOptions: ComponentOptions = { name, project };
   const schematicRunner = new SchematicTestRunner(
-    'nativescript-schematics',
+    '@nativescript/schematics',
     join(__dirname, '../../collection.json'),
   );
 
@@ -34,8 +34,8 @@ describe('Component Schematic', () => {
   const nsTemplatePath = getTemplatePath(DEFAULT_SHARED_EXTENSIONS.ns);
   const webTemplatePath = getTemplatePath(DEFAULT_SHARED_EXTENSIONS.web);
 
-  const getStylesheetPath = (extension: string, styleExtension: string = 'css') =>
-    `src/app/${name}/${name}.component${extension}.${styleExtension}`;
+  const getStylesheetPath = (extension: string, style: string = 'css') =>
+    `src/app/${name}/${name}.component${extension}.${style}`;
   const noExtensionStylesheetPath = getStylesheetPath('');
   const nsStylesheetPath = getStylesheetPath(DEFAULT_SHARED_EXTENSIONS.ns);
   const webStylesheetPath = getStylesheetPath(DEFAULT_SHARED_EXTENSIONS.web);
@@ -217,11 +217,11 @@ describe('Component Schematic', () => {
       });
 
       it('should respect specified style extension', async () => {
-        const styleext = 'scss';
-        const options = { ...defaultOptions, nsExtension: customExtension, styleext, nativescript: true };
+        const style = 'scss';
+        const options = { ...defaultOptions, nsExtension: customExtension, style, nativescript: true };
         appTree = await schematicRunner.runSchematicAsync('component', options, appTree).toPromise();
 
-        const componentStylesheetPath = getStylesheetPath(customExtension, styleext);
+        const componentStylesheetPath = getStylesheetPath(customExtension, style);
         expect(appTree.exists(componentStylesheetPath)).toBeTruthy();
       });
     });

src/generate/component/schema.d.ts

@@ -60,7 +60,7 @@ export interface Schema {
   /**
    * The file extension to be used for style files.
    */
-  styleext?: string;
+  style?: string;
   /**
    * Specifies if a spec file is generated.
    */

src/generate/component/schema.json

@@ -84,7 +84,7 @@
         }
       ]
     },
-    "styleext": {
+    "style": {
       "description": "The file extension to be used for style files.",
       "type": "string",
       "default": "css"

src/generate/module/index.ts

@@ -228,7 +228,7 @@ const ensureNsRouting = (tree: Tree, path: string) => {
 
   const importFrom = `, NativeScriptRouterModule } from '@angular/router';`;
   const importTo = ` } from '@angular/router';
-import { NativeScriptRouterModule } from 'nativescript-angular/router';`;
+import { NativeScriptRouterModule } from '@nativescript/angular';`;
 
   const newText = fileText.replace(/RouterModule/g, 'NativeScriptRouterModule')
     .replace(importFrom, importTo);
@@ -270,7 +270,7 @@ const addNSRouterModule = (tree: Tree, routingModulePath: string) => {
   const addedImport = addSymbolToNgModuleMetadata(
     moduleSource, routingModulePath,
     'imports', `${moduleName}.forChild(routes)`,
-    'nativescript-angular/router'
+    '@nativescript/angular'
   );
   const importRecorder = tree.beginUpdate(routingModulePath);
 
@@ -335,7 +335,7 @@ const addNSCommonModule = (tree: Tree, modulePath: string) => {
   const metadataChange = addSymbolToNgModuleMetadata(
     moduleSource, modulePath,
     'imports', 'NativeScriptCommonModule',
-    'nativescript-angular/common');
+    '@nativescript/angular');
 
   metadataChange.forEach((change: InsertChange) =>
     recorder.insertRight(change.pos, change.toAdd),