search

gmostert / ng2-breadcrumb

This is an angular 2 component that creates a breadcrumb trail. It hooks into the angular2/router, to dynamically build up the crumb trail once a component is routed to.
MIT License
102 stars 80 forks source link

AoT compilation raises error #33

Open GuskiS opened 7 years ago

GuskiS commented 7 years ago

I'm trying to implement AoT compilation but I'm getting error:

Error: Unexpected value 'Ng2BreadcrumbModule' imported by the module 'SharedModule'
    at /home/guskis/Projects/web/node_modules/@angular/compiler/bundles/compiler.umd.js:12304:33
    at Array.forEach (native)
    at CompileMetadataResolver._loadNgModuleMetadata (/home/guskis/Projects/web/node_modules/@angular/compiler/bundles/compiler.umd.js:12289:51)
    at CompileMetadataResolver.getUnloadedNgModuleMetadata (/home/guskis/Projects/web/node_modules/@angular/compiler/bundles/compiler.umd.js:12265:23)
    at addNgModule (/home/guskis/Projects/web/node_modules/@angular/compiler/bundles/compiler.umd.js:17275:43)
    at /home/guskis/Projects/web/node_modules/@angular/compiler/bundles/compiler.umd.js:17286:16
    at Array.forEach (native)
    at _createNgModules (/home/guskis/Projects/web/node_modules/@angular/compiler/bundles/compiler.umd.js:17285:28)
    at analyzeNgModules (/home/guskis/Projects/web/node_modules/@angular/compiler/bundles/compiler.umd.js:17182:16)
    at analyzeAndValidateNgModules (/home/guskis/Projects/web/node_modules/@angular/compiler/bundles/compiler.umd.js:17186:20)
Compilation failed

Shared module:

@NgModule({
  imports: [
    Ng2BreadcrumbModule,
    // ...
  ],
  exports: [
    Ng2BreadcrumbModule,
    // ...
  ],
  providers: [
    BreadcrumbService,
    // ...
  ]
})
plourenco commented 7 years ago

Did you solved it?

GuskiS commented 7 years ago

Nope, can't compile it :(

gmostert commented 7 years ago

I haven't worked with the AOT compiler yet, so I'm a bit in the dark here. It seems that there are other projects with similar issues, found this post https://github.com/angular/angular/issues/11438 which have a couple of suggestions.

GuskiS commented 7 years ago

For what I have read around the web, you need to include .d.ts file, not sure if this helps.

dschmitz-gsits commented 7 years ago

Any idea when this can be resolved by? Trying to run this with angular 2.4.1 and it won't compile due to the following error:

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in /node_modules/ng2-breadcrumb/node_modules/@angular/core/src/metadata/ng_module.d.ts

bipinbn commented 7 years ago

I am facing the same issue as well. Any update on when we might get fix for this issue. Thanks in advance.

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol NgModule in C:/nocoder/RnD/Development/node_modules/ng2-breadcrumb/node_modules/@angular/core/src/metadata/ng_module.d.ts, resolving symbol NgModule in C:/nocoder/RnD/Development/node_modules/ng2-breadcrumb/node_modules/@angular/core/src/metadata.d.ts, resolving symbol NgModule in C:/nocoder/RnD/Development/node_modules/ng2-breadcrumb/node_modules/@angular/core/src/core.d.ts, resolving symbol NgModule in C:/nocoder/RnD/Development/node_modules/ng2-breadcrumb/node_modules/@angular/core/index.d.ts, resolving symbol Ng2BreadcrumbModule in C:/nocoder/RnD/Development/node_modules/ng2-breadcrumb/app/app.module.ts, resolving symbol Ng2BreadcrumbModule in C:/nocoder/RnD/Development/node_modules/ng2-breadcrumb/app/app.module.ts

GuskiS commented 7 years ago

@gmostert any progress on this?

gmostert commented 7 years ago

@TrevorBroderick1 managed to convert this project into using AOT (thnx bud), this should hopefully resolve the above issue.

GuskiS commented 7 years ago

@gmostert I just switched from systemJS to webpack and now I have this error: Unexpected value '[object Object]' imported by the module 'AppModule' in my browser console. Using latest version with Ng2BreadcrumbModule.forRoot() in app.module.ts imports. I sure it is your libraries caused error because if I move it to shared.module.ts then I get Unexpected value '[object Object]' imported by the module 'SharedModule'. Any ideas?

If I remove all instances of and don't include Ng2BreadcrumbModule, app runs fine.

douglasrehem commented 7 years ago

I'm getting the erro

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator',

rramo012 commented 7 years ago

Also getting the error:

ERROR in Error encountered resolving symbol values statically. Calling function 'makeDecorator',

After a little digging I found similar reports here: https://github.com/angular/angular-cli/issues/3707

MarkDeVerno commented 7 years ago

Same. Seems to be the error talked about in item #8. Unfortunately, changing dependencies to peerDependencies in package.json didn't seem to help.

GuskiS commented 7 years ago

Guys, I suggest you to export this to your own Directive and Component so that you can use AoT. I did that, did some modifications and have fully working breadcrumbs with AoT.

douglasrehem commented 7 years ago

@GuskiS Can you share your modifications?

GuskiS commented 7 years ago

Those modifications were for my use cases only. I didn't change anything to make it work with AoT - it does work out of box. Just copy-paste. Also, this package includes angular itself. So basicly I had 2 angular libraries within my app because of this package. I found out with this - https://github.com/th0r/webpack-bundle-analyzer

n4uoase commented 7 years ago

I'm working with @angular/compiler 2.4.10 and ng2-breadcrumb@0.5.8. When I try to compile with AOT I get nearly the same error message as stated above. But in my case the resolving Symbol is not MgModule but Injectable. Anybody able to help me with this? Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol Injectable in client-app/node_modules/ng2-breadcrumb/node_modules/@angular/core/core.d.ts

n4uoase commented 7 years ago

There is a suggestion of solving this by editing the package.json file within this module. According to @rramo012 we have to move the angular dependncies to peerDependencies like he mentioned in the 3rd post here. I tried this, but still getting the same error.

cgeo7 commented 7 years ago

anyone solved this issue yet?

rubiktubik commented 7 years ago

I have the same issue:

ERROR in Error encountered resolving symbol values statically. Calling function 'ɵmakeDecorator', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function

Can't do a production compile

Is it a AOT-compiler issue?

evanjmg commented 7 years ago

I've been using the latest for the latest in AOT for 6 months - I haven't had any issues - angular 4.1 I'll upgrade and try to reproduce. That particular error means you're declaring your imports like so const importedDependency = () => {} , when you should be declaring like so function importedDependency() { } - There's nothing that I see in ngBreadcrumbs that I see that can cause this. Please read this before filing and issue regarding AOT - https://medium.com/@isaacplmann/making-your-angular-2-library-statically-analyzable-for-aot-e1c6f3ebedd5 - For anyone having issues please upgrade to the latest breadcrumb and reproduce the error in the console and paste your log, versions, and imports of ngbreadcrumb here. I'd be happy to help.

rubiktubik commented 7 years ago

OK, thank you for the answer. I will look into my code to solve the problem.

Caroga commented 7 years ago

Hi,

I'm using angular-cli, using the latest packages and keep getting the following error. 

ERROR in Error encountered resolving symbol values statically. Function calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 194:50 in the original .ts file), resolving symbol NgModule in C:/wam
4/www/productbuilder/node_modules/ng2-breadcrumb/node_modules/@angular/core/core.d.ts, resolving symbol Ng2BreadcrumbModule in C:/wamp64/www/productbuilder/node_modules/ng2-breadcrumb/bundles/app.module.d.ts, resolving symbol Ng2BreadcrumbModule in C:/wamp64/
w/productbuilder/node_modules/ng2-breadcrumb/bundles/app.module.d.ts

This is my packages.json:

{
  "name": "product-builder",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "angular2-jwt": "^0.2.3",
    "core-js": "^2.4.1",
    "ng2-bootstrap": "^1.4.0",
    "ng2-breadcrumb": "^0.5.14",
    "ng2-dragula": "^1.3.1",
    "rxjs": "^5.1.0",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.1.1",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "2.5.45",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

This is my app.module.ts:


import {Ng2BreadcrumbModule} from "ng2-breadcrumb/bundles/app.module";

/**
 *
 * @returns {{tokenGetter: (()=>string)}}
 */
export function provideAuthFactory() {
    return {
        tokenGetter: (() => localStorage.getItem('token'))
    };
}

@NgModule({
    declarations: [
        AppComponent,
        ...
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        Ng2BootstrapModule.forRoot(),
        Routing,
        ReactiveFormsModule,
        Ng2BreadcrumbModule.forRoot(),
        DragulaModule
    ],
    providers: [
        ApiHttpService,
        ActionService,
        AlertService,
        LoginService,
        ProductService,
        ElementService,
        SegmentService,
        AuthenticatedGuard,
        UserDataService,
        RefreshService,
        AuthHttp,
        {
            provide: provideAuth,
            useFactory: provideAuthFactory
        }
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

I removed the some components and imports as they just fill space.

npm list --depth=0

$ npm list --depth=0
product-builder@0.0.0 C:\wamp64\www\productbuilder
+-- @angular/animations@4.2.2
+-- @angular/cli@1.1.1
+-- @angular/common@4.2.2
+-- @angular/compiler@4.2.2
+-- @angular/compiler-cli@4.2.2
+-- @angular/core@4.2.2
+-- @angular/forms@4.2.2
+-- @angular/http@4.2.2
+-- @angular/language-service@4.2.2
+-- @angular/platform-browser@4.2.2
+-- @angular/platform-browser-dynamic@4.2.2
+-- @angular/router@4.2.2
+-- @types/jasmine@2.5.45
+-- @types/node@6.0.78
+-- angular2-jwt@0.2.3
+-- codelyzer@3.0.1
+-- core-js@2.4.1
+-- jasmine-core@2.6.3
+-- jasmine-spec-reporter@4.1.0
+-- karma@1.7.0
+-- karma-chrome-launcher@2.1.1
+-- karma-cli@1.0.1
+-- karma-coverage-istanbul-reporter@1.3.0
+-- karma-jasmine@1.1.0
+-- karma-jasmine-html-reporter@0.2.2
+-- ng2-bootstrap@1.6.3
+-- ng2-breadcrumb@0.5.14
+-- ng2-dragula@1.5.0
+-- protractor@5.1.2
+-- rxjs@5.4.1
+-- ts-node@3.0.6
+-- tslint@5.3.2
+-- typescript@2.3.4
`-- zone.js@0.8.12

I have no clue on how to solve this issue and have a very strong feeling this is something connected to this issue.

Any idea what I should do?