Trying to better understand the #component selector and template to path my routing to an html file. I am getting errors when trying to simply point to the html file even though it seems I have what I need in my index.ts files. The errors I am getting are:
Looking at the involved files, I am not sure what is wrong. Here is my user.component.ts:
import {Component} from '#angular/core';
#Component({
selector: 'users',
template: require('./components/userMgmt/inviteUser.html')
})
export class userComponent {}
Then my index.ts from the root of app:
import {NgModule} from '#angular/core';
import {BrowserModule} from '#angular/platform-browser';
import 'jquery';
import 'bootstrap';
import 'font-awesome/css/font-awesome.css';
import {routing, RootComponent} from './routes';
import {AppComponent} from './containers/app';
import {HeaderComponent} from './components/header';
import {userComponent} from './components/userMgmt/user.component';
#NgModule({
imports: [
BrowserModule,
routing
],
declarations: [
RootComponent,
AppComponent,
HeaderComponent,
userComponent
],
bootstrap: [RootComponent]
})
export class AppModule {}
And finally, my index.ts from the root of my /src:
import 'core-js/client/shim';
import 'zone.js/dist/zone';
import '#angular/common';
import 'rxjs';
import './index.scss';
import {enableProdMode} from '#angular/core';
import {platformBrowserDynamic} from '#angular/platform-browser-dynamic';
import {AppModule} from './app';
declare var process: any;
if (process.env.NODE_ENV === 'production') {
enableProdMode();
} else {
Error['stackTraceLimit'] = Infinity; // tslint:disable-line:no-string-literal
require('zone.js/dist/long-stack-trace-zone'); // tslint:disable-line:no-var-requires
}
platformBrowserDynamic().bootstrapModule(AppModule);
Where I am going wrong on this? I don't see any issues. Am I not using template correctly? Seems I should be able to inject html or add a path to the html file, no?
Per the first answer, it fixed part of it, but not understanding why now it doesn't understand the path. The console no longer out puts an error, but the page does not load in the browser. Here is the error:
And here is a screenshot of my file structure:
Looking at your component folder and code. I feel that the path to the component html is incorrect. Try this code and see.
import {Component} from '#angular/core';
#Component({
selector: 'users',
templateUrl: './inviteUser.html'
})
export class userComponent {}
Add moduleID in #component
#Component({
selector: 'users',
moduleId: module.id,
templateUrl: './inviteUser.html'
})
Related
i am using angular material table for angular 10 project. I added material table successfully.
but now i am trying to add pagination to my table. therefor i added below code to my component.
import {MatPaginator} from '#angular/material/paginator';
i added above import to my app.module.ts file.
this is the code that i added for my html page to load pagination
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
but this html tag did not work. it occurred error.
please check below image.
my modules
As stated by your IDE, the module doesn't know that component.
The solution is to add it in your app.module.ts (or equivalent depending where your ar ein the app)
You should import the module MatPaginatorModule in your appmodule
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { MatPaginatorModule } from '#angular/material/paginator';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
MatPaginatorModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Note that i have imported the module and not the component directly
I am working on Electron app with angular 5 for the rendering process,
is there is a way to export the console programmatically?
I need a way to synchronize the logging data to file so, I can review it anytime
without opening electron devtools and save as option, I need it programmatically
I save my own logs, but what if there is a module that logging an error i need to get whole console log history and export it to log file
You can use electron-log, which is a logging module for Electron application. It can be used without Electron.
And you should use ngx-electron.
Firstly, install electron-log
npm install electron-log
Require it in the electron's main process.
const logger = require('electron-log');
Then install ngx-electron
npm install ngx-electron
ngx-electron is exposing a module called NgxElectronModule which needs to be imported in your AppModule.
import {NgModule} from '#angular/core';
import {BrowserModule} from '#angular/platform-browser';
import {NgxElectronModule} from 'ngx-electron';
import {AppComponent} from './app.component';
#NgModule({
declarations: [],
imports: [
BrowserModule,
NgxElectronModule
],
bootstrap: [AppComponent]
})
export class AppModule {
}
Once the module has been imported, you can easily use angular DI to ask for ElectronService.
import {Component} from '#angular/core';
import {ElectronService} from 'ngx-electron';
#Component({
selector: 'my-app',
templateUrl: 'app.html'
})
export class AppComponent {
logger
constructor(private _electronService: ElectronService) {
// this should be in init()
if(this._electronService.isElectronApp) {
this.logger = this._electronService.remote.require("electron-log");
}
}
public testLogger() {
this.logger.info('this is a message from angular');
}
}
After that, you should be able to use electron-log in your components, just remember import {ElectronService} from 'ngx-electron';, and this.logger = this._electronService.remote.require("electron-log"); in the components.
I have a module AppModule and another module say FooModule. I have some components in FooModule and I' am loading routes of FooModule in AppModule like any normal app would do.
Following is the sample code for AppModule:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router'
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from 'app/components/app';
#NgModule({
imports: [
BrowserModule,
RouterModule.forRoot([
{
path: 'foo',
loadChildren: './foo.module#FooModule'
}
])
],
declarations: [AppComponent],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
Following is the sample code for FooModule:
import { NgModule } from '#angular/core';
import { RouterModule } from '#angular/router'
import { FooComponent } from 'app/components/foo';
#NgModule({
imports: [
RouterModule.forChild([
{
path: '',
component: FooComponent
}
])
],
declarations: [FooComponent],
})
export class FooModule {}
Now when I run the app, I' am getting Can't bind to 'ngIf' since it isn't a known property of 'div'. error which as per my understanding shouldn't happen because I' am using BrowserModule in AppModule and loading routes of FooModule in AppModule.
Am I missing something?
I' am using Angular CLI v1.2.0 and Angular 4.2.5.
Edit
I know that to fix this issue I need to import CommonModule in FooModule. But that's exactly why I' am asking this question in first place that when I have imported BrowserModule in AppModule which re-exports CommonModule then why I need to include CommonModule in each individual module?
Thanks
In each feature module, such as your fooModule you need to import CommonModule. It contains the common directives and pipes.
Actually, the BrowserModule imports and re-exports CommonModule, so they export the same functionality.
For more information, see this: https://www.youtube.com/watch?v=ntJ-P-Cvo7o&t=2s
UPDATE
Modules are not inherited. To say it another way, you cannot get the functionality of a module unless you import that module or another module that exports it.
As shown in the above diagram... If Shared Module imports Forms Module and App Module imports Shared Module, App Module would not have access to the Forms Module component, directives, and pipes (such as ngModel in this example) unless Shared Module exports Forms Module.
KEY:
Orange lines: Imports
Gray lines: Exports
Blue lines: Declarations
Import CommonModule into FooModule and any other module. BrowserModule imports CommonModule. CommonModule contains *ngIf etc. directives
I'm doing the quickstart tutorial and am encountering some error. The following is my file structure:
//## home/home.component.ts #################
import {Component} from '#angular/core';
#Component({
selector:'home',
template: `
<div>I'm a home component.</div>
`
})
export class HomeComponent{}
//## home/home.module.ts #################
import {NgModule} from "#angular/core";
import {HomeComponent} from "./home.component";
NgModule({
declarations: [HomeComponent],
exports: [HomeComponent]
});
export class HomeModule {
}
//## app.component.ts #################
import {Component} from "#angular/core";
#Component({
selector: 'app',
template: `
<div>I'm the App Component</div>
`
})
export class AppComponent {}
//## app.module.ts #################
import {AppComponent} from "./app.component";
import {BrowserModule} from "#angular/platform-browser";
import {NgModule} from "#angular/core";
import {HomeModule} from "./home/home.module"; //this breaks it
#NgModule({
declarations: [AppComponent],
bootstrap: [AppComponent],
imports: [BrowserModule, HomeModule] //home module breaks it
})
export class AppModule{}
//## main.ts #################
import {platformBrowserDynamic} from "#angular/platform-browser-dynamic";
import {AppModule} from "./app.module";
platformBrowserDynamic().bootstrapModule(AppModule);
I am confused, as this is a pretty simple example. The Home module is causing the application to fail somehow. It gives the following error:
ZoneAwareErrormessage: "(SystemJS) Cannot set property 'stack' of undefined ... followed by hundreds of lines of the same. Does anyone have any ideas on how to debug errors like these?
If HomeModule is a feature module, change your declaration section to be declarations: [CommonModule, HomeComponent]
I get the same error,and it's cause the zone find some error in my template. I'm in Angular 2.4.1 and zone 0.7.4,try upgrade.
btw,I had set the template property to the url of my template,it's work,so,I think the zone may has a bug or something.
You must import CommonModule in the HomeModule. Your HomeModule code will be like this:
import {NgModule} from "#angular/core";
import {CommonModule} from "#angular/common"; // Add this
import {HomeComponent} from "./home.component";
NgModule({
imports: [CommonModule], // Add this
declarations: [HomeComponent],
exports: [HomeComponent]
});
export class HomeModule { }
I coudn't fix this, but for anyone experiencing the same problem, avoid the quickstart tutorial and use angular-cli to generate things instead. It seems much cleaner and easier to understand when starting out.
ng new new-project --style=sass should sort you out.
I want to make my website modern with some cool features.
For this I used jQuery and self made things. But that's slow and everything I developed is easier in Angular.
So I started to implement the Angular 2 code into my normal website.
The things (app.component, main.ts, app.module) work. I have the angular functionality on my page.
That's the first try.
Now I found out that I can't use second and third components (this ones which are not in bootstrap array) not within the selector.
So the bootstrapped component is the root-element for everything I think.
The next step was to replace the whole body as a component.
For example with angular 1 it was easy: ng-controller="app" and finish.
I can do this with <body> and everything.
Now with Angular 2 I must define a template for the component. else I get this error Uncaught Error: No template specified for component AppComponent
So the questions are...
Is it possible to use the as selector for the app so that I can use components within the app without bootstrapping them?
Or is there a way to use the components flexible?
The main reason is:
I want to define components globally which must not exist on each page. So I can have a component which is called test-component which is only used on test.html and a about-component which is only used on about.html
You understand?
Currently the problem is that I get this error: app.js:116448EXCEPTION: Error in :0:0 caused by: The selector "my-app" did not match any elements and ORIGINAL EXCEPTION: The selector "my-app" did not match any elements
If I define them both it works. But if one component is missing then I get this error.
Current scripts:
main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app.component.ts
import { Component } from '#angular/core';
import {Http} from "#angular/http";
#Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1> <a (click)="test()">:)</a>`
})
export class AppComponent {
constructor (private http: Http) {}
name = 'Angular';
test() {
alert('Yay');
return this.http.get('/asd/aaa/test').subscribe((a) => {
console.log('A', a);
}, (b) => {
console.log('B', b);
});
}
}
app.module.ts
import {NgModule} from '#angular/core';
import {BrowserModule} from '#angular/platform-browser';
import {AppComponent} from './app.component';
import {JsonpModule, HttpModule} from "#angular/http";
import {FormsModule} from "#angular/forms";
import {TestComponent} from "./test.component";
#NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule
],
declarations: [
AppComponent,
TestComponent
],
bootstrap: [
AppComponent,
// TestComponent // this shouldnt be a bootstrap because else the component MUST exist on the page!
]
})
export class AppModule {
}
test.component.ts
import { Component } from '#angular/core';
import {Http} from "#angular/http";
#Component({
selector: 'test-app',
template: `<h1>Hello {{name}}</h1> <a (click)="test()">:)</a>`
})
export class TestComponent {
constructor (private http: Http) {}
name = 'Angular !!!!!!!!!!!!';
test() {
alert('yyyyy');
return this.http.get('/asd/aaa/test').subscribe((a) => {
console.log('A', a);
}, (b) => {
console.log('B', b);
});
}
}
As I said if I want to use the body as root element it replaces everything of the body. And this is not for my use case.
It's only a normal website. Multiple HTML (background = PHP) pages.
I could implement this platformBrowserDynamic().bootstrapModule(AppModule); on each page where I need something. Then I could write a module for each page. I think this could solve the problem, too. But it's bad... Having a lot of modules...