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();
}
}
Related
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.
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>.
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);
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 have an app module and single component application (made to demonstrate my problem), and getting following error:
Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for UserService! ; Zone: <root> ; Task: Promise.then ; Value:
code for AppModule:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UserService } from './components/common/userservice';
#NgModule({
imports: [
BrowserModule,
],
declarations: [
AppComponent
],
providers: [UserService],
bootstrap: [AppComponent],
entryComponents: []
})
export class AppModule {
}
Code for my AppComponent:
import { Component} from '#angular/core';
import { UserService} from './userservice';
#Component({
selector: 'App',
template: `<h3>App component</h3>
user name: {{userName}}
`,
providers: []
})
export class AppComponent {
userName: string;
constructor(userService: UserService) {
this.userName = userService.userName;
}
}
My UserService Code:
import { Injectable, EventEmitter } from '#angular/core';
#Injectable()
export class UserService {
obs$: EventEmitter<any> = new EventEmitter<any>()
userName = 'Sherlock Holmes';
}
Now if i add UserService as provider to AppComponent, it will solve the issue. but i dont want to, because i want only one instance of my service in whole application. Even in subModules(feature modules).
according to my understanding, if i add service as provider on module level, then i can just inject it to any component under module.
here is am example i was watching.
Plunker
am using angular2 version: "2.0.0"
The import path is wrong: you use /Common in one and /common right below.
Visual Studio and WebStorm will not show IntelliSense errors for case-sensitivity of paths.
Furthermore, if using Angular 5's AoT template compilation, you can get a "This component is not part of a module" error, even though it is, because the import path is incorrect. Without AoT this will work, so you'll get a surprise when converting to AoT.
Remove your service: UserService from app.module.ts, then add in component:
#Component({
selector: 'App',
template: `<h3>App component</h3>
user name: {{userName}}
`,
providers: [UserService]
})
Hope this will help you.
An additional reason for getting this error - I duplicated a service to a different directory and was updating each file individually. Even though the first file still existed I got this error until I updated app.module.ts.