jvandemo / generator-angular2-library

Yeoman generator to create an Angular library
MIT License
752 stars 122 forks source link

Error SampleModule' imported by the module 'AppModule' on Generate Build With Angular 5 #232

Open abalad opened 7 years ago

abalad commented 7 years ago

I updated the packages from this lib to the new version of Angular 5, but consuming the library in an application generates the following error.

Unexpected value 'SampleModule' imported by the module 'AppModule'. Please add a @NgModule annotation.

package.json

"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0",
"@compodoc/compodoc": "^1.0.0-beta.10",
"@types/jest": "^19.2.3",
"@types/node": "~6.0.60",
"angular-in-memory-web-api": "^0.3.2",
"codelyzer": "~2.0.0",
"concurrently": "^3.4.0",
"core-js": "^2.4.1",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-rename": "^1.2.2",
"gulp-rollup": "^2.11.0",
"jest": "^20.0.3",
"jest-preset-angular": "^2.0.2",
"lite-server": "^2.3.0",
"node-sass": "^4.5.2",
"node-sass-tilde-importer": "^1.0.0",
"node-watch": "^0.5.2",
"protractor": "~5.1.0",
"rollup": "^0.49.3",
"run-sequence": "^1.2.2",
"rxjs": "^5.1.0",
"systemjs": "^0.20.12",
"ts-node": "~2.0.0",
"tslint": "~4.5.0",
"typescript": "^2.5.2",
"zone.js": "^0.8.4"
lamstutz commented 7 years ago

to build the module with the new version of the compiler-cli (^5.0.0). you need to change the gulp task "ngc".

gulp.task('ngc', function () { return ngc(['-p', ${tmpFolder}/tsconfig.es5.json], (error) => { if (error) { throw new Error('ngc compilation failed: ' + error); } }); });

I don't think it resolves your mistake, but you could probably go further.

xSTLIFEx commented 7 years ago

@lamstutz Thanks! I had problem with ngc, everything work great now.

lamstutz commented 7 years ago

@xstlifex Is that the correction that fixed your problem? If it's another correction, I'll let you share it with us :)

abalad commented 7 years ago

@lamstutz I did exactly what you mentioned, it normally generates the build however when consuming it in an external application it presents that issue error

Note: I updated the dependencies of the Angular generator to Angular 5, using version 4.x works normally.

"@angular/common": "^5.0.0",
"@angular/compiler": "^5.0.0",
"@angular/compiler-cli": "^5.0.0",
"@angular/core": "^5.0.0",
"@angular/platform-browser": "^5.0.0",
"@angular/platform-browser-dynamic": "^5.0.0"
abalad commented 7 years ago

I changed my entire design structure to AngularCLI because I can not consume my library by doing the build with Angular 5 with this generator.

tagkiller commented 7 years ago

@xstlifex Hi, could you please share you workaround to make it work ? It has been a few days now that I'm struggling to consume a library I did in my main app.

mu250234 commented 6 years ago

@tagkiller got any solution , I am also facing this issue

tagkiller commented 6 years ago

Hi @mu250234, Finally, I got it working by using the ng-packagr utility. I'm waiting for other libraries to grow a bit, like micro-bundle. The particularity with ng-packagr is that you have a complete npm package that is generated in dist, so you have to publish this one, and to separate those two directories on every aspect. Regards,

mu250234 commented 6 years ago

Hi @tagkiller , thanks , I tried with np-packagr , but getting the following error do you have any idea? BUILD ERROR ENOENT: no such file or directory, open 'C:\vakaCommonLib\ng2Generator(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(e xports, require('@angular\core'), require('@angular\common')) : typeof define === 'function' && define.amd ? define(['exports', '@angula r\core', '@angular\common'], factory) : (factory((global.ng2generator = {}),global.ng.core,global.ng.common)); }(this, (function (exports,core,common) { 'use strict'; ???????????????????????????????/

my index.ts import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; import { SampleComponent } from './sample.component';

export * from './sample.component';

@NgModule({ imports: [ CommonModule ], declarations: [ SampleComponent ], exports: [ SampleComponent ] }) export class SampleModule { static forRoot(): ModuleWithProviders { return { ngModule: SampleModule }; } }

tagkiller commented 6 years ago

@mu250234 , unfortunately I can't help you on this one as I'm not really involved in your project and doesn't have the biggest picture. Sorry !