Unexpected value 'Ng2CompleterModule' imported by the module 'AppModule'


#1

I’m trying to use this ng2-completer component inside of an ionic 2 project and I’m getting the following error.

`ngc error: Error: Unexpected value ‘Ng2CompleterModule’ imported by the module 'AppModule’
at C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\compiler\bundles\compiler.umd.js:14109:37
at Array.forEach (native)
at CompileMetadataResolver.getNgModuleMetadata (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\compiler\bundles\compiler.umd.js:14094:46)
at C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\compiler\bundles\compiler.umd.js:12936:58
at Array.forEach (native)
at OfflineCompiler.analyzeModules (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\compiler\bundles\compiler.umd.js:12935:21)
at CodeGenerator.codegen (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\compiler-cli\src\codegen.js:105:47)
at codegen (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\compiler-cli\src\main.js:7:81)
at Object.main (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\tsc-wrapped\src\main.js:30:16)
at Object. (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@angular\compiler-cli\src\main.js:14:9)

[14:26:22] ngc error: Compilation failed

[14:26:22]
[14:26:22] bundle prod started …
[14:26:22] Error: Could not resolve entry (.tmp/app/main.prod.js)
at C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules\rollup\dist\rollup.js:8602:28
at process._tickCallback (node.js:369:9)
[14:26:22] sass started …
[14:26:24] sass finished in 1.65 s
[14:26:24] minify started …
[14:26:24] cleancss started …
[14:26:24] uglifyjs started …
[14:26:24] Error: ENOENT: no such file or directory, open 'C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\www\build\main.js’
at Error (native)
at Object.fs.openSync (fs.js:549:18)
at Object.fs.readFileSync (fs.js:397:15)
at addFile (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules\uglify-js\tools\node.js:68:22)
at C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules\uglify-js\tools\node.js:79:17
at Array.forEach (native)
at Object.exports.minify (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules\uglify-js\tools\node.js:77:26)
at runUglifyInternal (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@ionic\app-scripts\dist\uglifyjs.js:34:19)
at runUglify (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@ionic\app-scripts\dist\uglifyjs.js:23:28)
at Object.uglifyjs (C:\Users\Hyrum\Documents\ProjectDev\test\ionic-conference-app\node_modules@ionic\app-scripts\dist\uglifyjs.js:9:12)
[14:26:25] cleancss finished in 1.07 s
[14:26:25] minify finished in 1.07 s
[14:26:25] build prod finished in 6.66 s
`

I’ve been unsuccessful in getting it to work in my application so I cloned the ionic conference app and built it according to the instructions given on the front page.
run “npm install” from the project root.
Install the ionic CLI with "npm install -g ionic"
run the project in a browser with “ionic serve”

The project runs fine and everything in it works.

I then add the ng2-completer module using the instructions given here and when I try to run the project again I get the above error.

I’ve looked for quite a bit for a solution and found this similar issue as well as this recent one.

Any help would be greatly appreciated. Before the update to RC0 I had this component in my app and it worked just fine. I also had it in my ionic 1 app with no problems. Now, with the update, my project won’t build and nothing I’ve tried has worked.


#2

Im in the same boat, but I know what the problem is, just haven’t solved it yet.

The line “ngc error: Error: Unexpected value ‘Ng2CompleterModule’ imported by the module ‘AppModule’” hints at the issue.

External modules need to transpiled with the AoT compiler if you are trying build your Ionic 2 project for a device (As of RC0 this uses the AoT compiler), because when you import a module, it apparently looks for metadata, which is stored in *metadata.json files, which the AoT compiler generates.

Following the guide here: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
I’ve been able to get it to generate the metadata files, but it still doesn’t work. I haven’t been able to find a complete example when building an external module.

This obviously requires you to transpile this ng2-completer yourself, or have the author do it.

Thats all the help I can give for now I’m afraid…

Ps. Oh btw, easy workaround is to use the JiT compiler, but that produces big slow apps. Still, you can avoid the error that way. Just add “–dev” to the end of the npm task: “build”: “ionic-app-scripts build --dev” (package.json)


#3

I do understand why it’s not working but I haven’t been able to find a viable solution either. I’d rather not have to have an app that is slow and bulky. It also looks like there’s not one single solution to fix all third party libraries that have this problem. I have several Ionic Apps with external modules that ran fine before the update. Now, if the modules aren’t transpiled with an AoT compiler they no longer work. This greatly reduces ionic developers’ options when it comes to use exernal modules :frowning:


#4

Ionic crew, would greatly appreciate some help on getting externally imported modules to work. I’m pretty confused about the whole situation. :slight_smile:


#5

the angular-cli also has trouble with this issue, see https://github.com/angular/angular-cli/pull/2291 and the proposed fix is working for angular-cli, but there is is a patch to webpack, and ionic 2 is not using webpack at the moment right? so where is the equivalent in ionic 2?


#6

As far as I know there is no equivalent in Ionic @mhartington There needs to be though or Ionic developers options when it comes to external modules are going to be greatly reduced.


#7

it is something that also needs to be fixed in rollup, the build tool ionic is using now instead of webpack, see https://github.com/rollup/rollup/issues/447


#8

I’m having this issue as well, haven’t been able to use any external npm modules because of it.


#9

@scottb We only have workarounds to run apps with external modules in development mode overriding rollup, but not in prod mode, it is out of our hands now.


#10

@mhartington Is there any release planned that will fix this so that we can use external modules again? My apps were functioning just fine before the latest release but because of this issue none of them are working as they all use external modules.


#11

Is this something that can be changed in the ionic build scripts or does it require the module developers to update their modules to support rollup? More and more threads I’ve been reading indicate that the modules themselves need to be updated…?


#12

I wrote to the forum but it does not seem.


#13

That’s what I’m wondering too :frowning: It’s starting to look like that might be the case


#14

has anyone made progress on this topic?

I got the same error including the angular2-qrcode module (https://github.com/SuperiorJT/angular2-qrcode).


#15

I’m also having a similar issue with an external component from npm not being accepted during a --prod build, but works perfectly on serve, and normal runs.