I have a general question about how pages handle imports. When you import a file into another, are the imported files declarations and imports available in the file your importing it into?
Instead of importing the same component into multiple modules I was advised to import the component in the main module and inherit that component in the other pages I want to use it in. I am not aware of how to do this. When I solely import the main module (as seen below) I still get errors that my import ChartComponent is not defined. How do you import modules into other modules?
I have a page with the following code:
main.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { MainPage } from './main';
import { MomentModule, TimeAgoPipe } from "angular2-moment";
import { AlertCardComponent } from '../../components/alert-card/alert-card';
import { AlertCardManageComponent } from '../../components/alert-definition-card/alert-definition-card';
import { ThingCardComponent } from '../../components/thing-card/thing-card';
import { ThingDetailsPage } from '../thing-details/thing-details';
import { AttributesPage } from "../attributes/attributes";
import { ChartComponent } from '../../components/chartist/chart.component';
#NgModule({
declarations: [
MainPage,
AlertCardComponent,
AlertCardManageComponent,
ThingCardComponent,
ChartComponent
],
imports: [
IonicPageModule.forChild(MainPage),
MomentModule
],
exports: [AlertCardComponent,AlertCardManageComponent,ThingCardComponent,ThingDetailsPage,AttributesPage]
})
export class MainPageModule { }
I want to access the { ChartComponent } import/declaration from this page and have the two following files inherit it:
things-details.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ThingDetailsPage } from './thing-details';
import { MomentModule } from "angular2-moment";
import { MainPageModule } from '../main/main.module';
// import { ChartComponent } from '../../components/chartist/chart.component';
#NgModule({
declarations: [
ThingDetailsPage,
// ChartComponent
],
imports: [
IonicPageModule.forChild(ThingDetailsPage),
MomentModule,
MainPageModule
]
})
export class ThingDetailsPageModule {}
+
attributes.module.ts
import { NgModule } from '#angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AttributesPage } from "../attributes/attributes";
import { MainPageModule } from '../main/main.module';
import {MomentModule} from "angular2-moment";
// import { ChartComponent } from '../../components/chartist/chart.component';
#NgModule({
declarations: [
AttributesPage,
// ChartComponent
],
imports: [
IonicPageModule.forChild(AttributesPage),
MomentModule,
MainPageModule
]
})
export class AttributePageModule {}
As seen above, I am importing MainPageModule into each of my sub files, but I am still not able to access the { ChartComponent } import and declaration from the main.module.ts file.
Any help would be appreciated, thanks.
All module will be imported to main module.
Try to use into main.module.ts:
imports: [
IonicPageModule.forChild(MainPage),
MomentModule,
ThingDetailsPageModule,
AttributePageModule
],
comment the line MainPageModule from these files
things-details.module.ts
attributes.module.ts
In your main module, try adding ChartComponent to the list in exports: [AlertCardComponent,AlertCardManageComponent,ThingCardComponent,ThingDetailsPage,AttributesPage].
Related
The error happens when I import my LabelModule into the FormFieldModule. Then I use the Label Component in the FormField Component.
I do not import/use those modules/components anywhere else.
This is my FormFieldModule:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormFieldComponent } from './form-field.component';
import { LabelModule } from '#app/shared';
#NgModule({
declarations: [FormFieldComponent],
imports: [CommonModule, LabelModule],
exports: [FormFieldComponent],
})
export class FormFieldModule {}
This is my LabelModule:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { LabelComponent } from './label.component';
#NgModule({
declarations: [LabelComponent],
exports: [LabelComponent],
imports: [CommonModule],
})
export class LabelModule {}
The thing is when I import the modules like this, it works.
import { LabelModule } from '#app/shared/components/form-elements/label';
import { ValidationErrorModule } from '#app/shared/components/form-elements/validation-error';
The import shortening works everywhere else. But not here.
Another thing I noticed - it works flawlessly when I build the project for production and serve it, no errors, no warnings, it just works. Seems to only be the development issue.
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);
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
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 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.