text-mask: Error on new Ionic2 RC0 with AoT compiler

@fernandobandeira TextMaskModule belongs in the imports array not in the declarations array.

@msafi

I could be wrong here, I haven’t caught up with the latest build tools and I might be missing out on something. But here are my thoughts according to what I know:

First of all, we have this issue because we weren’t publishing .metadata.json with our bundle. That is the file that ngc needs in order to successfully import your component/service/module in an Angular 2 app. That file is generated when we compile the code using ngc. If you go ahead and use Webpack to bundle what ngc outputted, then the .metadata.json file will not match the .js file and we will run into issues.

So that being said, the options we have are:

• Manually include the core code in the Angular 2 code so we don’t have the import statement. But that wouldn’t make sense because we don’t want to have duplicate code in the repo.
• Publish core as a separate package with typings. So maybe you want to change it from ES6 to TypeScript and then compile it to ES5/ES6 along with the webpack/browserify bundle. Similar to what Ionic is doing at the Ionic Native repo.

---

The proposed final result would end up like:

@text-mask/core

• /dist/ directory will contain ES5/ES6 files with their typings, a bundle (webpack/browserify), and a minified version of the bundle

@text-mask/angular2

• @text-mask/core and @text-mask/common will be defined in the dependencies in package.json
• /dist/ directory will contain ES5/ES6 files with their typings

@text-mask/addons @text-mask/common

• These should also be modules that are defined as dependencies where appropriate

@text-mask/vanilla @text-mask/react @text-mask/vue @text-mask/ember

• They will also depend on @text-mask/core and @text-mask/common, we should also publish typings when possible to provide maximum language support.

@msafi

Yeah just had a look, I managed to compile it properly but it needs ../core directory to be present. Which wouldn’t work out for the NPM module.

We can maybe import the core library from the npm package instead of the relative path. It might complicate the build process but due to your project’s layout, that might be our only option.

You can look into using scopes for npm too so you can have:

@text-mask/core
@text-mask/react
@text-mask/angular2
... etc

@msafi Another reason to break this big repo into smaller repos:

I just opened the project on a fresh Windows install, using WebStorm 2016.3 EAP. My IDE indexed the project on first launch as usual, and then decided to treat the whole project as a JSX (React) project. This means I would have to manually change the project settings to match what I’m working with (ES2015 or JSX or ES5).

Not a big deal, just wanted to add this to the list of reasons 😃

@ihadeed I ran into the same issue.

@msafi what do you think about splitting the project into separate repositories? One for the core and then directives/functions for each framework.

@msafi I just tried it with a clean repository and it works like a charm.

@msafi AoT depends typescipt 2.0 the tsconfig should be adjust, start repo isolate github and npmjs but text-mask-core hit me (I think that can rewrite in typescript 2 and eliminate the babel). In case not separate think each folder should be thought of as a module see angular2

Tell me if I can help with something (refactoring text-mask-core to typescript, process publish isolate …)

Thanks

@PerfectPixel +1 Best form is separate and manage dependencies with peerDependencies

@msafi shouldn’t it just be compiled with ngc instead of tsc as described here: https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad#.2sby5kwm5

@msafi @jafaripur Take a look this article I guess you need to have *.metadata.json for AoT complier. Also, #2 in that article can resolve the issue.