I've been at this problem for a few hours now. I have tried literally everything but I can't get it to work.
The next error keeps coming up:
zone.js:522 Unhandled Promise rejection: Template parse errors:
'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message.
Here are my files, which I have reduced to the basic needs for routing:
app-routing.module.ts
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import { TafelComponent } from '../tafel/tafel.component';
import { MuurtafelComponent } from '../muurtafel/muurtafel.component';
const routes: Routes = [
{ path: 'tafel', component: TafelComponent },
{ path: 'muurtafel', component: MuurtafelComponent }
];
#NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { TafelComponent } from './tafel/tafel.component';
import { MuurtafelComponent } from './muurtafel/muurtafel.component';
import { AppRoutingModule } from './app-routing/app-routing.module';
#NgModule({
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpModule
],
exports: [AppRoutingModule],
declarations: [
AppComponent,
TafelComponent,
MuurtafelComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<router-outlet></router-outlet>
<h1>
{{title}}
</h1>
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Industial Furniture</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<base href="/">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
Can someone help me with this? Could it be anything outside of the code? (Or is it that I'm overseeing something here?)
In your app.module.ts
#NgModule({
...,
imports: [
AppRoutingModule
],
exports: [AppRoutingModule], // Remove this line
...
})
You don't need to export here !
I didn't deeply delve into your code, but I got the same error after rename package + component name. I also checked all my code, but found nothing, I just tried stop CLI and restart. All compiled good and started working. Maybe this will help.
In your app.module.ts remove
exports: [AppRoutingModule],
Also kill the server then run ng serve again
Another note that I saw you use
HttpModule
instead
HttpClientModule
New version of angular already use HttpClientModule so try to use lastest version if you can
Related
I'm new in Angular CLI and I'm trying to make my first web based on an older one I've made.
Until now, I'm able to nest and show components inside the root component, but from that point onwards I can't refer to any component in the HTML.
Here's my code:
index.html
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testing Angular</title>
<base href="/">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FirstComponent } from './first/first.component';
#NgModule({
declarations: [AppComponent, FirstComponent],
imports: [BrowserModule, AppRoutingModule],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ["./app.component.css"]
})
export class AppComponent {}
app.component.html
<section id="container">
<app-first></app-first>
</section>
<router-outlet></router-outlet>
first.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { SecondComponent } from './second/second.component';
#NgModule({
declarations: [SecondComponent],
imports: [CommonModule]
})
export class FirstModule { }
first.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-first',
templateUrl: './first.component.html',
styleUrls: ["./first.component.css"]
})
export class FirstComponent {}
first.component.html
<div id="first">
<app-second></app-second> <!-- This gives an error: it doesn't know whats Second Component -->
</div>
second.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
#NgModule({
imports: [CommonModule],
declarations: []
})
export class SecondModule { }
second.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'app-second',
templateUrl: './second.component.html',
styleUrls: ["./second.component.css"]
})
export class SecondComponent {}
second.component.html
<div id="second">
<span>I'm second component!</span>
</div>
The <app-second></app-second> reference gives an error. In Visual Studio Code is not even in the list of suggestions.
You have to include your modules somewhere, angular don't know anything about your SecondComponent, add FirstModule or SecondModule to your AppModule.
Take a look at Angular docs to get more strategies https://angular.io/docs
imports: [BrowserModule, AppRoutingModule, FirstModule],
Modify your FirstModule with adding exports with components which you want to share for others modules.
exports: [SecondComponent]
I've created a stackblitz where I'm trying to instantiate the HelloComponent dynamically using the ReflexiveInjector and I have the HelloComponent listed in the app modules entryComponents array.
However I'm still getting:
Component HelloComponent is not part of any NgModule or the module has not been imported into your module.
Thoughts?
Added a link to this SO in this feature request asking for virtual / logical modules. Please thumbs it up if you like the suggestion.
You should also declare the HelloComponent in your declarations array of your module. Read the official docs about entrycomponents.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
#NgModule({
imports: [ BrowserModule, FormsModule ],
entryComponents: [HelloComponent],
declarations: [ AppComponent, HelloComponent ], // declare here
bootstrap: [ AppComponent ]
})
export class AppModule { }
ERROR in : 'ngx-spinner' is not a known element:
1. If 'ngx-spinner' is an Angular component, then verify that it is part of this module.
2. If 'ngx-spinner' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message. ("[ERROR ->]
You need to import ngx-spinner module in your module.
import { NgxSpinnerModule } from 'ngx-spinner';
Read more here.
If you are using a SharedModule, then you must export the NgxSpinnerModule,
this will work:
shared.module.ts:
import { NgxSpinnerModule } from 'ngx-spinner';
#NgModule({
declarations: [...],
imports: [NgxSpinnerModule],
exports: [NgxSpinnerModule],
providers: [...]
})
export class SharedModule {}
app.module.ts:
#NgModule({
declarations: [...],
imports: [SharedModule],
bootstrap: [AppComponent]
})
export class AppModule { }
package.json:
"dependencies": {
"ngx-spinner": "^7.2.0",
},
In app.module.ts :
import { NgxSpinnerModule } from 'ngx-spinner';
then add the NgxSpinnerModule and Schema.
imports: [.....,NgxSpinnerModule ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
exports:[NgxSpinnerModule]
Add the CUSTOM_ELEMENTS_SCHEMA
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '#angular/core';
Repeat the same if you have any other shared modules
import NgxSpinnerService to the component(.ts) where you want to use the spinner.
import { NgxSpinnerService } from 'ngx-spinner';
Add the constructor too,
constructor(private spinner : NgxSpinnerService)
then add this.spinner.show() to enable the spinner and this.spinner.hide() to disable the spinner.
In HTML file :
add <ngx-spinner type="ball-spin-clockwise"></ngx-spinner>
In my Angular2 app am getting the following error Error: (SystemJS) Unexpected value 'ReleasesService' declared by the module 'AppModule'. Please add a #Pipe/#Directive/#Component annotation.
My AppModule:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { routing } from './app.routes';
import { HttpModule } from '#angular/http';
import { SearchFilter } from '../app/search-filter.pipe';
import { ReleasesService } from '../app/releases/releases.service';
import { AppComponent } from './app.component';
import { HomeComponent } from '../app/home/home.component';
import { ReleasesComponent } from '../app/releases/releases.component';
import { DistroComponent } from '../app/distro/distro.component';
import { ContactComponent } from '../app/contact/contact.component';
#NgModule({
imports: [ BrowserModule, HttpModule, routing ],
declarations: [ AppComponent,
SearchFilter,
HomeComponent,
ReleasesComponent,
ReleasesService,
DistroComponent,
ContactComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
My ReleasesService:
import { Injectable } from '#angular/core';
import { Http, Response } from '#angular/http';
import { Observable } from 'rxjs/Observable';
import { IRelease } from './release';
import 'rxjs/add/operator/map';
#Injectable()
export class ReleasesService {
getReleases() {
return IRelease;
}
}
How to fix it? I reinstalled the Quickstarter (the base for my App), and having the same error when try to create the service.
declarations is only for declarable classes: Components Directives and Pipes
You can add ReleasesService to providers array
#NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
providers: [ ReleasesService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
See also
https://angular.io/guide/ngmodule-faq#what-classes-should-i-add-to-declarations
I had a similar problem, occurring while a project had angular2 as dependency and a project dependency (with the failing component) as well. Seems like angular2 metadata gets attached to the direct angular2 dependency, so the component in the project dependency wasn't declared in the angular2 of the project.
Workaround is to remove angular2 from the dependency (declaring it as devDependency there) and only use one angular2 instance.
Be sure the decorator has the caracter #.
If you don´t type # before the decorator function you will have this error message
#Component({ selector: '...', }) -> Correct
Component({ selector: '...', }) -> ERROR MESAGE: 'add a #Pipe/#Directive/#component'
I have my main module like this, where I import the basic Libraries :
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { MaterialModule } from '#angular/material';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { MapModule } from './map/map.module';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MapModule,
MaterialModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
My question is when I create a new Module within the app i.e Map Module do I need to reimport all those libraries to that Module. I was under the impression that if I import the libraries on the module it would work under child modules.
But in my Map Module I am getting errors like.
Can't bind to 'ngClass' since it isn't a known property of 'div'.
My Current MapModule looks like
import { NgModule } from '#angular/core';
import { MapComponent } from './map.component';
import { MapMenuComponent } from './map-menu/map-menu.component';
import { MapControlsComponent } from './map-controls/map-controls.component';
import { MapService } from './map.service';
#NgModule({
imports: [],
exports: [],
declarations: [MapMenuComponent, MapControlsComponent, MapComponent],
providers: [MapService],
})
export class MapModule { }
Do I need to reimport the MaterialModule, Forms etc into module again for the components in this module to work ?
You only need to reimport modules with declarations, i.e. modules that define new components, directives and pipes. Modules that register providers don't need to be imported.
In this list:
imports: [
BrowserModule,
FormsModule,
HttpModule,
MapModule,
MaterialModule.forRoot()
],
FormsModule modules need to be imported, by HttpModule need not. BrowserModule re-exports CommonModule, so in the other modules you would probably want to import CommonModule, not BrowserModule to get built-in directives like NgClass. By importing CommonModule you will not have this error:
Can't bind to 'ngClass' since it isn't a known property of 'div'.
You can use SharedModule. All modules those are used in multiple modules
sharedModule example
import { NgModule } from '#angular/core';
import { anyService} from './any.service';
#NgModule({
providers: [anyService]
})
export class SharedModule {}
Now you can import this shared module in any modules in which want to use this module