Support path mapping

[rkostrzewski]

Short description of what this resolves:

Add support of path mapping in ngc step of build

Changes proposed in this pull request:

• Add compilerOptions.baseUrl to conf/ngc.config.js
• Replace compilerOptions.baseUrl from above config in tsconfig.json copied during ngc step of build to .tmp directory

Fixes: #125

[jmesa-sistel]

@rkostrzewski Great work!! ,
Now I can debug properly, thank you!

[danbucholtz]

@rkostrzewski,

Can you explain the use case for this. I'm not following.

Thanks,
Dan

[adascal]

@danbucholtz Any chance to see that PR merged soon?

As I understand it should fix problem with long paths kinda ../../../pages

[adascal]

Ops.. Actually adding to tsconfig:

"compilerOptions": { "baseUrl": "." }

Fix that problem. But only for prod build.
Hope that will help

[adascal]

New info :)

Dev build fails on transpile step with config:
"compilerOptions": { "baseUrl": "." }
but work with
"compilerOptions": { "baseUrl": "./src" }

And prod build fails at ngc step with config:
"compilerOptions": { "baseUrl": "./src" }
but work with
"compilerOptions": { "baseUrl": "." }

[rkostrzewski]

Hi @danbucholtz,
sorry for the delay - I've been away for past weeks. Here's a short description of what path mapping stands for and what it brings into everyday usage:

TL;DR:
Basically, there's a problem with TypeScript's module resolution occurring because all relative paths in tsconfig.json won't work when tsconfig is copied to .tmp folder during Angular Compiler build - which make sense as the file was copied to another directory.

Long version:
TypeScript 2.0 brought some cool changes to ease issues with project structure and custom modules. Say we have following project structure:

my-cool-project/
--- mobile-app/
--- --- src/
--- --- --- index.ts
--- --- tsconfig.json
--- server/
--- --- interfaces/purchases/
--- --- --- transaction.ts

Prior to TypeScript 2.0 when one wanted to reference transaction.ts module it would look like this import { sth } from '../../server/interfaces/purchases/transaction. In TypeScript 2.0 this can become import { sth } from 'server-interfaces/transaction. Pretty cool for all TypeScript projects.
There are some other usage scenarios described in TypeScript docs (you have to scroll down to Path Mappings part)
To create such mapping following should be done:

• "compilerOptions.baseUrl" in tsconfig.json should be set to url by which all relative paths are resolved (path are resolved based on that url)
• "compilerOptions.paths" in tsconfig.json should look sth like this:

{
   "compilerOptions":
   ...
       "paths" : {
            "server-interfaces": "../../server/interfaces/"
        }
   ...

It all works well with development builds as @adascal described. Webpack/Rollup build from src folder and all is well.
The problem occurs with production builds. Basically for production builds the Angular Compiler is used and all sources are copied to .tmp folder along with tsconfig. So basically folder structure looks like this:

mobile-app/
... .tmp/
... ... index.ts
... ... tsconfig.json
... src/
... ... index.ts
... tsconfig.json

If ionic-app/tsconfig.json's points to './src' as base url (or '.' doesn't matter) it won't resolve paths correctly when the tsconfig.json is copied to .tmp folder and used by ngc as the file is placed one folder deeper in the project structure. In previous example '../../server/interfaces/ ' was resolved to 'my-cool-project/mobile-app/src/../../server/interfaces' now becomes 'my-cool-project/mobile-app/.tmp/src/../../server/interfaces'. Of course the file is not found and the build produces errors.

Hope that clears some stuff. 😃

Seems like sth is wrong with source maps for production builds based on comments on linked issue.

I'll check if the issue still persists and the fix works with webpack builds at the weekend - if so I'll rebase the PR to make it margeable.

[danbucholtz]

@rkostrzewski,

Thanks for the detailed explanation. In theory this sounds good! In reality I am a little concerned but we just need to do some testing and verify. We'll have to test that everything works with rollup and webpack ionic serve and ionic run ${platform} commands. I do have some concerns with some of the path resolution stuff as we depend on absolute paths in some places within Ionic. Hopefully everything will just work, that'd be ideal!

Thanks,
Dan

[danbucholtz]

Sorry, I don't think we will be supporting this feature in the coming months. Maybe we'll revisit it at a future date.

Thanks for contributing!

Thanks,
Dan