Error while consuming the lib from another Angular4 project

h657070128 commented 7 years ago

Hi, Thanks for building such a great quick-start library repo. It includes almost every aspects I can think of. I ran into a problem and struggled for a couple of days. Hope someone can help. I follow the guide and

npm run build

then I want consume it in my another project by

npm install --save my/local/path/to/angular-quickstart-lib/dist

then in app.module.ts, I do:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { LibModule } from 'quickstart-lib';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    LibModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

then I use <my-lib></my-lib> in app.component.html

Run my project, in the browser console it shows:

Uncaught Error: Unexpected value 'LibModule' imported by the module 'AppModule'. Please add a @NgModule annotation.
    at syntaxError (compiler.es5.js:1689)
    at compiler.es5.js:15373
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15356)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26679)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileModuleAndComponents (compiler.es5.js:26652)
    at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26581)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_._bootstrapModuleWithZone (core.es5.js:4595)
    at PlatformRef_.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4581)
    at Object.../../../../../src/main.ts (main.ts:11)

I am using the same version of Angular (4.2.5) to avoid potential failure (but I do not think it is the root cause). Do you have any ideas? Actually I tried to build a library without using any seeds previously, following the steps of ngc, rollup, etc. and it ends up with this same problem.

Node version: 8.0.0 Npm version: 5.0.1 Typescript version: 2.3.4

aminebizid commented 7 years ago

Please check if the lib is present in your node_modules folder

h657070128 commented 7 years ago

Hi @zigzag95, it's there. The directory is like:

node_modules/
├── ...
├── quickstart-lib/
|  └── bundles/
|  | ├── quickstart-lib.umd.js
|  | ├── quickstart-lib.umd.js
|  | ├── quickstart-lib.umd.min.js
|  | └── quickstart-lib.umd.min.js.map
|  └── src/
|  |  ├── component/
|  |  |  └── lib.component.d.ts
|  |  ├── service/
|  |  |  └── lib.service.d.ts
|  |  └── module.d.ts
|  └── index.d.ts
|  └── quickstart-lib.d.ts
|  └── quickstart-lib.es5.js
|  └── quickstart-lib.es5.js.map
|  └── quickstart-lib.metadata.json
|  └── LICENSE
|  └── package.json
|  └── ...
├── ...

h657070128 commented 7 years ago

The doc from jvandemo/generate-angular2-library saved me. Turns out that I forgot to set up the path mapping in /src/tsconfig.app.json in my "Angular CLI-generated" consuming application (not library).

{
  "compilerOptions": {
    // ...
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
    }
  }
}

mina-skunk commented 7 years ago

I have path mapping in /src/tsconfig.app.json but still getting this error, Also tried ng serve --preserve-symlinks

filipesilva / angular-quickstart-lib

Error while consuming the lib from another Angular4 project #33