JiT compilation

[lgutie16]

I just found an error trying to make tests with the a library created using angular2-library

So, I followed the next steps:

1. CREATE LIBRARY ( name: library-angular )

1.1. yo angular2-library

1.2. npm run build (nothing was modified)

1.3 cd src

1.4. npm link

2. CREATE ANGULAR APP

2.1 ng new myApp

2.2 npm link library-angular

2.3 modify src/app/app.module.ts, to make it looks like this:

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

import { AppComponent } from './app.component';
import { SampleModule } from 'library-angular';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    SampleModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2.4 add the next line in src/app/app.component.html

<sample-component> </sample-component>

2.5 run app using ng serve -o

The bug appears in the browser console and it says

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

SOLUTION run app using ng serve -aot

It makes me guest that something is broken in the JiT compilation and for that reason the only way to make my library work well was running my app using Ahead of Time compilation.

[jvandemo]

@lgutie16 — I am unable to reproduce this.

What version of Angular CLI are you using? Are you running on Mac or Windows?

Thanks in advance!

[lgutie16]

Angular CLI 1.1.0 OS Ubuntu 17.04

The problem doesn't appear in your machine terminal, and the project seems to run well, but after, if you go to the browser console you can see the error.

Futhermore, the reproduction of the error must be done in a machine with no global configurations, maybe you've got something installed in your machine which make Angular run with aot compilation (I'm just guessing)

[aasukisuki]

Same problem here with the same workaround.

@angular/cli: 1.2.0
node: 6.10.0
os: win32 x64 (Windows 10)
@angular/animations: 4.3.1
@angular/common: 4.3.1
@angular/compiler: 4.3.1
@angular/core: 4.3.1
@angular/forms: 4.3.1
@angular/http: 4.3.1
@angular/platform-browser: 4.3.1
@angular/platform-browser-dynamic: 4.3.1
@angular/router: 4.3.1
@angular/cli: 1.2.0
@angular/compiler-cli: 4.3.1
@angular/language-service: 4.3.1

[aasukisuki]

Quick follow-up. I had added the path mapping for angular-cli incorrectly. I had added it to my source library, and not my consuming application. Once I fixed that, the problem went away.

[jvandemo]

@lgutie16 — Can you verify if you have the path mapping in place, as @aasukisuki suggests? Thanks!

[jvandemo]

@aasukisuki — Thank you for your follow-up 👍

[lishichao1002]

@lgutie16 I met the same problem with you.

The generator-angular2-library document says:

12. If you are using an Angular CLI application to consume your library, make sure to set up a path mapping in /src/tsconfig.app.json of your consuming application (not your library):

    {
    "compilerOptions": {
    // ...
    // Note: these paths are relative to `baseUrl` path.
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ]
    }
    }
    }

[jvandemo]

@lgutie16 — Can you please verify if you have the path mapping set up correctly?

@lishichao1002 — Thank you for sharing 👍

[lishichao1002]

@jvandemo I uploaded a test code in github repo. generator-angular2-library-test

The lib in “lib” branch. The test app in "app" branch.

In lib branch

npm install
npm run build
cd dist
npm link

In app branch

npm install
npm link ngx-ourpalm-table
npm start

[scottkruyswyk]

I'm having the same issue as @lgutie16:

Using:

• angular/cli: 1.3.2
• node: 8.4.0
• npm: 5.3.0
• os: darwin x64
• generator-angular2-library: 11.2.0

Steps:

1. yo angular2-library (library name: angular-components)
2. npm run build (nothing modified)
3. cd dist
4. npm link
5. ng new testApp
6. cd testApp
7. npm install
8. npm link angular-components
9. modify src/tsconfig.app.json:

   {
   "extends": "../tsconfig.json",
   "compilerOptions": {
   "outDir": "../out-tsc/app",
   "baseUrl": "./",
   "module": "es2015",
   "types": [],
   "paths": {
     "@angular/*": [
       "../node_modules/@angular/*"
     ]
   }
   },
   "exclude": [
   "test.ts",
   "**/*.spec.ts"
   ]
   }

10. modify src/app/app.module.ts:

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

import { AppComponent } from './app.component'; import { SampleModule } from 'angular-components';

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

11. `ng serve` - gives me the following error in browser:

Uncaught Error: Unexpected value 'SampleModule' imported by the module 'AppModule'. Please add a @NgModule annotation. at syntaxError (compiler.es5.js:1690) at compiler.es5.js:15382 at Array.forEach () at CompileMetadataResolver.webpackJsonp.../../../compiler/@angular/compiler.es5.js.CompileMetadataResolver.getNgModuleMetadata (compiler.es5.js:15365) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._loadModules (compiler.es5.js:26795) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAndComponents (compiler.es5.js:26768) at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler.compileModuleAsync (compiler.es5.js:26697) at PlatformRef.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModuleWithZone (core.es5.js:4536) at PlatformRef.webpackJsonp.../../../core/@angular/core.es5.js.PlatformRef_.bootstrapModule (core.es5.js:4522) at Object.../../../../../src/main.ts (main.ts:11)

12. Running the same setup with `ng serve -aot` works fine

Attached is a zip file of the component library and consuming application
[angular-library-example-error.zip](https://github.com/jvandemo/generator-angular2-library/files/1268033/angular-library-example-error.zip)