dzonatan / ngx-linky

Linky pipe for angular

ngx-linky

Angular pipe to find links in text input and turn them into html links. It was called the same "linky" in ngSanitize module of AngularJs (first). Since Angular does not have such pipe built in therefore this repo was created.

This is just a wrapper for Autolinker.js so all issues and feature requests related to autolinker should go to their issues!

Installation

npm install --save ngx-linky autolinker

Import LinkyModule or manually declare LinkyPipe in your app module.

import { LinkyModule } from 'ngx-linky';

@NgModule({
  imports: [
    LinkyModule
  ]
})
class YourAppModule {}

Usage

Use linky pipe with [innerHTML] (or outerHTML, depends on you) binding to get HTML correctly rendered:

<span [innerHTML]="yourText | linky"></span>

You can pass any autolinker option as a second pipe argument. For ex.:

<span [innerHTML]="myText | linky:{newWindow: false}"></span>

License

MIT

ngx-linky's Issues

ngx Linky fails to compile

Hi I added the package via npm i --save ngx-linky
Installed version 2.1.0

I added linkyModule to the module in question.

I then used linky in a component
<span [innerHTML]="msg | linky">

I ran the application and it failed to compile.

Error: Can't Resolve 'autolinker' in PathTongxLinky

Alternatives to Autolinker

Hi, thanks for your work! I'm having a problem with Autolinker and wondering if there's another library to use if they can't fix the issue.
gregjacobs/Autolinker.js#165

Thanks!

Support for angular 8

Angular v8.2.2

First I want to thank you for the great library. After I upgraded to angular 8 I am getting the following warning below.

npm WARN [email protected] requires a peer of @angular/common@^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 but none is installed. You must install peer dependencies yourself.

Cannot find source file 'linky-pipe.ts'

While karma test:

WARNING in ./~/angular2-linky/linky-pipe.js
Cannot find source file 'linky-pipe.ts': Error: Can't resolve './linky-pipe.ts' in '/Users/MYUSER/projects/MYAPP/node_modules/angular2-linky'

Travis build of my project: https://travis-ci.org/Sirimangalo/meditation-plus-angular/builds/154833766#L2408

Like hyperlink , can it detect phone number and turn Bold ?

Missing dependencies: autolinker

When I try to start my project I got:

An unhandled exception occurred: The target entry-point "ngx-linky" has missing dependencies:
 - autolinker

Increase angular version support

The peer dependencies of this library only go up to version 8 angular library.

Package.json

peerDependencies": {
    "@angular/common": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
    "@angular/core": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0",
    "autolinker": "^3.0.0"
  }

Every time I use ng-update I get an error and have to use the --force flag, which is displeasing. I see no reason not to bump the angular version

Fetching dependency metadata from registry...
                  Package "ngx-linky" has an incompatible peer dependency to "@angular/common" (requires "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" (extended), would install "10.2.1").
                  Package "ngx-linky" has an incompatible peer dependency to "@angular/core" (requires "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" (extended), would install "10.2.1").
× Migration failed: Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.

AoT compilation fails: Unexpected value 'LinkyModule' imported by the module 'MyModule' when building with ng build --prod --aot

When I build with Ahead-of-Time compilation, having the following errors:

$ ng build --prod --aot
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
  0% compilingUnexpected value 'LinkyModule' imported by the module 'MyModule'
Error: Unexpected value 'LinkyModule' imported by the module 'MyModule'
    at .../node_modules/@angular/compiler/bundles/compiler.umd.js:14326:37
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (.../node_modules/@angular/compiler/bundles/compiler.umd.js:14311:46)
    at .../node_modules/@angular/compiler/bundles/compiler.umd.js:13284:43
    at Array.forEach (native)
    at _extractModulesAndPipesOrDirectives (.../node_modules/@angular/compiler/bundles/compiler.umd.js:13283:28)
    at analyzeNgModules (.../node_modules/@angular/compiler/bundles/compiler.umd.js:13039:16)
    at OfflineCompiler.compileModules (.../node_modules/@angular/compiler/bundles/compiler.umd.js:13115:20)
    at CodeGenerator.codegen (/Users/iminar/Dev/angular/modules/@angular/compiler-cli/src/codegen.ts:71:26)
    at AotPlugin._make (.../node_modules/@ngtools/webpack/src/plugin.js:186:43)
    at Compiler.<anonymous> (.../node_modules/@ngtools/webpack/src/plugin.js:151:75)
    at Compiler.applyPluginsParallel (.../node_modules/tapable/lib/Tapable.js:156:14)
    at Compiler.<anonymous> (.../node_modules/webpack/lib/Compiler.js:463:8)
    at Compiler.applyPluginsAsync (.../node_modules/tapable/lib/Tapable.js:73:70)
    at Compiler.compile (.../node_modules/webpack/lib/Compiler.js:456:7)
    at Compiler.<anonymous> (.../node_modules/webpack/lib/Compiler.js:219:10)
    at Compiler.readRecords (.../node_modules/webpack/lib/Compiler.js:367:10)
    at Compiler.<anonymous> (.../node_modules/webpack/lib/Compiler.js:216:9)
    at next (.../node_modules/tapable/lib/Tapable.js:81:11)
    at Compiler.<anonymous> (.../node_modules/webpack/lib/CachePlugin.js:34:58)
    at Compiler.applyPluginsAsync (.../node_modules/tapable/lib/Tapable.js:85:13)
    at Compiler.<anonymous> (.../node_modules/webpack/lib/Compiler.js:213:8)
    at next (.../node_modules/tapable/lib/Tapable.js:81:11)
    at Compiler.<anonymous> (.../node_modules/webpack/lib/node/NodeEnvironmentPlugin.js:23:3)
    at Compiler.applyPluginsAsync (.../node_modules/tapable/lib/Tapable.js:85:13)
    at Compiler.run (.../node_modules/webpack/lib/Compiler.js:210:7)
    at .../node_modules/angular-cli/tasks/build-webpack.js:26:29
    at Class.run (.../node_modules/angular-cli/tasks/build-webpack.js:25:16)
    at Class.run (.../node_modules/angular-cli/commands/build.js:50:26)
    at Class.<anonymous> (.../node_modules/angular-cli/lib/models/command.js:152:17)
    at tryCatch (.../node_modules/rsvp/dist/lib/rsvp/-internal.js:215:12)
    at invokeCallback (.../node_modules/rsvp/dist/lib/rsvp/-internal.js:230:13)
    at publish (.../node_modules/rsvp/dist/lib/rsvp/-internal.js:198:7)
    at flush (.../node_modules/rsvp/dist/lib/rsvp/asap.js:85:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

When building with just ng build --prod it all builds just fine.
Also, this is the only module that throws this error.

Probably, should make it AoT compatible: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Angular 7 Error

I'm trying to install your component and when I build for development I get the following error.

ERROR in ./node_modules/ngx-linky/fesm5/ngx-linky.js
Module not found: Error: Can't resolve 'autolinker' in 'D:\fffff\fffff\angular\node_modules\ngx-linky\fesm5'

I'm using the latest version of Angular 7.1 on my application.

No compatible version for Angular 9

Issue Summary

We are unable to update our private Angular 9.1.3 repository to Angular version 10 or higher at the moment until a few more months. Meanwhile, there does not seem to be a compatible version of ngx-linky with Angular version 9. Please publish a version of ngx-linky which is compatible with Angular 9.

[email protected] was compatible with Angular versions 4 thru 8.
[email protected] seems to be compatible with Angular 10 and higher.
As a result, the yarn install or yarn add commands keeps throwing the following warnings in our project running Angular 9:

With ngx-linky version 2.2.0

Command:
yarn add ngx-linky@^2.2.0

Warnings:

warning " > [email protected]" has incorrect peer dependency "@angular/common@^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0".
warning " > [email protected]" has incorrect peer dependency "@angular/core@^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0".

With ngx-linky version 3.0.0

Command:
yarn add ngx-linky@^3.0.0

Warnings:

warning " > [email protected]" has incorrect peer dependency "@angular/common@>=10.0.0".
warning " > [email protected]" has incorrect peer dependency "@angular/core@>=10.0.0".

ERROR in Debug Failure. False expression.

ERROR in node_modules/ngx-linky/lib/linky.module.d.ts:1:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.

This likely means that the library (ngx-linky) which declares LinkyModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

1 export declare class LinkyModule {

@angular/core ~9.1.6

Nofollow configuration?

How do we get a nofollow attribute added with this pipe? From what I can tell in the Autolinker repo there was an option that was going to be added called nofollow in 2014, but that commit (gregjacobs/Autolinker.js@02f2e81) never made it in, instead there's a lot of boilerplate needed to achieve this according to gregjacobs/Autolinker.js#28 (comment)

Is there anyway to achieve this with this pipe or do we have to just make our own custom pipe and use the Autolinker logic in the comment?

Default options for all pipes

First things firsts: thanks for your really cool pipe! :)

I'm working on an ionic app and I need to change the replaceFn for all pipes I use.
It would be great if I could set it for the whole linky module instead of pipe by pipe.

How could I do that?