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

consigliory commented 7 years ago

Hi. got this error by adding module. Looks like it is smth webpack related but I am not sure what exactly is wrong. do you have any suggestions on how to fix it?!

SteveSandersonMS commented 7 years ago

Sorry, I don't know about StormpathModule. If you're able to track this down to something you think is a bug in the code in this repo (as opposed to a TypeScript compilation error or similar) then please let us know!

SteveSandersonMS commented 7 years ago

Actually I do see what the issue is. It's here: https://github.com/stormpath/stormpath-sdk-angular/blob/master/package.json#L110

As that line indicates, stormpath-sdk-angular strictly depends on Angular 2.4.0+. If your application is on a previous version of Angular, then you'll end up bundling both versions of Angular (which obviously you don't want), plus it won't work anyway because the Stormpath module will be tagged with module metadata from the 2.4.0+ version which is not the same metadata object as the one from the previous version.

Some ways you could deal with this:

Update your application to Angular 2.4+. The reason the templates aren't already on 2.4+ is because that's not compatible with server-side prerendering. So now you have two sub-options:
- Try to persuade the Angular / Angular Universal folks to release an update where server-side prerendering does work with 2.4+
- Or, disable server-side prerendering (remove the asp-prerender-module tag helper from your Index.cshtml)
Or, try to get the StormPath people to change their declared dependency version to 2.0.0+. It's perfectly possible that they have no real need to depend on 2.4+ and have only declared that version dependency arbitrarily. If they could work with 2.0.0+, then they should declare that as the dependency version.
- Also, if you do speak with the StormPath people, please try to get them to declare the Angular dependency as a peerDependency rather than a dependency. This is the correct way for plugin-type libraries to have framework dependencies, so as to avoid bundling multiple versions of the framework. Maybe they have a good reason for not using peerDependency (I don't know), but it's possible that they just aren't completely familiar with NPM.

mraible commented 7 years ago

Hello @SteveSandersonMS. I'm the maintainer of the Stormpath library. Is changing from dependencies to peerDependencies and setting them to version "^2.0.0" enough or do I have to change the devDependencies version to 2.0.0 as well? The reason we're using 2.4 is so we can use 2.3's inheritance for components in our demo.

SteveSandersonMS commented 7 years ago

@mraible Thanks for getting in touch. If you have a runtime dependency on a 2.3 feature, then you'll need to declare the dependency as ^2.3.0. If you only need 2.0+ at runtime, then you can declare it as ^2.0.0.

Declaring it as a peerDependency is better than declaring it as a dependency in this case, because if the developer's application has an incompatible dependency (e.g., on Angular 2.1.0) then NPM will provide a clear warning and will not install both versions of Angular (which would lead to hard-to-debug runtime issues such as the Unexpected value ... imported error as reported here).

do I have to change the devDependencies version to 2.0.0 as well

You don't have to change devDependencies - it doesn't affect other libraries that depend on yours (it only affects what NPM will pull down when you're working on your library itself).

mraible commented 7 years ago

@SteveSandersonMS I'm not sure if it's relevant, but I'm trying to make things work with this seed:

https://github.com/MarkPieszak/aspnetcore-angular2-universal

I've changed peerDependencies to the following:

  "peerDependencies": {
    "@angular/core": "^2.0.0",
    "@angular/forms": "^2.0.0",
    "@angular/http": "^2.0.0",
    "rxjs": "^5.0.2",
    "ng2-webstorage": "1.4.3",
    "angular2-cookie": "^1.2.6"
  },

I ran npm link and npm run build:dist in stormpath-sdk-angular. Then I ran npm link angular-stormpath in the aspnetcore-angular2-universal project.

I added StormpathModule as element in const MODULES in Client/app/platform-modules/app.common.module.ts. When I try to run things with dotnet run, I see the following error:

fail: Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware[0]
      An unhandled exception has occurred: Call to Node module failed with error: Error: Unexpected value 'StormpathModule' imported by the module 'AppCommonModule'
          at new Error (native)
          at SyntaxError.BaseError [as constructor] (/Users/mraible/dev/aspnetcore-angular2-universal/node_modules/@angular/compiler/bundles/compiler.umd.js:1597:31) [UNIVERSAL request]
          at new SyntaxError (/Users/mraible/dev/aspnetcore-angular2-universal/node_modules/@angular/compiler/bundles/compiler.umd.js:1795:20) [UNIVERSAL request]
          at /Users/mraible/dev/aspnetcore-angular2-universal/node_modules/@angular/compiler/bundles/compiler.umd.js:18313:48 [UNIVERSAL request]
          at Array.forEach (native) [UNIVERSAL request]
          at CompileMetadataResolver.getNgModuleMetadata (/Users/mraible/dev/aspnetcore-angular2-universal/node_modules/@angular/compiler/bundles/compiler.umd.js:18298:53) [UNIVERSAL request]
          at CompileMetadataResolver.getNgModuleSummary (/Users/mraible/dev/aspnetcore-angular2-universal/node_modules/@angular/compiler/bundles/compiler.umd.js:18240:56) [UNIVERSAL request]
          at /Users/mraible/dev/aspnetcore-angular2-universal/node_modules/@angular/compiler/bundles/compiler.umd.js:18311:76 [UNIVERSAL request]
          at Array.forEach (native) [UNIVERSAL request]
          at CompileMetadataResolver.getNgModuleMetadata (/Users/mraible/dev/aspnetcore-angular2-universal/node_modules/@angular/compiler/bundles/compiler.umd.js:18298:53) [UNIVERSAL request]
          at JitCompiler._loadModules (/Users/mraible/dev/aspnetcore-angular2-universal/node_modules/@angular/compiler/bundles/compiler.umd.js:27371:68) [UNIVERSAL request]
          at JitCompiler._compileModuleAndComponents (/Users/mraible/dev/aspnetcore-angular2-universal/node_modules/@angular/compiler/bundles/compiler.umd.js:27331:56) [UNIVERSAL request]
          at JitCompiler.compileModuleAsync (/Users/mraible/dev/aspnetcore-angular2-universal/node_modules/@angular/compiler/bundles/compiler.umd.js:27297:25) [UNIVERSAL request]
          at NodePlatform.bootstrapModule (/Users/mraible/modules/platform-node/node-platform.ts:515:21) [UNIVERSAL request]

I tried adding angular-stormpath to the list of vendor modules in webpack.config.vendor.js, but it doesn't help. Here's a PR for my change:

https://github.com/stormpath/stormpath-sdk-angular/pull/61

MarkPieszak commented 7 years ago

You have import { StormPathModule } from ... in that app.common file?

Also, how are you generating your dist folder for the library, it might be exporting things incorrectly? If it's saying unexpected value it might not be seeing that it's a Module etc.

Otherwise having the peerDeps be 2.0+ is probably ideal! Unless you're using specific things related to higher bug fix releases of 2.x, you might as well keep it as low as possible.

mraible commented 7 years ago

@MarkPieszak Yes, I have import { StormpathModule } from 'angular-stormpath';. Here's my commands:

"build:umd": "webpack --config webpack.config.umd.js",
"build:ngc": "ngc -p tsconfig-ngc.json",
"build:dist": "npm run build:umd && npm run build:ngc",

Relevant files: webpack.config.umd.js and tsconfig-ngc.json.

I used generator-angular-library to help create the Stormpath library.

aspnet / JavaScriptServices

Unexpected value 'StormpathModule' imported by the module 'AppModule' #623