fix(@schematics/angular): Update the new app structure

Author: Brocco

packages/angular/pwa/pwa/index_spec.ts

@@ -37,7 +37,6 @@ describe('PWA Schematic', () => {
  name: 'bar',
  inlineStyle: false,
  inlineTemplate: false,
- viewEncapsulation: 'Emulated',
  routing: false,
  style: 'css',
  skipTests: false,

packages/schematics/angular/app-shell/index_spec.ts

@@ -33,7 +33,6 @@ describe('App Shell Schematic', () => {
  name: 'bar',
  inlineStyle: false,
  inlineTemplate: false,
- viewEncapsulation: 'Emulated',
  routing: true,
  style: 'css',
  skipTests: false,

packages/schematics/angular/application/files/browserslist renamed to packages/schematics/angular/application/files/root/browserslist

@@ -0,0 +1,12 @@
+{
+ "extends": "<%= relativeTsConfigPath %>/tsconfig.json",
+ "compilerOptions": {
+ "outDir": "<%= relativeTsConfigPath %>/out-tsc/app",
+ "module": "es2015",
+ "types": []
+ },
+ "exclude": [
+ "src/test.ts",
+ "**/*.spec.ts"
+ ]
+}

packages/schematics/angular/application/files/karma.conf.js renamed to packages/schematics/angular/application/files/root/karma.conf.js

@@ -0,0 +1,19 @@
+{
+ "extends": "<%= relativeTsConfigPath %>/tsconfig.json",
+ "compilerOptions": {
+ "outDir": "<%= relativeTsConfigPath %>/out-tsc/spec",
+ "module": "commonjs",
+ "types": [
+ "jasmine",
+ "node"
+ ]
+ },
+ "files": [
+ "<%= rootInSrc ? '' : 'src/' %>test.ts",
+ "<%= rootInSrc ? '' : 'src/' %>polyfills.ts"
+ ],
+ "include": [
+ "**/*.spec.ts",
+ "**/*.d.ts"
+ ]
+}

packages/schematics/angular/application/files/root/tsconfig.app.json

@@ -5,7 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import { strings, tags } from '@angular-devkit/core';
+import { normalize, relative, strings, tags } from '@angular-devkit/core';
 import { experimental } from '@angular-devkit/core';
 import {
  MergeStrategy,
@@ -96,7 +96,16 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace
  // if (workspaceJson.value === null) {
  // throw new SchematicsException(`Unable to parse configuration file (${workspacePath}).`);
  // }
- const projectRoot = `${workspace.newProjectRoot}/${options.name}`;
+ let projectRoot = options.projectRoot !== undefined
+ ? options.projectRoot
+ : `${workspace.newProjectRoot}/${options.name}`;
+ if (projectRoot !== '' && !projectRoot.endsWith('/')) {
+ projectRoot += '/';
+ }
+ const rootFilesRoot = options.projectRoot === undefined
+ ? projectRoot
+ : projectRoot + 'src/';
+
  // tslint:disable-next-line:no-any
  const project: any = {
  root: projectRoot,
@@ -106,34 +115,34 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace
  builder: '@angular-devkit/build-angular:browser',
  options: {
  outputPath: `dist/${options.name}`,
- index: `${projectRoot}/src/index.html`,
- main: `${projectRoot}/src/main.ts`,
- polyfills: `${projectRoot}/src/polyfills.ts`,
- tsConfig: `${projectRoot}/tsconfig.app.json`,
+ index: `${projectRoot}src/index.html`,
+ main: `${projectRoot}src/main.ts`,
+ polyfills: `${projectRoot}src/polyfills.ts`,
+ tsConfig: `${rootFilesRoot}tsconfig.app.json`,
  assets: [
  {
  glob: 'favicon.ico',
- input: `${projectRoot}/src`,
+ input: `${projectRoot}src`,
  output: '/',
  },
  {
  glob: '**/*',
- input: `${projectRoot}/src/assets`,
+ input: `${projectRoot}src/assets`,
  output: '/assets',
  },
  ],
  styles: [
  {
- input: `${projectRoot}/src/styles.${options.style}`,
+ input: `${projectRoot}src/styles.${options.style}`,
  },
  ],
  scripts: [],
  },
  configurations: {
  production: {
  fileReplacements: [{
- src: `${projectRoot}/src/environments/environment.ts`,
- replaceWith: `${projectRoot}/src/environments/environment.prod.ts`,
+ src: `${projectRoot}src/environments/environment.ts`,
+ replaceWith: `${projectRoot}src/environments/environment.prod.ts`,
  }],
  optimization: true,
  outputHashing: 'all',
@@ -167,25 +176,25 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace
  test: {
  builder: '@angular-devkit/build-angular:karma',
  options: {
- main: `${projectRoot}/src/test.ts`,
- polyfills: `${projectRoot}/src/polyfills.ts`,
- tsConfig: `${projectRoot}/tsconfig.spec.json`,
- karmaConfig: `${projectRoot}/karma.conf.js`,
+ main: `${projectRoot}src/test.ts`,
+ polyfills: `${projectRoot}src/polyfills.ts`,
+ tsConfig: `${rootFilesRoot}tsconfig.spec.json`,
+ karmaConfig: `${rootFilesRoot}karma.conf.js`,
  styles: [
  {
- input: `${projectRoot}/styles.${options.style}`,
+ input: `${projectRoot}styles.${options.style}`,
  },
  ],
  scripts: [],
  assets: [
  {
  glob: 'favicon.ico',
- input: `${projectRoot}/src/`,
+ input: `${projectRoot}src/`,
  output: '/',
  },
  {
  glob: '**/*',
- input: `${projectRoot}/src/assets`,
+ input: `${projectRoot}src/assets`,
  output: '/assets',
  },
  ],
@@ -195,8 +204,8 @@ function addAppToWorkspaceFile(options: ApplicationOptions, workspace: Workspace
  builder: '@angular-devkit/build-angular:tslint',
  options: {
  tsConfig: [
- `${projectRoot}/tsconfig.app.json`,
- `${projectRoot}/tsconfig.spec.json`,
+ `${projectRoot}tsconfig.app.json`,
+ `${projectRoot}tsconfig.spec.json`,
  ],
  exclude: [
  '**/node_modules/**',
@@ -267,29 +276,57 @@ export default function (options: ApplicationOptions): Rule {
  inlineTemplate: options.inlineTemplate,
  spec: !options.skipTests,
  styleext: options.style,
+ viewEncapsulation: options.viewEncapsulation,
  };
 
  const workspace = getWorkspace(host);
- const newProjectRoot = workspace.newProjectRoot;
- const appDir = `${newProjectRoot}/${options.name}`;
- const sourceDir = `${appDir}/src/app`;
+ let newProjectRoot = workspace.newProjectRoot;
+ let appDir = `${newProjectRoot}/${options.name}`;
+ let sourceRoot = `${appDir}/src`;
+ let sourceDir = `${sourceRoot}/app`;
+ let relativeTsConfigPath = appDir.split('/').map(x => '..').join('/');
+ const rootInSrc = options.projectRoot !== undefined;
+ if (options.projectRoot !== undefined) {
+ newProjectRoot = options.projectRoot;
+ appDir = `${newProjectRoot}/src`;
+ sourceRoot = appDir;
+ sourceDir = `${sourceRoot}/app`;
+ relativeTsConfigPath = relative(normalize('/' + sourceRoot), normalize('/'));
+ if (relativeTsConfigPath === '') {
+ relativeTsConfigPath = '.';
+ }
+ }
 
  const e2eOptions: E2eOptions = {
  name: `${options.name}-e2e`,
  relatedAppName: options.name,
  rootSelector: appRootSelector,
  };
+ if (options.projectRoot !== undefined) {
+ e2eOptions.projectRoot = 'e2e';
+ }
 
  return chain([
  addAppToWorkspaceFile(options, workspace),
  options.skipPackageJson ? noop() : addDependenciesToPackageJson(),
  mergeWith(
- apply(url('./files'), [
+ apply(url('./files/src'), [
+ template({
+ utils: strings,
+ ...options,
+ 'dot': '.',
+ relativeTsConfigPath,
+ }),
+ move(sourceRoot),
+ ])),
+ mergeWith(
+ apply(url('./files/root'), [
  template({
  utils: strings,
  ...options,
  'dot': '.',
- appDir,
+ relativeTsConfigPath,
+ rootInSrc,
  }),
  move(appDir),
  ])),

packages/schematics/angular/application/files/root/tsconfig.spec.json

@@ -28,7 +28,6 @@ describe('Application Schematic', () => {
  name: 'foo',
  inlineStyle: false,
  inlineTemplate: false,
- viewEncapsulation: 'Emulated',
  routing: false,
  style: 'css',
  skipTests: false,
@@ -57,6 +56,9 @@ describe('Application Schematic', () => {
  expect(files.indexOf('/projects/foo/src/styles.css')).toBeGreaterThanOrEqual(0);
  expect(files.indexOf('/projects/foo/src/test.ts')).toBeGreaterThanOrEqual(0);
  expect(files.indexOf('/projects/foo/src/app/app.module.ts')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/projects/foo/src/app/app.component.css')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/projects/foo/src/app/app.component.html')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/projects/foo/src/app/app.component.spec.ts')).toBeGreaterThanOrEqual(0);
  expect(files.indexOf('/projects/foo/src/app/app.component.ts')).toBeGreaterThanOrEqual(0);
  });
 
@@ -103,6 +105,8 @@ describe('Application Schematic', () => {
  path = '/projects/foo/tsconfig.spec.json';
  content = tree.readContent(path);
  expect(content).toMatch('../../tsconfig.json');
+ const specTsConfig = JSON.parse(content);
+ expect(specTsConfig.files).toEqual(['src/test.ts', 'src/polyfills.ts']);
  });
 
  describe(`update package.json`, () => {
@@ -143,4 +147,54 @@ describe('Application Schematic', () => {
  expect(packageJson.devDependencies['@angular-devkit/build-angular']).toBeUndefined();
  });
  });
+
+ describe('custom projectRoot', () => {
+ it('should put app files in the right spot', () => {
+ const options = { ...defaultOptions, projectRoot: '' };
+
+ const tree = schematicRunner.runSchematic('application', options, workspaceTree);
+ const files = tree.files;
+ expect(files.indexOf('/src/karma.conf.js')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/tsconfig.app.json')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/tsconfig.spec.json')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/environments/environment.ts')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/environments/environment.prod.ts')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/favicon.ico')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/index.html')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/main.ts')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/polyfills.ts')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/styles.css')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/test.ts')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/app/app.module.ts')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/app/app.component.css')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/app/app.component.html')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/app/app.component.spec.ts')).toBeGreaterThanOrEqual(0);
+ expect(files.indexOf('/src/app/app.component.ts')).toBeGreaterThanOrEqual(0);
+ });
+
+ it('should set values in angular.json correctly', () => {
+ const options = { ...defaultOptions, projectRoot: '' };
+
+ const tree = schematicRunner.runSchematic('application', options, workspaceTree);
+ const config = JSON.parse(tree.readContent('/angular.json'));
+ const prj = config.projects.foo;
+ expect(prj.root).toEqual('');
+ const buildOpt = prj.architect.build.options;
+ expect(buildOpt.index).toEqual('src/index.html');
+ expect(buildOpt.main).toEqual('src/main.ts');
+ expect(buildOpt.polyfills).toEqual('src/polyfills.ts');
+ expect(buildOpt.tsConfig).toEqual('src/tsconfig.app.json');
+ });
+
+ it('should set the relative tsconfig paths', () => {
+ const options = { ...defaultOptions, projectRoot: '' };
+
+ const tree = schematicRunner.runSchematic('application', options, workspaceTree);
+ const appTsConfig = JSON.parse(tree.readContent('/src/tsconfig.app.json'));
+ expect(appTsConfig.extends).toEqual('../tsconfig.json');
+ const specTsConfig = JSON.parse(tree.readContent('/src/tsconfig.spec.json'));
+ expect(specTsConfig.extends).toEqual('../tsconfig.json');
+ expect(specTsConfig.files).toEqual(['test.ts', 'polyfills.ts']);
+ });
+ });
 });