Using <input type="number"> makes the A-head of time file

[bregnvig]

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)

Mac OSX El Capitan

Versions.

angular-cli: 1.0.0-beta.18
node: 6.4.0
os: darwin x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

App was created using the CLI

Trying to do an AoT using:

<input type="number"" class="form-control" id="height" [(ngModel)]="model.height" name="height">

does not work.

The log given by the failure.

 40% building modules 251/311 modules 60 active ...es/@angular/core/src/linker/errors.jsresolve '../../../node_modules/@angular/forms/src/directives/number_value_accessor.ngfactory' in '/Volumes/LB1731.2/course/examples/src/app/form/person-form-1'
  using description file: /Volumes/LB1731.2/course/examples/package.json (relative path: ./src/app/form/person-form-1)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /Volumes/LB1731.2/course/examples/package.json (relative path: ./src/app/form/person-form-1)
    using description file: /Volumes/LB1731.2/course/examples/package.json (relative path: ./src/node_modules/@angular/forms/src/directives/number_value_accessor.ngfactory)
      as directory
        /Volumes/LB1731.2/course/examples/src/node_modules/@angular/forms/src/directives/number_value_accessor.ngfactory doesn't exist
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /Volumes/LB1731.2/course/examples/src/node_modules/@angular/forms/src/directives/number_value_accessor.ngfactory doesn't exist
      .ts
        Field 'browser' doesn't contain a valid alias configuration
        /Volumes/LB1731.2/course/examples/src/node_modules/@angular/forms/src/directives/number_value_accessor.ngfactory.ts doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /Volumes/LB1731.2/course/examples/src/node_modules/@angular/forms/src/directives/number_value_accessor.ngfactory.js doesn't exist

/Volumes/LB1731.2/course/examples/node_modules/webpack/lib/Compiler.js:220
                    if(err) return callback(err);

Mention any other details that might be useful.

Changing it to

<input type="text"" class="form-control" id="height" [(ngModel)]="model.height" name="height">

makes it work again

[wulfsberg]

Very nicely spotted. I just ran into this one, and had no idea what the compiler was trying to tell me.

[wulfsberg]

I am also getting a similar error when using https://github.com/valor-software/ng2-select (v1.1.1), except it is complaining about

...node_modules\ng2-select\components\select\off-click.ngfactory doesn't exist
      no extension

but I am not sure if this is an AoT error, a CLI error, or an error in the ng2-select module.
It seems the AoT is touchy about custom/unknown attributes, but I am unsure how it is supposed to work.

[grizzm0]

I had a similar issue with angular2-mdl after updating to angular-cli 1.0.0-beta.18. The maintainer of the repo fixed it. Not quite sure what happened between versions.

See: mseemann/angular2-mdl#165

[wulfsberg]

The type="number" doesn't work and 3rd party library can't compile may be two different issues which just happen to have the same symptoms. I thought it was worth mentioning as an additional data point, given the similarities, but I don't mean any talk about 3rd party libraries to obfuscate the former, which is certainly somewhere in the AoT/CLI stack.

[erwin-beckers]

Same problem here.
ngc works and produces the .ngfactory.ts files
But when i try to compile the generated ngfactory files those i get:
error TS2307: Cannot find module '../../node_modules/@angular/forms/src/directives/number_value_accessor.ngfactory'.

This is because the components template contains an
Changing it to solves it, but thats not something i want to do ;-)

[clydin]

For the input with type number scenario, the issue appears to be angular related. The NumberValueAccessor directive appears to not be exported from @angular/forms.

As to ng2-select, it has a similar problem. The OffClickDirective doesn't appear to be exported. ( HighlightPipe either.)

[wulfsberg]

It seems to be this one, though there is apparently more to it than just an export: angular/angular#12428

[clydin]

The commit referenced in that issue appears to allow third party components to use internal directives without the need to export everything.
In the typical case, directives/pipes that are exported via a NgModule should also have their corresponding class exported. This allows the end user to use them both via a template and programmatically, if desired.

[filipesilva]

@hansl can you advise if this is something on our end or on the compiler's end?