Fix module path component 1.3.x

packages/@angular/cli/blueprints/component/index.ts

@@ -238,9 +238,11 @@ export default Blueprint.extend({
     const returns: Array<any> = [];
     const className = stringUtils.classify(`${options.entity.name}Component`);
     const fileName = stringUtils.dasherize(`${options.entity.name}.component`);
-    const componentDir = path.relative(path.dirname(this.pathToModule), this.generatePath);
-    const normalizeRelativeDir = componentDir.startsWith('.') ? componentDir : `./${componentDir}`;
-    const importPath = componentDir ? `${normalizeRelativeDir}/${fileName}` : `./${fileName}`;
+    const fullGeneratePath = path.join(this.project.root, this.generatePath);
+    const moduleDir = path.parse(this.pathToModule).dir;
+    const relativeDir = path.relative(moduleDir, fullGeneratePath);
+    const normalizeRelativeDir = relativeDir.startsWith('.') ? relativeDir : `./${relativeDir}`;
+    const importPath = relativeDir ? `${normalizeRelativeDir}/${fileName}` : `./${fileName}`;
 
     if (!options.skipImport) {
       if (options.dryRun) {

tests/e2e/tests/generate/component/component-module.ts

@@ -1,15 +1,29 @@
+import * as fs from 'fs-extra';
 import {join} from 'path';
 import {ng} from '../../../utils/process';
 import {expectFileToMatch} from '../../../utils/fs';
 
 
 export default function() {
-  const modulePath = join('src', 'app', 'app.module.ts');
+  const root = process.cwd();
+  const modulePath = join(root, 'src', 'app', 'app.module.ts');
+
+  fs.mkdirSync('./src/app/sub-dir');
 
   return ng('generate', 'component', 'test-component', '--module', 'app.module.ts')
     .then(() => expectFileToMatch(modulePath,
       /import { TestComponentComponent } from '.\/test-component\/test-component.component'/))
 
+    .then(() => process.chdir(join(root, 'src', 'app')))
+    .then(() => ng('generate', 'component', 'test-component2', '--module', 'app.module.ts'))
+    .then(() => expectFileToMatch(modulePath,
+      /import { TestComponent2Component } from '.\/test-component2\/test-component2.component'/))
+
+    .then(() => process.chdir(join(root, 'src', 'app', 'sub-dir')))
+    .then(() => ng('generate', 'component', 'test-component3', '--module', 'app.module.ts'))
+    .then(() => expectFileToMatch(modulePath,
+      /import { TestComponent3Component } from '.\/test-component3\/test-component3.component'/))
+
     // Try to run the unit tests.
     .then(() => ng('build'));
 }

tests/e2e/tests/generate/directive/directive-module.ts

@@ -1,15 +1,29 @@
+import * as fs from 'fs-extra';
 import {join} from 'path';
 import {ng} from '../../../utils/process';
 import {expectFileToMatch} from '../../../utils/fs';
 
 
 export default function() {
-  const modulePath = join('src', 'app', 'app.module.ts');
+  const root = process.cwd();
+  const modulePath = join(root, 'src', 'app', 'app.module.ts');
+
+  fs.mkdirSync('./src/app/sub-dir');
 
   return ng('generate', 'directive', 'test-directive', '--module', 'app.module.ts')
     .then(() => expectFileToMatch(modulePath,
       /import { TestDirectiveDirective } from '.\/test-directive.directive'/))
 
+    .then(() => process.chdir(join(root, 'src', 'app')))
+    .then(() => ng('generate', 'directive', 'test-directive2', '--module', 'app.module.ts'))
+    .then(() => expectFileToMatch(modulePath,
+      /import { TestDirective2Directive } from '.\/test-directive2.directive'/))
+
+    .then(() => process.chdir(join(root, 'src', 'app', 'sub-dir')))
+    .then(() => ng('generate', 'directive', 'test-directive3', '--module', 'app.module.ts'))
+    .then(() => expectFileToMatch(modulePath,
+      /import { TestDirective3Directive } from '.\/test-directive3.directive'/))
+
     // Try to run the unit tests.
     .then(() => ng('build'));
 }

tests/e2e/tests/generate/guard/guard-module.ts

@@ -1,15 +1,30 @@
+import * as fs from 'fs-extra';
 import {join} from 'path';
 import {ng} from '../../../utils/process';
 import {expectFileToMatch} from '../../../utils/fs';
 
 
 export default function() {
-  const modulePath = join('src', 'app', 'app.module.ts');
+  const root = process.cwd();
+  const modulePath = join(root, 'src', 'app', 'app.module.ts');
+
+  fs.mkdirSync('./src/app/sub-dir');
 
   return ng('generate', 'guard', 'test-guard', '--module', 'app.module.ts')
     .then(() => expectFileToMatch(modulePath,
       /import { TestGuardGuard } from '.\/test-guard.guard'/))
     .then(() => expectFileToMatch(modulePath,
       /providers:\s*\[TestGuardGuard\]/m))
+
+    .then(() => process.chdir(join(root, 'src', 'app')))
+    .then(() => ng('generate', 'guard', 'test-guard2', '--module', 'app.module.ts'))
+    .then(() => expectFileToMatch(modulePath,
+      /import { TestGuard2Guard } from '.\/test-guard2.guard'/))
+
+    .then(() => process.chdir(join(root, 'src', 'app', 'sub-dir')))
+    .then(() => ng('generate', 'guard', 'test-guard3', '--module', 'app.module.ts'))
+    .then(() => expectFileToMatch(modulePath,
+      /import { TestGuard3Guard } from '.\/test-guard3.guard'/))
+
     .then(() => ng('build'));
 }

tests/e2e/tests/generate/module/module-import.ts

@@ -1,12 +1,16 @@
+import * as fs from 'fs-extra';
 import { join } from 'path';
 import { ng } from '../../../utils/process';
 import { expectFileToMatch } from '../../../utils/fs';
 
 export default function () {
-  const modulePath = join('src', 'app', 'app.module.ts');
+  const root = process.cwd();
+  const modulePath = join(root, 'src', 'app', 'app.module.ts');
   const subModulePath = join('src', 'app', 'sub', 'sub.module.ts');
   const deepSubModulePath = join('src', 'app', 'sub', 'deep', 'deep.module.ts');
 
+  fs.mkdirSync('./src/app/sub-dir');
+
   return Promise.resolve()
     .then(() => ng('generate', 'module', 'sub'))
     .then(() => ng('generate', 'module', 'sub/deep'))
@@ -40,4 +44,16 @@ export default function () {
     .then(() => expectFileToMatch(deepSubModulePath,
       /import { Test6Module } from '.\/..\/..\/test6\/test6.module'/))
     .then(() => expectFileToMatch(deepSubModulePath, /imports: \[(.|\s)*Test6Module(.|\s)*\]/m)));
+
+    .then(() => process.chdir(join(root, 'src', 'app')))
+    .then(() => ng('generate', 'module', 'test7', '--module', 'app.module.ts')))
+    .then(() => expectFileToMatch(modulePath,
+      /import { Test7Module } from '.\/test7\/test7.module'/))
+    .then(() => expectFileToMatch(modulePath, /imports: \[(.|\s)*Test7Module(.|\s)*\]/m))
+
+    .then(() => process.chdir(join(root, 'src', 'app', 'sub-dir')))
+    .then(() => ng('generate', 'module', 'test8', '--module', 'app.module.ts')))
+    .then(() => expectFileToMatch(modulePath,
+      /import { Test8Module } from '.\/test8\/test8.module'/))
+    .then(() => expectFileToMatch(modulePath, /imports: \[(.|\s)*Test8Module(.|\s)*\]/m))
 }

tests/e2e/tests/generate/pipe/pipe-module.ts

@@ -1,15 +1,29 @@
+import * as fs from 'fs-extra';
 import {join} from 'path';
 import {ng} from '../../../utils/process';
 import {expectFileToMatch} from '../../../utils/fs';
 
 
 export default function() {
-  const modulePath = join('src', 'app', 'app.module.ts');
+  const root = process.cwd();
+  const modulePath = join(root, 'src', 'app', 'app.module.ts');
+
+  fs.mkdirSync('./src/app/sub-dir');
 
   return ng('generate', 'pipe', 'test-pipe', '--module', 'app.module.ts')
     .then(() => expectFileToMatch(modulePath,
       /import { TestPipePipe } from '.\/test-pipe.pipe'/))
 
+    .then(() => process.chdir(join(root, 'src', 'app')))
+    .then(() => ng('generate', 'pipe', 'test-pipe2', '--module', 'app.module.ts'))
+    .then(() => expectFileToMatch(modulePath,
+      /import { TestPipe2Pipe } from '.\/test-pipe2.pipe'/))
+
+    .then(() => process.chdir(join(root, 'src', 'app', 'sub-dir')))
+    .then(() => ng('generate', 'pipe', 'test-pipe3', '--module', 'app.module.ts'))
+    .then(() => expectFileToMatch(modulePath,
+      /import { TestPipe3Pipe } from '.\/test-pipe3.pipe'/))
+
     // Try to run the unit tests.
     .then(() => ng('build'));
 }

tests/e2e/tests/generate/service/service-module.ts

@@ -1,15 +1,29 @@
+import * as fs from 'fs-extra';
 import {join} from 'path';
 import {ng} from '../../../utils/process';
 import {expectFileToMatch} from '../../../utils/fs';
 
 
 export default function() {
-  const modulePath = join('src', 'app', 'app.module.ts');
+  const root = process.cwd();
+  const modulePath = join(root, 'src', 'app', 'app.module.ts');
+
+  fs.mkdirSync('./src/app/sub-dir');
 
   return ng('generate', 'service', 'test-service', '--module', 'app.module.ts')
     .then(() => expectFileToMatch(modulePath,
       /import { TestServiceService } from '.\/test-service.service'/))
 
+    .then(() => process.chdir(join(root, 'src', 'app')))
+    .then(() => ng('generate', 'service', 'test-service2', '--module', 'app.module.ts'))
+    .then(() => expectFileToMatch(modulePath,
+      /import { TestService2Service } from '.\/test-service2.service'/))
+
+    .then(() => process.chdir(join(root, 'src', 'app', 'sub-dir')))
+    .then(() => ng('generate', 'service', 'test-service3', '--module', 'app.module.ts'))
+    .then(() => expectFileToMatch(modulePath,
+      /import { TestService3Service } from '.\/test-service3.service'/))
+
     // Try to run the unit tests.
     .then(() => ng('build'));
 }