Angular2 Unexpected value in Service. Please add annotation - javascript

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'

Related

Bootstrap multiple root component in Angular 4

We've a JQuery application where we've a requirement to implement some modules in Angular 4. So to do that we are manually bootstrapping an Angular app. But now the case is we have created multiple angular component and now they all loading when we bootstrap AppComponent which is making application slow in loading.
So I want to bootstrap multiple root component (i.e. AppComponent, App1Component) so that and will use child components accordingly based on it.
So following is my implementation which is not working.
main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule,App1Module } from './app.module';
import { enableProdMode } from '#angular/core';
platformBrowserDynamic().bootstrapModule(AppModule)
platformBrowserDynamic().bootstrapModule(App1Module)
app.module.ts
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations'
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { AppugComponent } from './appug.component';
import { AppChild1Component } from './profile/appchild1.component';
import { AppChild2Component } from './profile/appchild2.component';
import { AppChild3Component } from './profile/appchild3.component';
import { AppChild4Component } from './profile/appchild4.component';
import { UgChild1Component } from './ug/ugchild1.component';
import { UgChild2Component } from './ug/ugchild2.component';
import { UgChild3Component } from './ug/ugchild3.component';
import { UgChild4Component } from './ug/ugchild4.component';
#NgModule({
imports: [BrowserAnimationsModule, BrowserModule, FormsModule,HttpModule],
declarations: [
AppComponent,
AppChild1Component,
AppChild2Component,
AppChild3Component,
AppChild4Component,
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
#NgModule({
imports: [BrowserAnimationsModule, BrowserModule, FormsModule,HttpModule],
declarations: [
AppugComponent,
UgChild1Component,
UgChild2Component,
UgChild3Component,
UgChild4Component,
],
bootstrap: [ AppugComponent ]
})
export class App1Module { }
app.component.ts
import { Component, OnInit, ChangeDetectorRef } from '#angular/core';
#Component({
selector: 'my-app,
template:`<h1>app</h1>`,
})
export class AppComponent implements OnInit {}
appug.component.ts
import { Component, OnInit, ChangeDetectorRef } from '#angular/core';
#Component({
selector: 'my-appug,
template:`<h1>appug</h1>`,
})
export class AppugComponent implements OnInit {}
Following is the error I'm getting on console:
Unhandled Promise rejection: The selector "my-app" did not match any elements ; Zone: <root> ; Task: Promise.then ; Value: Error: The selector "my-app" did not match any elements
Tried referencing this as well but doesn't working
Any help would be appreciated.
Well I've solved myself by just doing some configuration in main.ts and tsconfig.json
Step 1: Create your module and declare root components which you want to load when you bootstrap that module.
Ex. Here I've created user.module.ts
import { NgModule } from '#angular/core';
// root component of usermodule
import { UserAppComponent } from './userapp.component';
#NgModule({
imports:[FormsModule,HttpModule],
declarations:[UserAppComponent],
providers:[],
bootstrap:[UserAppComponent]
})
export class UserModule { }
Step 2: Go to main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { UserModule } from './user.module';
window.platform = platformBrowserDynamic();
window.AppModule = AppModule;
window.UserModule = UserModule;
Step 3: Go to tsconfig.json and insert your newly created module and component in "files" array
"files":[
//....your other components ...//
"myapp/user.module.ts",
"myapp/userapp.component.ts",
]
Step 4: Now you are ready to bootstrap angular module wherever you want from your .js file. Like I've bootstrap like this from my .js file. Bootstrapping may differ based on your requirement but step 1 to 3 should be same.
window.platform.bootstrapModule(window.UserModule);

Bootstrapping multiple module in Angular 6 via array

is it possible to declare an array and use that to bootstrap multiple components in module.ts.
I was trying something like this
export var initialComponents = [];
initialComponents.push(AppComponent);
if(condition) {
initialComponents.push(IchFooterComponent);
}
and then
bootstrap: initialComponents
Which gives me the following error
Error: The module oa was bootstrapped, but it does not declare "#NgModule.bootstrap" components nor a "ngDoBootstrap" method. Please define one of these.
You can customize the bootstrapping via implementing ngDoBootstrap as method of AppModule.
You can list your components which need to be bootstrapped in the entryComponents property of #NgModule
#NgModule({
entryComponents: [AComponent, BComponent, ...]
...
})
export class AppModule {
constructor() {}
ngDoBootstrap(appRef: ApplicationRef) {
if (Math.random() > 0.5) {
appRef.bootstrap(AComponent, '#app');
} else {
appRef.bootstrap(BComponent, '#app');
}
}
If you need a service, you can access them via dependency injection (put it in AppModule as constructor parameter). But I don't know if there are any limitations to it compared to DI in components or services.
Here are the docs for ApplicationRef and its bootstrap method.
Try it again (below is the sample code):
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms'; // <-- NgModel lives here
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
var initialComponents: any[] = [];
initialComponents.push(AppComponent);
if (true) {
initialComponents.push(HeroesComponent);
}
#NgModule({
declarations: initialComponents,
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Try this again:
https://stackblitz.com/edit/angular-vimqb1?file=src/app/app.module.ts

How to import custom modules in Angular 4?

I am trying to use one of the custom modules I have built and put it in another module
custom modules:
my-test.module.ts
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { MyTestComponent } from './my-test.component';
#NgModule({
declarations: [
MyTestComponent
],
imports: [
CommonModule,
],
exports: [ MyTestComponent]
})
export class MyTestModule { }
Another module that I need to pull in
my-parent.module.ts
import {CommonModule} from '#angular/common';
import {NgModule} from '#angular/core';
import { MyParentComponent } from './my-parent.component';
import { MyTestModule } from '../my-test/my-test.module';
#NgModule({
'imports': [
CommonModule,
MyTestModule
],
'declarations': [
MyParentComponent
],
'exports': [
MyParentComponent
]
})
export class MyParentModule {}
my-parent.component.ts
import { Component, Inject, Injectable, OnInit } from '#angular/core';
import { MyTestComponent } from '../my-test/my-test.component'
#Component({
'selector': 'my-parent',
'template': `
test
`
})
#Injectable()
export class MyParentComponent implements OnInit {
public myTestComponent: MyTestComponent;
constructor() {}
ngOnInit() {
console.log(this.myTestComponent) <----show undefined here.
}
}
I am not sure how to import the my-test component into my-parent component.
What am I doing wrong? Thanks a lot!
Update
Slightly change my codes above to fit my case. It initial a MytestComponent in the beginning and this.myTestComponent shows undefined.
1- in my-parent.component.html add <test component selector> </ test component selector #test>
2- in the parent ts file add :
#ViewChild('test') test: MyTestComponent;
then you will be able to access all the methods and parameters in MyTestComponent

ERROR while adding custom module to parent app module in angular

I am trying to add new module to make my angular application more modular and for lazy loading.
app.module
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule,BrowserXhr } from "#angular/http";
import { LabService } from './lab/lab.service';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { OphistoryModule } from './Ophistory/ophistory.Module' //after adding this module ERROR is thrown
#NgModule({
imports:[
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{path: 'labDetails/:labName',component:LabDetailsComponent},
{path:'showRoboLog/:labName',component:RoboLogComponent},
{path:'',component:LabComponent}
]),
OphistoryModule
],
declarations: [
AppComponent
],
bootstrap:[ AppComponent ]
})
export class AppModule {}
app.component
import { Component } from '#angular/core';
import { Http } from '#angular/http';
import { LabComponent } from './lab/lab.component';
import { LabService } from './lab/lab.service';
#Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
`,
providers: [LabService]
})
export class AppComponent {
constructor() {
}
pageTitle: string = 'ABC';
}
The problem I am facing after adding the module OphistoryModule is an error message saying
my-app' is not a known element:
But when I give the same name to the selector of my newly added module it is working fine.
Here are the custom module and component
ophistory.module
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser'
import { OphistoryComponent } from './ophistory.component'
import {CommonModule} from '#angular/common'
#NgModule({
imports: [RouterModule.forChild([
{path: 'test',component:OphistoryComponent}
]),CommonModule],
declarations:[OphistoryComponent]
})
export class OphistoryModule {}
ophistory.component
import { Component } from '#angular/core'
import { LabService } from '../lab/lab.service'
#Component({
selector:'my-ap',
templateUrl:'./ophistory.component.html'
})
export class OphistoryComponent {
constructor (private _service:LabService){}
}
Can anyone confirm if it is a bug in angular 2 or any other solution you have?

How can I use Electron's webview html element inside an angular2 template?

I saw this question: How to use Electron's <webview> within Angular2 app?
And it got me past my initial error but now I'm seeing
zone.js?1478729974810:355 Unhandled Promise rejection: Template parse errors:
'webview' is not a known element:
1. If 'webview' is an Angular component, then verify that it is part of this module.
2. If 'webview' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message. ("url" [src]="paper.url | path" [original-size]="false" [show-all]="true"></pdf-viewer-->
[ERROR ->]<webview id="inlinePaper" attr.src="{{paper.url | path}}" disablewebsecurity></webview>
</div"): PaperComponent#45:12 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
'webview' is not a known element:
1. If 'webview' is an Angular component, then verify that it is part of this module.
2. If 'webview' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message. ("url" [src]="paper.url | path" [original-size]="false" [show-all]="true"></pdf-viewer-->
[ERROR ->]<webview id="inlinePaper" attr.src="{{paper.url | path}}" disablewebsecurity></webview>
</div"): PaperComponent#45:12
at TemplateParser.parse (http://localhost:5555/node_modules/#angular/compiler/bundles/compiler.umd.js:7711:21)
at RuntimeCompiler._compileTemplate (http://localhost:5555/node_modules/#angular/compiler/bundles/compiler.umd.js:17193:53)
at eval (http://localhost:5555/node_modules/#angular/compiler/bundles/compiler.umd.js:17098:85)
at Set.forEach (native)
at compile (http://localhost:5555/node_modules/#angular/compiler/bundles/compiler.umd.js:17098:49)
at ZoneDelegate.invoke (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:203:28)
at Zone.run (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:96:43)
at http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:462:57
at ZoneDelegate.invokeTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:236:37)
at Zone.runTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:136:47)
I added CUSTOM_ELEMENTS_SCHEMA to both my root module and the other module in play here as well as trying the NO_ERRORS_SCHEMA described in the angular documentation for NgModule but I'm still seeing this same template error.
This project has a lot of files and I won't list them all here but feel free to ask for whatever you might feel relevant.
This was built from the angular2 advanced seed at https://github.com/NathanWalker/angular-seed-advanced
My root module 'web.module.ts':
// angular
import { NgModule, NO_ERRORS_SCHEMA } from '#angular/core';
import { APP_BASE_HREF } from '#angular/common';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule } from '#angular/router';
import { Http } from '#angular/http';
// libs
import { StoreModule } from '#ngrx/store';
import { EffectsModule } from '#ngrx/effects';
import { TranslateLoader } from 'ng2-translate';
// app
import { AppComponent } from './app/components/app.component';
import { ToolbarComponent } from './app/components/toolbar/toolbar.component';
import { HomeComponent } from './app/components/home/home.component';
import { routes } from './app/components/app.routes';
// feature modules
import { CoreModule } from './app/frameworks/core/core.module';
import { AnalyticsModule } from './app/frameworks/analytics/analytics.module';
import { multilingualReducer, MultilingualEffects } from './app/frameworks/i18n/index';
import { MultilingualModule, translateFactory } from './app/frameworks/i18n/multilingual.module';
import { SampleModule } from './app/frameworks/sample/sample.module';
import { EventModule } from './app/components/event/event.module';
// config
import { Config, WindowService, ConsoleService, EventService } from './app/frameworks/core/index';
Config.PLATFORM_TARGET = Config.PLATFORMS.WEB;
if (String('<%= ENV %>') === 'dev') {
// only output console logging in dev mode
Config.DEBUG.LEVEL_4 = true;
}
// sample config (extra)
import { AppConfig } from './app/frameworks/sample/services/app-config';
import { MultilingualService } from './app/frameworks/i18n/services/multilingual.service';
// custom i18n language support
MultilingualService.SUPPORTED_LANGUAGES = AppConfig.SUPPORTED_LANGUAGES;
let routerModule = RouterModule.forRoot(routes);
if (String('<%= TARGET_DESKTOP %>') === 'true') {
Config.PLATFORM_TARGET = Config.PLATFORMS.DESKTOP;
// desktop (electron) must use hash
routerModule = RouterModule.forRoot(routes, {useHash: true});
}
declare var window, console;
// For AoT compilation to work:
export function win() {
return window;
}
export function cons() {
return console;
}
#NgModule({
imports: [
BrowserModule,
CoreModule.forRoot([
{ provide: WindowService, useFactory: (win) },
{ provide: ConsoleService, useFactory: (cons) }
]),
routerModule,
AnalyticsModule,
MultilingualModule.forRoot([{
provide: TranslateLoader,
deps: [Http],
useFactory: (translateFactory)
}]),
StoreModule.provideStore({
i18n: multilingualReducer,
}),
EventModule
],
declarations: [
AppComponent,
HomeComponent,
ToolbarComponent
],
providers: [
{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
},
EventService
],
bootstrap: [AppComponent],
schemas: [NO_ERRORS_SCHEMA]
})
export class WebModule { }
Here is my sub module the event module:
// angular
import { NgModule, ModuleWithProviders, Optional, SkipSelf, NO_ERRORS_SCHEMA } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { HttpModule } from '#angular/http';
import { eventComponent } from './event.component';
import { EventDetailsComponent } from './details/event.details.component';
import { EventNavigationComponent } from './navigation/event.navigation.component';
import { EventAlphanavComponent } from './navigation/event.alphanav.component';
import { EventTrackComponent } from './index-track/event.track.component';
import { EventScheduleComponent } from './index-schedule/event.schedule.component';
import { EventAlphaComponent } from './index-alpha/event.alpha.component';
import { EventAuthorComponent } from './index-author/event.author.component';
import { EventAuthorListComponent } from './index-author/list/event.author.list.component';
import { EventSponsorComponent } from './sponsors/event.sponsor.component';
import { EventExhibitorComponent } from './exhibitors/event.exhibitor.component';
import { EventActivitiesComponent } from './activities/event.activities.component';
import { PaperComponent } from './paper/paper.component';
// libs
import { StoreModule } from '#ngrx/store';
// app
import { Config, WindowService, ConsoleService, EventService, Path } from '../../frameworks/core/index';
// state
/**
* Do not specify providers for modules that might be imported by a lazy loaded module.
*/
#NgModule({
imports: [
CommonModule,
HttpModule,
RouterModule,
StoreModule
],
schemas: [ NO_ERRORS_SCHEMA ],
declarations: [
eventComponent,
EventDetailsComponent,
EventNavigationComponent,
EventAlphanavComponent,
EventTrackComponent,
EventScheduleComponent,
EventAlphaComponent,
EventAuthorComponent,
EventAuthorListComponent,
EventSponsorComponent,
EventExhibitorComponent,
EventActivitiesComponent,
PaperComponent,
Path
]
})
export class EventModule {
constructor(#Optional() #SkipSelf() parentModule: EventModule) {
if (parentModule) {
throw new Error('SampleModule already loaded; Import in root module only.');
}
}
}
Any clue what I'm doing wrong here? Will this even work once I have this template problem worked out?
Any direction at all is appreciated. I'm following what instructions I can find but it's still not working. Thanks in advance!
Create a dummy directive for webview.
import { Directive } from '#angular/core';
#Directive({
selector: 'webview'
})
/** Dummy directive to allow html-tag 'webview' */
export class WebviewDirective {}
and add it to your AppModule declarations array:
...
import { WebviewDirective } from './webview.directive';
#NgModule({
imports: [...],
declarations: [..., WebviewDirective],
providers: [...],
bootstrap: [...]
})
export class AppModule {}
Credits to Philipp for his answer: https://stackoverflow.com/a/39290383/6028371
There must have been some problem with my testing. The above code worked after rebuilding the project and the webview element does what it needs to do in the electron context.

Categories

Resources