Why i have to import all my partial components again in app.module.ts?
Or i'm just doing it wrong?
This is my home component where i'm importing all partial components to add them to Home component.
Home.Component.ts
import { Component } from "#angular/core";
import { SliderComponent } from "./partial/slider/slider.component";
import { AdvanceSearchComponent } from "./partial/advenace-search/advance-search.component";
import { FeatureProfile } from "./partial/feature-profiles/feature-profiles.component";
#Component({
selector: 'app-root',
templateUrl: './Home.component.html'
})
export class HomeComponent{}
This is my app module and here i have to import all partial component again to use them. And my question is why i have to import all Home partial component here when i already include it to my home.component.ts why i don't just add them to declarations and just import HomeComponent
app.module.ts
import { HomeComponent } from './Home/Home.component';
import { SliderComponent } from "./Home/partial/slider/slider.component";
import { AdvanceSearchComponent } from "./Home/partial/advenace- search/advance-search.component";
import { FeatureProfile } from "./Home/partial/feature-profiles/feature-profiles.component";
import { ExploreComponent } from './Explore_spaces/Explore.component';
import { SpaceComponent } from './Space/Space.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
SliderComponent,
FeatureProfile,
AdvanceSearchComponent.
ExploreComponent,
SpaceComponent
],
})
Starting from the Angular RC5 you can't add components and filters to your component. The place you need to add your components is the module.
If you need to use those components in many different modules, import and export them in the SharedModule(for example), then use this module as an import to your wanted modules.
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[].
It is first time To use Angular Now I'm learning angular 7:
- I create a new custom component in
- |src folder
---| app
----|| server (name of my component)
then I added in app.component.html the name of component
I see in the tutorial show in browser
the server component
even if he add it empty element
I do all steps in
server.component.ts file
import { Component } from '#angular/core';
#Component({
selector:'app-server',
templateUrl: './server.component.html'
})
export class ServerComponent {
}
& app.module.ts file
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { ServerComponent } from './server/server.component';
#NgModule({
declarations: [
AppComponent,
ServerComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Have you define your <app-server></app-server> somewhere?
For instance in the app.component.html
<app-navbar></app-navbar>
<app-server></app-server>
<app-footer></app-footer>
Also you will find an example here : https://angular.io/tutorial/toh-pt1
In your app.component.html add :
<app-server></app-server>
Thus you'll see its HTML.
What you did is in fact kind of import it and make it visible to other components declared in AppModule, but you didnt call it actually.
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 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].
We have an angular 1+2 hybrid application (therefore using an angular 1 base app).
We are using upgrade adapter to downgrade our angular2 components before we bootstrap our application with the adapter. That works as expected.
However, we anticipate having large number of angular2 components (150+) so loading all the components before bootstrapping would mean a very slow initial load. I am trying to find ways to lazy load angular2 components so that we can load them as needed. Is there any way to achieve that?
Here's part of my code.
main.ts
import baseRouter from './lib/routing/baseRouter';
import router from './lib/routing/router'
import futureRoutes from './futureRoutes'
import { Adapter } from './lib/framework/upgradeAdapter';
import { Http, Headers, Response } from '#angular/http';
import { DashboardComponent } from './2x/Dashboard/dashboard.component';
var app = angular.module('myApp', [
'ui.router',
'ngStorage'
]);
app.config(router(app, futureRoutes))
.config(baseRouter)
.directive('dashboard', Adapter.downgradeNg2Component(DashboardComponent));
Adapter.bootstrap(document.body, ['myApp'], { strictDi: true });
export default app;
module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { DashboardComponent } from '../../2x/Dashboard/dashboard.component';
#NgModule({
imports: [BrowserModule],
declarations: [DashboardComponent]
})
export class AppModule { }
upgradeAdapter.ts
import { UpgradeAdapter } from '#angular/upgrade';
import { AppModule } from './module'
export const Adapter = new UpgradeAdapter(AppModule);
dashboard.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'dashboard',
templateUrl: '/dist/core/2x/Dashboard/dashboard.html',
})
export class DashboardComponent {
greeting: string;
constructor() {
this.greeting = 'Hello world';
}
}
Upon doing this, my dashboard component is available to use in the application.