StaticInjectorError[DomSanitizer] with Angular 5 // Solution: `--preserve-symlinks` #4

xyrintech · 2018-02-01T16:36:20Z

StaticInjectorError[DomSanitizer]:
StaticInjectorError[DomSanitizer]:
NullInjectorError: No provider for DomSanitizer!
at NullInjector.get (core.js:923)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveToken (core.js:1211)
at tryResolveToken (core.js:1153)
at StaticInjector.get (core.js:1024)
at resolveNgModuleDep (core.js:10585)
at NgModuleRef.get (core.js:11806)
at resolveNgModuleDep (core.js:10585)

optimistex · 2018-02-01T21:46:16Z

Give me more details to reproduce the bug.

optimistex · 2018-02-02T14:13:13Z

I checked it on an empty project with Angular5 and don't found the bug.

Angular CLI: 1.6.6
Node: 9.4.0
OS: linux x64
Angular: 5.2.3

src/app/app.module.ts

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {NgxSelectModule} from 'ng2-select-ex';
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        NgxSelectModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule {
}

src/app/app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

src/app/app.component.html

<ngx-select [items]="['sdfsd','dsgdg']"></ngx-select>

src/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>TestProj</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Result:

Build:

optimistex@main-ubuntu:/data/www/tmp/test-proj$ ng build
Date: 2018-02-02T14:15:50.170Z                                                          
Hash: 184cb1c793e18eafe21e
Time: 7350ms
chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 6.85 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 201 kB [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 11.4 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.41 MB [initial] [rendered]

xyrintech · 2018-02-02T16:23:29Z

I am still getting this error, please check this out: https://drive.google.com/file/d/1Wy2-xXuN3jkx2GIe-tsPQ_VaM6z4hwsh/view

xyrintech · 2018-02-02T16:24:39Z

I have imported the NgxSelectModule in a shared module.
Sharing the code wont be possible as this is a huge project and replicating it on a core project wont be possible. Hope you understand

optimistex · 2018-02-02T17:21:21Z

I have managed to get the error:

Error: StaticInjectorError(AppModule)[NgxSelectComponent -> DomSanitizer]: 
  StaticInjectorError(Platform: core)[NgxSelectComponent -> DomSanitizer]: 
    NullInjectorError: No provider for DomSanitizer!
    at _NullInjector.get (core.js:994)
    at resolveToken (core.js:1292)
    at tryResolveToken (core.js:1234)
    at StaticInjector.get (core.js:1102)
    at resolveToken (core.js:1292)
    at tryResolveToken (core.js:1234)
    at StaticInjector.get (core.js:1102)
    at resolveNgModuleDep (core.js:10837)
    at NgModuleRef_.get (core.js:12070)
    at resolveDep (core.js:12560)

Currently, I am working on it...

xyrintech · 2018-02-02T17:36:14Z

Sounds good. Thanks.

optimistex · 2018-02-02T20:00:40Z

I did figure out a solution.
The StaticInjectorError seems to the trouble of the Angular 5.

The issue appearing when a package installed by npm link ..., by way for my case.
For solving you have to use the "preserve-symlinks". Exists two ways for do it:

run with flag --preserve-symlinks for instance ng serve --preserve-symlinks:
enlarge your .angular-cli.json: Library code cannot utilize critical services angular/angular#20598 (comment)

"defaults": {
    "styleExt": "css",
    "component": {},
    "build": {
        "preserveSymlinks": true
    }
}

xyrintech · 2018-02-03T04:29:28Z

Issue still exist :)

xyrintech · 2018-02-03T04:33:23Z

I have used ng serve --preserve-symlinks

optimistex · 2018-02-03T06:43:22Z

Can you make some project for example with the bug? Maybe a little example on the planker!?
I have no more ideas what are you doing for catching that :(

KevinJTaylor · 2018-03-05T18:12:46Z

I'm seeing the same issue, not with an ngx component, my own pipe.

I'm not using ng serve. I do an ng build and then serve my app via an Express server. The app itself is too big to even think about posting on here, but I have chanced upon something which I just don't understand. A colleague pulled the same codebase out of GIT and did a clean/build on everything (we're using yarn/lerna), and she does not see the same issue.

I guess there is a chance that she is running slightly different versions of something (a dependency), but we try to use absolute versions in all package.json files (rather than pushing them into git), so it is unlikely. I've also tried running in a different browser, wondering whether something was cached, but no luck. I'm starting to think it is a timing/synchronisation thing although that is a guess based on very little evidence.

btw I have enabled the --preserve-symlinks setting in my angular cli json. I also know it is definitely the one component which is the problem, as everything works if I remove that line from the HTML (a resource url pipe in this case). If I remove the pipe (| safeUrl) from that line, everything else renders, I just get an iframe hourglass for this one component and a console error saying the url is unsafe. Also the component was working fine yesterday, and it hasn't been changed (though other things have)

-- edit --

I know this doesn't help with the ngx-select issue, but I copied the pipes I had created into my application code (they were previously in a separate module and referenced as a dependency in my package.json), and imported/declared them in my application module using relative paths, and it started working (again).

optimistex added the bug label Feb 1, 2018

optimistex closed this as completed Feb 2, 2018

optimistex reopened this Feb 2, 2018

optimistex mentioned this issue Feb 2, 2018

Issue when we use ng2-select inside a formGroupName valor-software/ng2-select#925

Open

optimistex closed this as completed Feb 2, 2018

optimistex changed the title ~~Getting an error with Angular5~~ StaticInjectorError[DomSanitizer] with Angular 5 // Solution: --preserve-symlinks Feb 2, 2018

optimistex mentioned this issue Feb 4, 2018

Build from source valor-software/ng2-select#937

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

StaticInjectorError[DomSanitizer] with Angular 5 // Solution: `--preserve-symlinks` #4

StaticInjectorError[DomSanitizer] with Angular 5 // Solution: `--preserve-symlinks` #4

xyrintech commented Feb 1, 2018

optimistex commented Feb 1, 2018

optimistex commented Feb 2, 2018 •

edited

Loading

xyrintech commented Feb 2, 2018

xyrintech commented Feb 2, 2018

optimistex commented Feb 2, 2018 •

edited

Loading

xyrintech commented Feb 2, 2018

optimistex commented Feb 2, 2018

xyrintech commented Feb 3, 2018

xyrintech commented Feb 3, 2018

optimistex commented Feb 3, 2018

KevinJTaylor commented Mar 5, 2018 •

edited

Loading

StaticInjectorError[DomSanitizer] with Angular 5 // Solution: --preserve-symlinks #4

StaticInjectorError[DomSanitizer] with Angular 5 // Solution: --preserve-symlinks #4

Comments

xyrintech commented Feb 1, 2018

optimistex commented Feb 1, 2018

optimistex commented Feb 2, 2018 • edited Loading

xyrintech commented Feb 2, 2018

xyrintech commented Feb 2, 2018

optimistex commented Feb 2, 2018 • edited Loading

xyrintech commented Feb 2, 2018

optimistex commented Feb 2, 2018

xyrintech commented Feb 3, 2018

xyrintech commented Feb 3, 2018

optimistex commented Feb 3, 2018

KevinJTaylor commented Mar 5, 2018 • edited Loading

StaticInjectorError[DomSanitizer] with Angular 5 // Solution: `--preserve-symlinks` #4

StaticInjectorError[DomSanitizer] with Angular 5 // Solution: `--preserve-symlinks` #4

optimistex commented Feb 2, 2018 •

edited

Loading

optimistex commented Feb 2, 2018 •

edited

Loading

KevinJTaylor commented Mar 5, 2018 •

edited

Loading