require in sidenav's compiled module is pulling in .ts files

[aberenyi]

Using alpha.1 with webpack you might run into this kind of error:

ERROR in ./~/@angular2-material/core/annotations/one-of.ts
Module parse failed: /opt/senergy/iris-app/node_modules/@angular2-material/core/annotations/one-of.ts Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import {isPresent} from 'angular2/src/facade/lang';
| 
| 
@ ./~/@angular2-material/sidenav/sidenav.js 24:15-52

ERROR in ./~/@angular2-material/core/rtl/dir.ts
Module parse failed: /opt/senergy/iris-app/node_modules/@angular2-material/core/rtl/dir.ts Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import {EventEmitter} from 'angular2/src/facade/async';
| import {Directive, HostBinding, Output, Input} from 'angular2/core';
| import {OneOf} from '../annotations/one-of';
 @ ./~/@angular2-material/sidenav/sidenav.js 23:12-38

The cause is that the compiled sidnav.js and dir.js tries to require the ts files instead of the compiled js ones.

Workaround
Open dir.js and locate the line

var one_of_1 = require('../annotations/one-of');

(around line 12) and add the js extension to the req'd module, so it should look like this

var one_of_1 = require('../annotations/one-of.js');

Do the same in sidenav.js, i.e. make sure you have something like this around line 23-24

var dir_1 = require('../core/rtl/dir.js');
var one_of_1 = require('../core/annotations/one-of.js');

[jelbourn]

@robwormald is there a standard approach to dealing with this?

[robwormald]

@jelbourn the basic issue is that code like https://github.com/angular/material2/blob/master/src/components/sidenav/sidenav.ts#L21-L22 , when distributed, is basically manually walking outside the npm distribution.

The right fix would be to import from @angular2-material/core, which is obviously a bit more complicated when dev'ing locally. typescript@next supports configuration for this, but i don't think its in a stable release yet, which might not matter.

[jelbourn]

@hansl might know more

[robwormald]

https://gist.github.com/robwormald/fa0ad1bd89c098500693 works (adapt as necessary), in ts@next

[jelbourn]

The plan: have the release script replace relative path references to core with @angular2-material/core

[robwormald]

note that @alexeagle is moving angular core to the above style of config as
well.

On Thu, Mar 17, 2016 at 7:19 PM Jeremy Elbourn notifications@github.com
wrote:

The plan: have the release script replace relative path references to core
with @angular2-material/core

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#189 (comment)

[alexeagle]

You can do that, but be careful, it allows you to use eg. readonly
modifier and ship a library that only works for users with ts@next.
You should add a travis build target that explicitly tests the releasable
artifacts against any TS version you support for users.
angular/angular is not doing this well either, blocked on broccoli fixes.

On Thu, Mar 17, 2016 at 8:16 PM Rob Wormald notifications@github.com
wrote:

note that @alexeagle is moving angular core to the above style of config as
well.

On Thu, Mar 17, 2016 at 7:19 PM Jeremy Elbourn notifications@github.com
wrote:

The plan: have the release script replace relative path references to
core
with @angular2-material/core

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#189 (comment)

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#189 (comment)

[angular-automatic-lock-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.}