-
Notifications
You must be signed in to change notification settings - Fork 12k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Uncaught Unexpected value 'undefined' declared by the module 'AppModule' #1831
Comments
It has to do with barrels and not with angular or the cli directly. If you try to log out the values you are importing into your app module I bet they are undefined. Another way to get around the issue is to now use |
Thank you @deebloo. I tried it explicitly exporting the component the way you suggested and the barrel now works. I can import
I know I'm perhaps bothering a little bit too much around this. There's a workaround and it's good (Fill |
barrels can be tricky. all I know is that exporting using a wildcard sometimes causes issues. |
replace |
Not sure if my situation is related. But I have a module
index.ts export * from './sidebar.module.ts';
export * from './sidebar.component.ts'; sidebar.module.ts import { SidebarComponent } from './index';
@NgModule({
declarations: [ SidebarComponent ],
exports: [ SidebarComponent ]
})
export class SidebarModule {} And I was getting the same error
I had a bunch of other declarations and exports, but I narrowed down the problem to the export * from './sidebar.component';
export * from './sidebar.module'; Not sure is this is expected behavior, but this is what solved my specific problem. One thing to note is that I am not using CLI, but the angular2-webpack-starter. Not sure if that makes any difference. |
@caroso1222 could you provide a repo with the latest release where this happens? I'm wondering if it's a webpack problem with re-exporting. |
As far as I can tell, the issue here is related to circular dependencies. These worked fine in SystemJS, but Webpack2 seems to have some trouble in it, see webpack/webpack#1788. It manifests as It's not something we can solve on the CLI itself other than wait for it to be working on a future Webpack2 version. |
@filipesilva Would it be worthwhile to add something to try to detect when this problem occurs and issue a more useful error? In our stuff, when we suspect this problem, we put in an assertion-ish mechanism to alert when an import comes back undefined. Ugly and manual, but something automatic could improve the user experience? Or not worth chasing because Webpack will get improved anyway? |
Thanks @filipesilva. Sorry couldn't provide the asked repo, been kinda busy these days. I think I'll wait for the circular dependencies to be tackled on a future Webpack version. |
I filed the following issue on webpack which reproduces the same problem, but with a different scenario. I believe the solution to that might solve this issue as well. |
@pdelorme It's not working |
@kylecordes I have a ton of imports in my app module and it is the impossible task to try and find the circular dependency. Could you explain how you find it manually through assertions? I need help because the error undefined is giving me nothing. |
Oh yes, it is very easy:
Do that for each thing where you are suspicious about the import not working. |
Thank you!! On Thu, 10 Nov 2016 at 19:21, Kyle Cordes notifications@github.com wrote:
|
@kylecordes fixed it! Thanks again :) |
Guys, there is another simple solution for this. I have 2 modules which are somehow deep in the structure using each other. I ran into the same problem with circular dependencies with webpack and angular 2. I simply changed the way of how the one module is declared: ....
@NgModule({
imports: [
CommonModule,
FormsModule,
require('../navigation/navigation.module')
],
declarations: COMPONENTS,
exports: COMPONENTS
})
class DppIncludeModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: DppIncludeModule
};
}
}
export = DppIncludeModule; When I now using the imports statement on ngModule attribute I simply use: @NgModule({
imports: [
CommonModule,
ServicesModule.forRoot(),
NouisliderModule,
FormsModule,
ChartModule,
DppAccordeonModule,
PipesModule,
require('../../../unbranded/include/include.module')
],
.... With this all problems are away. |
same issue. I fix it by delete all index export file, then all file import path is specific path. besides, don't export default class. |
Thanks @psamsotha! |
I am facing same issue. "Unexpected value 'undefined' declared by the module 'AppModule' at SyntaxError.ZoneAwareError" Can anyone please help out to find what's wrong looking at http://stackoverflow.com/questions/43794233/unexpected-value-undefined-declared-by-the-module-appmodule-at-syntaxerror-z?noredirect=1#comment74668883_43794233 |
@kylecordes @Choleriker There's a plugin out there which in a very good way detects all the cyclic dependencies in a project: |
The cyclic dep checker is a great idea. But I hate to recommend ejecting a CLI app to get access to add such a webpack plugin. Ideally CLI would integrate it. |
Before import { abcComponent ,defComponent, xyzComponent,} from "./reports"; After import { abcComponent } from "./reports/abc-details/abc-details-component"; I need to make above changes in app.module.ts files in order to resolve mentioned error |
use: "export default RouterModule.forRoot(routes);" on the routing file instead |
Just in case anyone happens across this and makes the same stupid mistake I did and don't see the answer right in front of you... it wasn't even a circular dependency, I just had the component export duplicated in my
|
Ran into this issue. It was caused by renaming a bunch of classes (trying to ensure consistency), all of the imports were correct in the AppModule, something just wasn't working right. My solution was to log all of the imports and see which ones were undefined. This limited it to two and I bug fixed from there. I ended up just renaming the class again, compiling, and setting it back to the new name. |
I've the exact problem with Karma and its DynamicModule, my problem was an extra COMMA ( AFTER httpModule )
|
Thanks @abhinavsingi for providing a link to cyclic-dependency-checker plugin. Had already gone through all of the other tips provided here but the issue wasn't due to my import/export syntax or using barrel files, it was due to a handful of circular dependencies in the app. Super useful plugin and helped me finally resolve my issue after spending a couple hours trying to figure it out. |
Had the same problem. For me it was because I had 2 components with the exact same selector. |
In my case.. I made a really stupid mistake. I want you to check it out. |
@psamsotha Thanks so much. |
I was getting this error because of the barrels of my App
instead just
|
Barrel exports are problematic angular/angular-cli#1831
In case it helps somebody. I fixed my problem with https://github.com/aackerman/circular-dependency-plugin |
I have a circular dependency which i cannot prevent. Is this issue going to be fixed or do i need to remove my circular dependency? |
@Linksonder I don't think this issue is related to this project. It seems to it's just how webpack works. Try to remove everything from barrels except re-exports
./fileA.ts
./index.ts
|
The above solutions of importing from the "index" file rather than the folder works well but has the downright that everyone needs to know and understand the problem and be vigilant of the imports, which is impossible in a big team working on IDEs with imports autogeneration (IntelliJ will always try to import from ".." when possible for example). So in the enterprise library I am working on I renamed all "index" files "public_api", and the root public_api is re-exporting from all public_api files. I also added a tslint rule to prevent imports from public_api (disabled in the root file of course). This way the IDE always imports each class from its own file, not from the barrel but we have a nice "public_api tree" in the library. Hope this helps. |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Mac OSX El Capitan
Migrate from @1.0.0-beta.10 to @webpack
tl;dr: Create two components. One (Child) inside the other (Parent). Aggregate all the exports into the parent's barrel. Import the components into
app.module.ts
using the parent barrel and add them to the declarations array. App crashes.Detailed steps
Aggregate all exports within parent barrel so that
parent/index.ts
looks like this:parent/child/index.ts
looks like this:Now import the components using the parent barrel in
app.module.ts
and add it to the declarations array:Open up the app in the browser, console shows:
When the component is generated via cli, it's imported in
app.module.ts
using the path to the component itself. So it's no natively failing when using the cli ng generate. But according to the Angular Style Guide a barrel should recursively re-export all its "sub-barrels".Workaround: Just import all the components from their respective folders as stated in this OS post.
The text was updated successfully, but these errors were encountered: