Error: StaticInjectorError[ActivatedRoute]: No provider for ActivatedRoute! #149

Closed
opened 2025-08-09 17:15:11 +00:00 by fergalmoran · 0 comments
Owner

Originally created by @Basel78 on 3/2/2018

Hi,
I have angular-4 libraries built using "generator-angular2-library" template, and then upgraded to angular 5.0.0, and used in angularV5 project built by VScode, all is working fine..
The libraries are using ModuleWithProviders to expose the ngModule that can be used in angular-cli project.

Now I had to migrate everything to aspnetcore 2.0 angular template project, so I have created new one by command {dotnet new XXX} and linked my libraries using npm link lib1, lib2 ... etc.
then created simple Module in the new project and imported the "Lib1Module" and added
imports:[lib1Module.forRoot()], also I have added routing "lib1Module.routing" to load the correct component when the navigation changes, also added new item to routing table in "app.shared.module.ts" like:
{ path: 'new-menu', component:lib1Module }

The site is loading with default "Hello, world!" HomePage and Three Menus "home, counter, fetch-data" beside to my additional Menu called "new-menu", and when click on "new-menu" the page throw error:

Uncaught (in promise): Error: StaticInjectorError[ActivatedRoute]:
StaticInjectorError[ActivatedRoute]:
NullInjectorError: No provider for ActivatedRoute!

I added also new Module and have used new component in the same project, and used "new-menu2" item in the navigation to load the new component, but I got similar error:

Error: StaticInjectorError[ElementRef]:
StaticInjectorError[ElementRef]:
NullInjectorError: No provider for ElementRef!

BTW: I have imported but still didn't worked:

import {HttpClientModule} from '@angular/common/http';
import {HttpModule} from '@angular/http';

imports:[HttpClientModule, HttpModule

Any Idea how to resolve this issue, below is part of package.json

"@angular/animations": "5.0.0",
   "@angular/cli": "^1.4.9",
   "@angular/common": "^5.0.0",
   "@angular/compiler": "5.0.0",
   "@angular/compiler-cli": "5.0.0",
   "@angular/core": "5.0.0",
   "@angular/forms": "5.0.0",
   "@angular/http": "5.0.0",
   "@angular/material": "^5.2.3",
   "@angular/platform-browser": "5.0.0",
   "@angular/platform-browser-dynamic": "5.0.0",
   "@angular/platform-server": "5.0.0",
   "@angular/router": "5.0.0",
   "@ngtools/webpack": "^1.5.2"
```,
*Originally created by @Basel78 on 3/2/2018* Hi, I have angular-4 libraries built using "generator-angular2-library" template, and then upgraded to angular 5.0.0, and used in angularV5 project built by VScode, all is working fine.. The libraries are using ModuleWithProviders to expose the ngModule that can be used in angular-cli project. Now I had to migrate everything to aspnetcore 2.0 angular template project, so I have created new one by command {dotnet new XXX} and linked my libraries using npm link lib1, lib2 ... etc. then created simple Module in the new project and imported the "Lib1Module" and added imports:[lib1Module.forRoot()], also I have added routing "lib1Module.routing" to load the correct component when the navigation changes, also added new item to routing table in "app.shared.module.ts" like: { path: 'new-menu', component:lib1Module } The site is loading with default "Hello, world!" HomePage and Three Menus "home, counter, fetch-data" beside to my additional Menu called "new-menu", and when click on "new-menu" the page throw error: > Uncaught (in promise): Error: StaticInjectorError[ActivatedRoute]: StaticInjectorError[ActivatedRoute]: NullInjectorError: No provider for ActivatedRoute! I added also new Module and have used new component in the same project, and used "new-menu2" item in the navigation to load the new component, but I got similar error: > Error: StaticInjectorError[ElementRef]: StaticInjectorError[ElementRef]: NullInjectorError: No provider for ElementRef! BTW: I have imported but still didn't worked: > import {HttpClientModule} from '@angular/common/http'; import {HttpModule} from '@angular/http'; imports:[HttpClientModule, HttpModule Any Idea how to resolve this issue, below is part of package.json ``` "@angular/animations": "5.0.0", "@angular/cli": "^1.4.9", "@angular/common": "^5.0.0", "@angular/compiler": "5.0.0", "@angular/compiler-cli": "5.0.0", "@angular/core": "5.0.0", "@angular/forms": "5.0.0", "@angular/http": "5.0.0", "@angular/material": "^5.2.3", "@angular/platform-browser": "5.0.0", "@angular/platform-browser-dynamic": "5.0.0", "@angular/platform-server": "5.0.0", "@angular/router": "5.0.0", "@ngtools/webpack": "^1.5.2" ```,
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github/JavaScriptServices#149
No description provided.