feat(generate): create parent directories required for blueprints if they do not exist

Fix angular#3307
Close angular#3912

Author: Meligy

packages/angular-cli/utilities/dynamic-path-parser.js

@@ -33,8 +33,11 @@ module.exports = function dynamicPathParser(project, entityName) {
       } else if (fs.existsSync(withPlus)) {
         return withPlus;
       }
-      
-      throw `Invalid path: "${withoutPlus}"" is not a valid path.`
+
+      // Folder not found, create it, and return it
+      fs.mkdirSync(withoutPlus);
+      return withoutPlus;
+
     }, parsedOutputPath.root);
     outputPath = path.join(newPath, parsedOutputPath.name);
   }

tests/acceptance/generate-component.spec.js

@@ -178,6 +178,20 @@ describe('Acceptance: ng generate component', function () {
       });
   });
 
+  it(`non${path.sep}existing${path.sep}dir${path.sep}myComp will create dir and succeed`, () => {
+    const testPath =
+      path.join(root, 'tmp', 'foo', 'src', 'app', 'non', 'existing', 'dir', 'my-comp', 'my-comp.component.ts');
+    const appModule = path.join(root, 'tmp', 'foo', 'src', 'app', 'app.module.ts');
+    return ng(['generate', 'component', `non${path.sep}existing${path.sep}dir${path.sep}myComp`])
+      .then(() => expect(existsSync(testPath)).to.equal(true))
+      .then(() => readFile(appModule, 'utf-8'))
+      .then(content => {
+        // Expect that the app.module contains a reference to my-comp and its import.
+        expect(content)
+          .matches(/import.*MyCompComponent.*from '.\/non\/existing\/dir\/my-comp\/my-comp.component';/);
+      });
+  });
+
   it('my-comp --inline-template', function () {
     return ng(['generate', 'component', 'my-comp', '--inline-template']).then(() => {
       var testPath = path.join(root, 'tmp', 'foo', 'src', 'app', 'my-comp', 'my-comp.component.html');

tests/e2e/tests/generate/component/component-path-case.ts

@@ -1,21 +1,22 @@
 import {join} from 'path';
 import {ng} from '../../../utils/process';
-import {expectFileToExist, createDir} from '../../../utils/fs';
+import {expectFileToExist} from '../../../utils/fs';
 
 
 export default function() {
-  const rootDir = join('src', 'app', 'Upper-Dir');
-  createDir(rootDir);
+  const upperDirs = join('non', 'existing', 'dir');
+  const rootDir = join('src', 'app', upperDirs);
+
   const componentDir = join(rootDir, 'test-component');
   const componentTwoDir = join(rootDir, 'test-component-two');
 
-  return ng('generate', 'component', 'Upper-Dir/test-component')
+  return ng('generate', 'component', `${upperDirs}/test-component`)
     .then(() => expectFileToExist(componentDir))
     .then(() => expectFileToExist(join(componentDir, 'test-component.component.ts')))
     .then(() => expectFileToExist(join(componentDir, 'test-component.component.spec.ts')))
     .then(() => expectFileToExist(join(componentDir, 'test-component.component.html')))
     .then(() => expectFileToExist(join(componentDir, 'test-component.component.css')))
-    .then(() => ng('generate', 'component', 'Upper-Dir/Test-Component-Two'))
+    .then(() => ng('generate', 'component', `${upperDirs}/Test-Component-Two`))
     .then(() => expectFileToExist(join(componentTwoDir, 'test-component-two.component.ts')))
     .then(() => expectFileToExist(join(componentTwoDir, 'test-component-two.component.spec.ts')))
     .then(() => expectFileToExist(join(componentTwoDir, 'test-component-two.component.html')))