fix: TypeScript 4.1, stylesheet ext handling, proper project parse (#315)

* chore: bump TS v4.1

* fix: properly parsing project object

* fix: read style sheet extension from project object

* docs: update README instruction default scss extension

Author: agonper

README.md

@@ -68,7 +68,12 @@ You need to add an `angular.json` configuration file to your NativeScript projec
       "root": "",
       "sourceRoot": ".",
       "projectType": "application",
-      "prefix": "app"
+      "prefix": "app",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        }
+      }
     }
   },
   "defaultProject": "project-name"

package.json

@@ -41,7 +41,7 @@
     "jasmine": "^3.5.0",
     "jasmine-spec-reporter": "^5.0.2",
     "tslint": "~6.1.0",
-    "typescript": "~4.0.0"
+    "typescript": "~4.1.0"
   },
   "repository": {
     "type": "git",

src/angular-project-parser.ts

@@ -1,14 +1,11 @@
 import * as ts from 'typescript';
 import { basename } from 'path';
-import { Tree, SchematicsException } from '@angular-devkit/schematics';
-import {
-  findBootstrapModuleCall,
-  findBootstrapModulePath,
-} from '@schematics/angular/utility/ng-ast-utils';
+import { SchematicsException, Tree } from '@angular-devkit/schematics';
+import { findBootstrapModuleCall, findBootstrapModulePath } from '@schematics/angular/utility/ng-ast-utils';
 import { getWorkspace } from '@schematics/angular/utility/workspace';
 
 import { safeGet } from './utils';
-import { findNode, findImportPath, getSourceFile } from './ts-utils';
+import { findImportPath, findNode, getSourceFile } from './ts-utils';
 
 export interface AngularProjectSettings {
   /** default: '' */
@@ -128,7 +125,7 @@ async function getCoreProjectSettings(tree: Tree, projectName: string): Promise<
     );
   }
 
-  const buildTarget = targets.build;
+  const buildTarget = targets.get('build');
   if (!buildTarget) {
     throw new SchematicsException(
       `Failed to find build target for project ${projectName}!`,
@@ -139,7 +136,7 @@ async function getCoreProjectSettings(tree: Tree, projectName: string): Promise<
   const sourceRoot = project.sourceRoot || 'src';
   const mainPath = safeGet(buildTarget, 'options', 'main');
   const mainName = mainPath && basename(mainPath).replace(/\.ts$/, '');
-  const prefix = project.prefix;
+  const prefix = project.prefix as string;
   const tsConfig = safeGet(buildTarget, 'options', 'tsConfig');
 
   return {
@@ -154,21 +151,20 @@ async function getCoreProjectSettings(tree: Tree, projectName: string): Promise<
 
 export async function getTsConfigFromProject(tree: Tree, projectName: string) {
   const { targets } = await parseAngularConfig(tree, projectName);
-  const tsConfig = safeGet(targets, 'build', 'options', 'tsConfig');
 
-  return tsConfig;
+  return safeGet(targets, 'build', 'options', 'tsConfig');
 }
 
 async function parseAngularConfig(tree, projectName: string) {
   const project = await getProjectObject(tree, projectName);
-  const targets = project.architect;
+  const targets = project.targets;
 
   return { targets, project };
 }
 
 export async function getProjectObject(tree: Tree, projectName: string) {
   const workspace = await getWorkspace(tree);
-  const project = workspace.projects[projectName];
+  const project = workspace.projects.get(projectName);
   if (!project) {
     throw new SchematicsException(`Couldn't find project "${projectName}" in the workspace!`);
   }

src/generate/component/index.ts

@@ -45,25 +45,29 @@ let extensions: Extensions;
 export default function(options: ComponentOptions): Rule {
   let platformUse: PlatformUse;
   let componentInfo: ComponentInfo;
+
   return chain([
-    (tree: Tree) => {
-      platformUse = getPlatformUse(tree, options);
+    async (tree: Tree) => {
+      const projectObject = await getProjectObject(tree, options.project);
 
-      if (platformUse.nsOnly && options.spec !== true) {
-        options.spec = false;
-      }
+      return () => {
+        platformUse = getPlatformUse(tree, options);
 
-      const projectObject: any = getProjectObject(tree, options.project);
-      const style = (projectObject && projectObject.schematics && projectObject.schematics['@schematics/angular:component']
-        && projectObject.schematics['@schematics/angular:component'].style);
-      if (style) {
-        options.style = style;
-      }
+        if (platformUse.nsOnly && options.spec !== true) {
+          options.spec = false;
+        }
 
-      validateGenerateOptions(platformUse, options);
-      validateGenerateComponentOptions(platformUse, options);
+        const style = (projectObject && projectObject.extensions.schematics && projectObject.extensions.schematics['@schematics/angular:component']
+          && projectObject.extensions.schematics['@schematics/angular:component'].style);
+        if (style) {
+          options.style = style;
+        }
 
-      return tree;
+        validateGenerateOptions(platformUse, options);
+        validateGenerateComponentOptions(platformUse, options);
+
+        return tree;
+      }
     },
 
     () => externalSchematic(