Ionic-app-scripts: typescript2.0 'Path mapping' tsconfig issue.

[masatada]

based on ionic2-app-base project.

1.write to tsconfig.json, "baseUrl" setting.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "baseUrl": "src"
  },
  "exclude": [
    "node_modules"
  ],
  "compileOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

2.create "src/services/sample.service.ts".

import { Injectable } from '@angular/core';
@Injectable()
export class SampleService {
  constructor() {
  }
}

3.import "SampleService" on "src/page/home.ts".

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';
import { SampleService } from 'services/sample.service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(
    public navCtrl: NavController,
    public sample: SampleService) {
  }

}

4.run ionic serve

[15:55:52]  bundle dev failed:  Unexpected character '@' (2:0) in src/services/sample.service.ts

[15:55:52]  SyntaxError: Unexpected character '@' (2:0) in src/services/sample.service.ts
    at Parser.pp$4.raise (/Users/test/Documents/develop/unk/node_modules/rollup/dist/rollup.js:4070:13)
    at Parser.pp$7.getTokenFromCode (/Users/test/Documents/develop/unk/node_modules/rollup/dist/rollup.js:4609:8)
    at Parser.pp$7.readToken (/Users/test/Documents/develop/unk/node_modules/rollup/dist/rollup.js:4330:15)
    at Parser.pp$7.nextToken (/Users/test/Documents/develop/unk/node_modules/rollup/dist/rollup.js:4321:13)
    at Parser.pp$7.next (/Users/test/Documents/develop/unk/node_modules/rollup/dist/rollup.js:4266:8)
    at Parser.pp.eat (/Users/test/Documents/develop/unk/node_modules/rollup/dist/rollup.js:2200:10)
    at Parser.pp.semicolon (/Users/test/Documents/develop/unk/node_modules/rollup/dist/rollup.js:2245:13)
    at Parser.pp$1.parseImport (/Users/test/Documents/develop/unk/node_modules/rollup/dist/rollup.js:2996:8)
    at Parser.pp$1.parseStatement (/Users/test/Documents/develop/unk/node_modules/rollup/dist/rollup.js:2409:44)
    at Parser.pp$1.parseTopLevel (/Users/test/Documents/develop/unk/node_modules/rollup/dist/rollup.js:2313:23)

It will work, if import { SampleService } from 'services/sample.service'; is set to import { SampleService } from '../../services/sample.service';.

[danbucholtz]

@masatada,

We don't support changing that setting with our build process. If you'd like to use that setting, you're free to do so but we can't offer support for it. As @ionic/app-scripts gets more mature, maybe in the future we'll be able to accommodate that sort of change.

Thanks,
Dan

[zhang-z]

Really really need this feature. import * from '../../../' looks so ugly to me. In my case, I can run ionic serve successfully, but ionic build failed

[16:05:44]  Error: Unexpected value 'CustomPage' declared by the module 'AppModule' 
[16:05:44]  ngc failed 
[16:05:44]  ionic-app-script task: "build" 
[16:05:44]  Error: Error 
Caught exception:
 undefined 

[Chris-V]

I have a similar issue when defining custom paths. We have a project that is shared across multiple apps. It is a separate npm package and when imported as a node_modules everything works perfectly. In a dev context though we want to speed up the process by using tsconfig paths and skip the "build shared project, import in app, re-start ionic serve" boilerplate. ie:

"baseUrl": ".",
"paths": {
  "@my-app/sdk": [
    "../sdk/src"
  ]
}

Been trying to achieve this with rollup in 0.0.36 and now webpack in 0.0.37 without success.

[danbucholtz]

@Chris-V, can you npm link the other package? We're not going to get to this for awhile (if ever). This is a case where maybe 5-10% of users have a special use case. We'll try to accommodate it but we're going for the big wins first. Just trying to be open and transparent with you so you don't paint yourself into a corner.

Thanks,
Dan

[Chris-V]

I totally understand that. I'd be more than willing to contribute for such a feature though as we use that pattern for many clients. Anyways I feel like the build process is not completely settled down, so it would probably just slow you down in making sure the all basic stuff works perfectly first.

NPM link seems to work, so at least we don't have to reinstall the dependency with npm. I still have to restart the ionic cli though because changes don't seem to be picked up. Here's what I have so far:

1. The core project is properly npm linked
2. tsc -w is running in the core project
3. I have a custom watch.config that listens to changes in core's compiled output

```
var watchConfig = require('@ionic/app-scripts/config/watch.config');
var buildUpdate = require('@ionic/app-scripts/dist/build').buildUpdate;

watchConfig.watchers.push({
paths: ['{{ROOT}}/node_modules/@my-app/sdk/build/dist'],
options: {},
callback: buildUpdate
});

module.exports = watchConfig;
```

TSC compiles everything properly, the the watchers sees the changes and triggers a build. The remaining issue is that the new changes are not picked up. I'm starting to think It's not the buildUpdate I need to trigger, but rather something with webpack to make it reload the dependency. Any ideas?