I have created my own angular element to use as a web component in a different single html page.
When I run it as a normal component using ng serve the app works properly. However, when I create the element and use it in a different page the app stops working as it should. The css seems wrong and there is a lot of bugs.
My AppModule:
import { Injector, NgModule, DoBootstrap } from '#angular/core';
import { createCustomElement } from '#angular/elements';
import { BrowserModule } from '#angular/platform-browser';
import { DrawBoardComponent } from './draw-board/draw-board.component';
import {MatExpansionModule} from '#angular/material/expansion';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
#NgModule({
declarations: [
DrawBoardComponent
],
imports: [
BrowserAnimationsModule,
BrowserModule,
MatExpansionModule
],
entryComponents: [DrawBoardComponent]
})
export class AppModule implements DoBootstrap {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const element = createCustomElement(DrawBoardComponent, {injector: this.injector});
customElements.define('app-draw', element);
}
}
I used concat to make a single js file from the js files created when ng build.
Related
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.
I'm currently working with the latest Ionic and I'm having a hard time trying to get a CLI generates component to work.
I start with a blank proyect and then create a new component with:
ionic generate component my-component
The command runs fine and creates the following files:
CREATE src/app/my-component/my-component.component.html (31 bytes)
CREATE src/app/my-component/my-component.component.spec.ts (664 bytes)
CREATE src/app/my-component/my-component.component.ts (293 bytes)
CREATE src/app/my-component/my-component.component.scss (0 bytes)
Then I proceed to use the new component in my main page like this:
<ion-content padding>
<my-component></my-component>
</ion-content>
The app.module.ts file is updated like this:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { RouterModule, RouteReuseStrategy, Routes } from '#angular/router';
import { IonicModule, IonicRouteStrategy } from '#ionic/angular';
import { SplashScreen } from '#ionic-native/splash-screen/ngx';
import { StatusBar } from '#ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { MyComponentComponent } from './my-component/my-component.component';
#NgModule({
declarations: [AppComponent, MyComponentComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
When running the app in ionic lab I get the followin error:
ERROR Error: Uncaught (in promise): Error: Template parse errors:
'my-component' is not a known element
This is my system info:
ionic (Ionic CLI) : 4.2.1
Ionic Framework : #ionic/angular 4.0.0-beta.12
#angular-devkit/build-angular : 0.7.5
#angular-devkit/schematics : 0.7.5
#angular/cli : 6.1.5
#ionic/angular-toolkit : 1.0.0
Any ideas why is this happening? I worked before with Ionic 3 and never get this problem.
update:
This is my default my-component.component.ts file:
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.scss']
})
export class MyComponentComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
In order to use a custom component inside another component you have to include it in exports array.
#NgModule({
....
declarations: [AppComponent, MyComponentComponent],
entryComponents: [],
exports:[MyComponentComponent]
....
})
export class AppModule {}
You can either do this way or you can make all your custom components inside another customModule and then import that module in app.component.ts page.
The name you are referring to the component is wrong. selector for your MyComponentComponent class is app-my-component, so you have to use <app-my-component></app-my-component> instead of <my-component></my-component>.
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
I have a web app that was started in VS2015 using Angular 2 and was working for as far as it went. I upgraded it to VS2017 and had to make a few changes, but in the main all seems ok. I don't receive any compile time errors. During the run phase, when I'm attempting to load a page, the page doesn't fully render and I don't get any real errors on screen. I'm using I.E.11 and when I look in the console I get the following error:
Error: Syntax error
Evaluating http://localhost:42413/app/app.module.js
Evaluating http://localhost:42413/app/main.js
Loading app
the Two files in question are in the place expected and no code has changed around these files since I did the port.
In my main.ts file I have:
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
and in app.module.js I have:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { HttpModule } from '#angular/http';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { AgentDetailsComponent } from './recruiter/agent-details.component';
#NgModule({
imports: [
BrowserModule,
HttpModule,
FormsModule
],
declarations: [
AppComponent,
AgentDetailsComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }
The error occurs on the second line of main.ts: import { AppModule } from './app.module' Setting breakpoints it does not get to the first line in this file. Stepping the JS files. It first goes through the register-loader.js file which calls evaluate.js. It then fails in the evaluate method. There is a huge stacktrace, but basically it's erroring in the files that are under node_modules.
If I run in a chrome browser I receive the an error from zone.js stating that it cannot load http://localhost:42413/agent-details.component.html.
Within my projects wwwroot directory this component sits in my app\recruiter folder.
In the app.module.ts folder it is referenced as :
import { AgentDetailsComponent } from './recruiter/agent-details.component';
and the above line hovering over ./recruiter/agent-details.component shows the correct path in the tooltips.
In Chrome itself the error seems to occur whilst performing platformBrowserDynamic().bootstrapModule(AppModule); declared in main.ts
my agent-details.component.ts file has:
import { Component, OnInit } from '#angular/core';
import { Router, ActivatedRoute } from '#angular/router';
import { ICountry } from '../services/interfaces/country';
import { RecruiterService } from '../services/recruiter/recruiter.service';
#Component({
selector: 'agent-details',
templateUrl: 'agent-details.component.html',
providers : [RecruiterService]
})
export class AgentDetailsComponent implements OnInit {
private countries: ICountry[] = [];
private errorMessage: string;
constructor(private recruiterService : RecruiterService) {
}
getCountries() {
this.recruiterService.getCountries().subscribe((countries: ICountry[]) => this.countries = countries);
}
ngOnInit(): void {
this.getCountries();
}
}
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'