Angular 7 StaticInjectorError NullInjectorError: No provider for Router!

Peter Hsu

unread,

Mar 22, 2019, 11:08:45 PM3/22/19

to Angular and AngularJS discussion

Hi Angular:

I am circling back to a problem I encountered a while ago and didn't have time to resolve. The story is that I have a angular 1.7 app with a rather eccentric setup. (It runs as both standalone website and a plugin for another angular app with different bootstrap code path)

I wanted to upgrade our dependencies and part of this implies I will have to start using angular 7. However, the static injector is starting to give me issues.

The SDK I use requires me to instantiate services (from their library) and pass it to its application context during app init. I need to do something as followed.

class AppComponent implements OnDestroy, OnInit {
    constructor(
        private appContext: AppContextService,  private navigationService: NavigationService) {
    }

    public ngOnInit(): void {
        this.appContext.ngInit({ navigationService: this.navigationService });
    }
}

Where AppContextService and NavigationService are both provided by the SDK.

However, after upgrading to angular 7 I am starting to see this error during my app launch.

(object): Error: StaticInjectorError(AppModule)[NavigationService -> Router]:
StaticInjectorError(Platform: core)[NavigationService -> Router]:
NullInjectorError: No provider for Router!

Note that NavigationService is dependent of @angular/router and I have RouterModule.forRoot in my app module, also I remembered to export RouterModule in my app module.

This is extremely confusing because I actually tried to move the instantiation of NavigationService to the init method and see the behavior as followed

    constructor(
        private injector: Injector,
        private appContext: AppContextService,
    ) {
    .....
    }

    public ngOnInit(): void {
        let router: Router = this.injector.get(Router);        if (!router) {
            console.warn(`no router`);
        } else {
            console.warn(`yes router`);
        }
        let navigationService: NavigationService = this.injector.get(NavigationService);
        this.appContext.ngInit({ navigationService: navigationService });
....

Output

yes router

(object): Error: StaticInjectorError(AppModule)[NavigationService -> Router]:
StaticInjectorError(Platform: core)[NavigationService -> Router]:
NullInjectorError: No provider for Router!

How is this even possible?

(Apologies for asking such a vague question. I am currently trying to create a minimal reproduction with very little luck due to the complicated way our app is set up.) Just wondering if anyone can spot the issue or provide some information that I can work on while I try to come up with a more concise problem description)

Peter Hsu

unread,

Mar 23, 2019, 6:54:11 PM3/23/19

to Angular and AngularJS discussion

Is there any instructions on how to build angular by myself?

--
You received this message because you are subscribed to a topic in the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/_AnXbUTnpkc/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

Sander Elias

unread,

Mar 25, 2019, 1:57:03 AM3/25/19

to Angular and AngularJS discussion

Hi Peter,

This sounds like an issue with the SDK you are using. I think they should rebuild the thing with AOT enabled.

Instructions to build angular can be found here.

Regards

Sander

Peter Hsu

unread,

Mar 25, 2019, 12:04:56 PM3/25/19

to Angular and AngularJS discussion

Thanks Sander

I will look into it. Just wondering, since AOT is just an optimization, why would it make a difference in runtime?

Sander Elias

unread,

Mar 25, 2019, 12:20:51 PM3/25/19

to Angular and AngularJS discussion

Hi Peter,

In JIT mode the injector is a bit more forgiving, For AOT to work, all code involving routing and the injector need to be statically analyzable.

Regards

Sander

Peter Hsu

unread,

Mar 26, 2019, 12:26:14 PM3/26/19

to Angular and AngularJS discussion

Hi Sander

After some investigation even though I am not sure I didn't find any evidence that my dependency is not built with AOT but I will keep looking.

Meanwhile, I have a few questions and wonder if you will be able to help answer:

1. I created an app in attempt to repro the issue to no avail. Can you tell me how I can build an library with AOT turned off to see if the issue can repro with AOT off?

2. I am seeing when I try to get the router object, it is using the token "Router_37", but when NavigationService tries to get "Router_35". Does that confirm the AOT theory? Is there any way to fix or workaround this issue on my side?

3. Since you mention AOT, I want to mention when I run my application I am seeing this warning

WARNING in Lazy routes discovery is not enabled. Because there is neither an entryModule nor a statically analyzable bootstrap code in the main file.

Does it have anything to do with the issue I run into?

thanks

Peter

--

Sander Elias

unread,

Mar 26, 2019, 1:51:38 PM3/26/19

to Angular and AngularJS discussion

Hi Peter,

Hmm, so you have trouble reproducing the issue?
This is just a hunch, but it might just be that you have stale/corrupted files in npm_modules.
do the following.

rm -fr node_modules
rm yarn.lock
rm package-lock.json
npm i # or `yarn`

I had quite a while back some corrupted files in my local cache. While unlikely, you might want to clear out your npm/yarn cache too before the reinstall.

Try this, and let me know!

Regards
Sander

Peter Hsu

unread,

Mar 26, 2019, 5:34:15 PM3/26/19

to Angular and AngularJS discussion

Nope,

Removed the node_modules directory and also force cleared the npm cache. The problem still exists.

Still trying to figure out why the token injector use to construct Navigation's dependency is Router_37 while I only have Router_35 in the injector.

--

Peter Hsu

unread,

Mar 26, 2019, 8:55:33 PM3/26/19

to Angular and AngularJS discussion

I have noticed that my application produce the following warning during build, but not my minimal repro app. Not exactly sure how to produce this

WARNING in ./node_modules/@microsoft/windows-admin-center-sdk/node_modules/@angular/core/fesm5/core.js 17170:15-36
Critical dependency: the request of a dependency is an expression

What is fesm5 and why was it used? My tsconfig is as follows

{
    "compilerOptions": {
        "baseUrl": "",
        "declaration": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "noImplicitAny": false,
        "lib": [
            "es2018",
            "dom"
        ],
        "mapRoot": "./",
        "module": "commonjs",
        "moduleResolution": "node",
        "rootDir": "app",
        "sourceMap": true,
        "target": "es5",
        "noEmitOnError": true,
        "types": ["node"],
        "typeRoots": [
          "node_modules/@types"
        ]
    },
    "include": [
      "./**/*.ts"
    ]
}

Sander Elias

unread,

Mar 27, 2019, 12:54:26 AM3/27/19

to Angular and AngularJS discussion

Did you also remove the yarn.lock/package-lock.json?

Sander Elias

unread,

Mar 27, 2019, 12:56:38 AM3/27/19

to Angular and AngularJS discussion

Do you need to support IE?

Peter Hsu

unread,

Mar 27, 2019, 11:24:24 AM3/27/19

to Angular and AngularJS discussion

Yes, I have removed the lockfile and I do need to support IE

On Tue, Mar 26, 2019 at 9:56 PM Sander Elias <sande...@gmail.com> wrote:

Do you need to support IE?

--

Peter Hsu

unread,

Mar 27, 2019, 5:17:35 PM3/27/19

to Angular and AngularJS discussion

Thanks Sanders for your help

I think there may have been some problem with my SDK's build scripts. I migrated the app to the new framework and my problem seem to have disappeared

Reply all

Reply to author

Forward