Angular-cli: Unable to use relative parent paths in tsconfig paths for AOT module resolution when lazy loading routes

[franktroia]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.1.1
node: 6.10.0
os: win32 x64
@angular/animations: 4.1.3
@angular/common: 4.1.3
@angular/compiler: 4.1.3
@angular/core: 4.1.3
@angular/forms: 4.1.3
@angular/http: 4.1.3
@angular/platform-browser: 4.1.3
@angular/platform-browser-dynamic: 4.1.3
@angular/router: 4.1.3
@angular/upgrade: 4.1.3
@angular/cli: 1.1.1
@angular/compiler-cli: 4.1.3
@angular/language-service: 4.1.3

Repro steps.

1. ng new some-project
2. Update tsconfig.app.js to include a paths entry to some modules, one with a parent relative path and one without.

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "module": "es2015",
        "baseUrl": "",
        "types": [
            "angular"
        ],
        "paths": {
            "@plugins/*": ["../../src/*"],
            "@todo/*": ["app/to-do/*"]
        }
    },
    "exclude": [
        "test.ts",
        "**/*.spec.ts",
        "**/bower_components/**/*"
    ]
}

1. Use these new path entries in a route.

export const routes: Routes = [{
    // Does not work, likely due to parent relative path in tsconfig
    path: 'upf/broken',
    loadChildren: '@plugins/to-do/to-do.module#ToDoModule'
}, {
    // Works fine
    path: 'upf/works',
    loadChildren: '@todo/to-do.module#ToDoModule'
}];

1. Run ng serve --prod --aot. Compilation will fail.
   

   The log given by the failure.

ERROR in ./platform/src/$$_gendir async
Module not found: Error: Can't resolve 'D:\temp\arch\my-sessions\src\main\webapp\scripts\platform\src\to-do\to-do.module.ngfactory.ts' in 'D:\temp\arch\my-sessions\src\main\webapp\scripts\platform\src\$$_gendir'
 @ ./platform/src/$$_gendir async
 @ ./~/@angular/core/@angular/core.es5.js
 @ ./platform/src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200 ./platform/src/main.ts

Desired functionality.

I would like to be able to use a parent relative path in tsconfig for module resolution.

Mention any other details that might be useful.

Running without --prod --aot flags works as expected.

[franktroia]

After some tedious debugging, I think the issue boils down to ngc.

If I disregard trying to set paths in the tsconfig.json and instead set parent relative paths in the loadChildren string, the same issue occurs.

The below works fine with ng build and ng build --prod --no-aot.

const routes: Routes = [{
    path: 'upf/my-sessions',
    loadChildren: './../../../src/app/my-sessions.module#MySessionsModule'
}];

But it fails with ng build --prod or ng build --prod --aot. The --no-aot flag must disable use of ngc entirely.

My hunch is that ngc is unable to import files that exist in a path "above" where the tsconfig.app.json exists.

[Brocco]

Yes, you are correct... compilation must be in the application folder structure, I believe this is a result of how tsc works.

[franktroia]

Well, I'm not sure. tsc works fine, it's ngc that does not.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}