Angular-cli: Unable to use *ngFor inside of Angular 6.0 libraries

[rpasechnikov]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Area

- [x] devkit
- [ ] schematics

Versions

Angular CLI: 6.0.8
Node: 8.11.1
OS: win32 x64
Angular: 6.0.7
NPM: 6.0.0

Repro steps

1. Create a angular application
2. Generate a new angular library inside of the application
3. Generate a basic component inside of the library
4. Build the angular library

import { Component } from '@angular/core';

@Component({
  selector: 'common-components-test',
  template: '<div>{{test}}</div>'
})
export class SideMenuComponent {
  public test: string = 'test 1';
  constructor() { }
}

1. Import that library into consuming application angular application 'ng new consumer' and 'npm install C:\dev\shared-app\dist\component-library '
2. Add ' to its app.component.ts
3. Serve the consuming application using 'ng serve'

Expected & actual: 'test 1' is visible on the screen

1. Update common-components-test to include *ngFor as below:

import { Component } from '@angular/core';

@Component({
  selector: 'common-components-test',
  template: '<div *ngFor="let item of items">{{item}}</div>'
})
export class SideMenuComponent {
  public items: string[] = ['1', '2'];
  constructor() { }
}

1. Update the library common-components.module.ts to include

import { CommonModule } from '@angular/common';

1. Update the library common-components.module.ts to include

imports: [ CommonModule ]

1. Build the angular library
2. Re-serve the consuming angular application

Expected: '1 2' is visible on the screen
Actual: nothing is visible on the screen. Opening the console reveals the following error:

The log given by the failure

ERROR Error: StaticInjectorError(AppModule)[NgForOf -> ViewContainerRef]: 
  StaticInjectorError(Platform: core)[NgForOf -> ViewContainerRef]: 
    NullInjectorError: No provider for ViewContainerRef!
    at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:1034)
    at resolveToken (core.js:1273)
    at tryResolveToken (core.js:1218)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
    at resolveToken (core.js:1273)
    at tryResolveToken (core.js:1218)
    at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:1113)
    at resolveNgModuleDep (core.js:8168)
    at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:8856)
    at resolveDep (core.js:9221)

Desired functionality

I would like to use angular directives inside of an angular library

Mention any other details that might be useful

An example of this is on: https://github.com/rpasechnikov/angularSharedLibraryExample

[alan-agius4]

Since you are using file property in package.json to resolve your library instead of tsconfig paths. You need to enable preserveSymlinks inside your build configuration in angular.json

In your angular.json locate build property under the architect, and in options add "preserveSymlinks": true

[rp0m]

That did it! Thanks Alan!

Do you mind elaborating a bit on the option? "Do not use the real path when resolving modules" - what is a real path and what exactly happens under the hood?

This is the documentation that I was able to find: https://github.com/angular/angular-cli/wiki/angular-cli

[alan-agius4]

This is a TypeScript flag.

Here are some useful links that explains this in more detail:
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-5.html
https://nodejs.org/api/cli.html#cli_preserve_symlinks

[rpasechnikov]

Thanks so much! 👍

I've updated the sample solution with a few shared components, etc. Hopefully this may serve as a basic example for someone else struggling with these basic concepts:

https://github.com/rpasechnikov/angularSharedLibraryExample

[EdisonSu768]

im just developing a pure angular library, and i can not add "preserveSymlinks": true in build options, when i npm link my library, i got the same error like
Error: StaticInjectorError(AppModule)[HttpHandler -> Injector]:
StaticInjectorError(Platform: core)[HttpHandler -> Injector]:
NullInjectorError: No provider for Injector!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}