CODEWITHSUNDEEP
shared-librariesangular6npm-link
codeNameLily
codeNameLily

Reputation: 333

Angular 6 Library - Difficulty symlinking into new project

I have an Angular 6 library that I am trying to export individual components from. Very much the same as Google Material Design.

I followed this tutorial: https://blog.angularindepth.com/creating-a-library-in-angular-6-87799552e7e5 and followed these guidelines: https://github.com/angular/angular-cli/wiki/stories-create-library

When I try to import the library into a new project (created by the angular cli), I'm running into errors.

libraries package.json: { "name": "sample-library", "version": "0.0.1", "peerDependencies": { "@angular/common": "^6.0.0-rc.0 || ^6.0.0", "@angular/core": "^6.0.0-rc.0 || ^6.0.0", "sass-flex-grid": "1.0.4", "rxjs": "6.2.2", "ng-inline-svg": "8.0.1" }, "dependencies": { } }

both projects' top-level package.json "@angular/animations": "6.0.3", "@angular/common": "6.1.4", "@angular/compiler": "6.1.4", "@angular/core": "6.1.4", "@angular/cli": "6.1.5"

I am using npm link to import my library into another project.

After googling for a while, it started to feel like a symlink issue, so I added "preserveSymlinks": true, to my angular.json file of my new project that I'm importing the library into. That creates a new group of errors:

ERROR in ./node_modules/imported-library/fesm5/imported-library.js
Module not found: Error: Can't resolve 'ng-inline-svg' in 
'/Users/mp945gl/Projects/new/new/node_modules/imported-library/fesm5'

ERROR in ./node_modules/imported-library/fesm5/imported-library.js
Module not found: Error: Can't resolve 
'rxjs/add/observable/combineLatest' in 
'/Users/mp945gl/Projects/new/new/node_modules/imported-library/fesm5'

ERROR in ./node_modules/imported-library/fesm5/imported-library.js
Module not found: Error: Can't resolve 'rxjs/add/observable/of' in 
'/Users/mp945gl/Projects/new/new/node_modules/imported-library/fesm5'

ERROR in ./node_modules/corteva-component-library/fesm5/imported- 
library.js
Module not found: Error: Can't resolve 'rxjs/add/observable/zip' in 
'/Users/mp945gl/Projects/new/new/node_modules/imported-library/fesm5'

It seems like the module isn't correctly exporting rxjs or the inline-svg dependencies; From troubleshooting, these seem to be the most relevant file snippets

public_api.ts : 
export * from './lib/imported-library.service';
export * from './lib/imported-library.module';
export * from './lib/components/accordion/accordion.module';
export * from './lib/components/form-elements/checkbox/checkbox.module';

tsconfig.lib.json
"compilerOptions": {
  "baseUrl": "./",
  "outDir": "../out-tsc/lib",
  "target": "es5",
  "module": "es2015",
  "moduleResolution": "node",
  "declaration": true,
  "sourceMap": true,
  "inlineSources": true,
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
  "importHelpers": true,
  "types": [],
  "lib": [
    "dom",
    "es2015"
],
"paths": {
  "@angular/*": [
    "../node_modules/@angular/*"
  ],
  "rxjs/*": ["../node_modules/rxjs/*"]
  }
}

I am really feeling like it's related to the symlink. Any help would be incredibly appreciated. I'm out of ideas.

Upvotes: 4

Views: 1400

Answers (1)

Rakesh A
Rakesh A

Reputation: 229

Try adding 'preserveSymlinks' property with value 'true' to your 'angular.json' like below

"projects": {
  "<your app name>": {
    ...
    "projectType": "application",
    ...
    "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
              "options": {
                 ...
                 "preserveSymlinks": true,
                 ...
              },
              "configurations": {
                 "production": {
                    ...
                    "preserveSymlinks": true,
                    ...
                 }

Upvotes: 1

Related Questions