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);
Related
This is my standalone component
import { Component } from '#angular/core';
import { CommonModule } from '#angular/common';
#Component({
selector: 'app-navbar',
standalone: true,
imports: [CommonModule],
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent {
}
and this is where i have imported it (in admin module)
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { AdminRoutingModule } from './admin-routing.module';
import { UsersComponent } from './users/users.component';
import { NavbarComponent } from '../components/navbar/navbar.component';
#NgModule({
declarations: [
UsersComponent
],
imports: [
CommonModule,
AdminRoutingModule,
NavbarComponent,
]
})
export class AdminModule { }
In my usercomponent.html template i did
<p>users works!</p>
<app-navbar></app-navbar>
When I run ng serve I got
`error NG8001: 'app-navbar' is not a known element:
If 'app-navbar' is an Angular component, then verify that it is part of this module.
If 'app-navbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
2 `
I would like to know why I have this error and how to fix it
Thanks !
If NavbarComponent is part of another module, on that module you have to export the component using exports[], and then import the module, not the component on AdminModule.
If it is not part of other module, you have to include the component on declarations[] not on imports[].
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].
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
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?
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'