0

My app is very slow until load finish when running on browser (I dare not speak about mobile uhhhh 10-15seconds) Yes, I do ng build --prod and it's still slow.

So with angular cli beta 16 I try the new flag --aot And I get a lot of imports and declarations error: 

 0% compilingUnexpected value 'FileDropDirective' declared by the module 'AppModule'
Error: Unexpected value 'FileDropDirective' declared by the module 'AppModule'
    at C:\Users\...\node_modules\@angular\compiler\bundles\compiler.umd.js:14174:33
    at Array.forEach (native)

Then just for fun I comment 3 libs which did me this error, just to see if it will continue to compile... NO ! I get another error: 

10% building modules 6/12 modules 6 active ...ode_modules\style-loader\addStyles.jsSyntaxError: Unexpected token ILLEGAL
    at WebpackResourceLoader._evaluate (C:\Users\...\node_modules\@ngtools\webpack\src\resource_loader.js:75:24)

How achieve? thanks

michael
  • 16,221
  • 7
  • 55
  • 60
istiti
  • 141
  • 1
  • 11

2 Answers2

1

Version 2.0.0 of angular2-mdl hase been released today. AOT is now supported.

michael
  • 16,221
  • 7
  • 55
  • 60
  • i know. will be fixed with 2.0.1. but the readme content is the same as on giihub. – michael Oct 11 '16 at 06:52
  • BEAUCOUP DE PROBLEMES, I get lot errors after update to 2.0.0! In app.component.ts I use service MdlDialogOutletService and I get `angular2-mdl/components/index"' has no exported member 'MdlDialogOutletService'.` then In my dialog component dialog I have http://pastebin.com/UbJs3Y9U and I get `WARNING in ./src/app/edit-dialog/edit-dialog.component.ts 92:170 export 'MdlDialogReference' was not found in 'angular2-mdl' WARNING in ./src/app/edit-dialog/edit-dialog.component.ts 92:208 export 'MdlDialogReference' was not found in 'angular2-mdl' ` – istiti Oct 11 '16 at 09:14
  • I also have these error: `WARNING in ./src/app/tabs-view/tabs-view.component.ts 305:98 export 'MdlDialogService' was not found in 'angular2-mdl' ` – istiti Oct 11 '16 at 09:14
  • So I tried remove this MdlDialogOutletService and put only in index.html so I get always error `'MdlDialogService' was not found in 'angular2-mdl'` and `MdlDialogReference' was not found in 'angular2-mdl` Je ne comprends pas! – istiti Oct 11 '16 at 09:19
  • please read the https://github.com/mseemann/angular2-mdl/blob/master/CHANGELOG.md. the version number increases because of the breaking changes. thats the way semver works. – michael Oct 11 '16 at 10:03
  • I think it's not an problem to get it working but before I import all service from angular2-mdl but now export not found with MdlDialogService and MdlDialogreference so I need import them from `import {MdlDialogService, MdlDialogReference} from 'angular2-mdl/components/dialog/mdl-dialog.service';` Does this normal – istiti Oct 11 '16 at 10:08
  • you need to import from 'angular2-mdl': import {MdlDialogService, MdlDialogReference} from 'angular2-mdl' – michael Oct 11 '16 at 10:11
  • YES that's what I did ! please check http://i.imgur.com/aNFnmbT.jpg export are failed – istiti Oct 11 '16 at 10:35
  • strange. i'm using beta.25 of wepback but this could not be the problem (here is my testproject: https://github.com/fit-4-angular-2/course-menu. can you post the content of the folder npde_modules/angualr2-mdl? – michael Oct 11 '16 at 10:50
  • UDPATE: with cli17 I don't have error ! anyway forget this before ! – istiti Oct 11 '16 at 11:12
  • @istiti never mind! i know the tooling is sometimes really a big problem – michael Oct 11 '16 at 11:41
0

I suppose that MdlModule and Angular2DataTableModule are some externals libs. If they don't include *.metadata.json for each of their Angular files, your AoT compilation cannot know what they do. You can't do much about it, just submit an issue so they update their libs to be compatible with AoT.

But for your FileDropDirective, I can't tell without the code.

Noémi Salaün
  • 4,866
  • 2
  • 33
  • 37
  • How can I resolve it myself until fixed, there is way to achieve? some docs? – istiti Oct 05 '16 at 08:03
  • You can clone their project and build it yourself with the proper AoT configuration. Then call `npm pack` to generate a zip version of their lib for NPM. Then in your project, `npm install /path/to/this/zip.tar.gz` to override the public NPM version with your new AoT locale version. – Noémi Salaün Oct 05 '16 at 08:10
  • by example: I tried `npm pack angular2-data-table` I get it then I need edit it no? before install. How and What I need to change to get it AoT-able :) thanks – istiti Oct 05 '16 at 08:21
  • You should `git clone` angular2-data-table, edit it, compile and build it with AoT, `npm pack` it, and `npm install` it in your project. For the AoT compilation part, you can start with https://angular.io/docs/ts/latest/cookbook/aot-compiler.html. You can also look at some other libs that already handle AoT compilation, like https://github.com/noemi-salaun/ng2-logger – Noémi Salaün Oct 05 '16 at 08:46
  • not sure I'm able to get this lib able to be compiled using AoT but will contact team, hope will be enhanced, your logger seems nothing big change https://github.com/noemi-salaun/ng2-logger/commit/a6d5c3f03976b5abe1a48c2d607635de5245245e you only add ` "skipMetadataEmit": false` that's all ? – istiti Oct 05 '16 at 10:01