iam add new ng generate component user-item
this code user-item.component.ts
We started to use the AngularJS in the project but when run serve dont show result in page .whats problem
import { Component, OnInit } from '#angular/core';
import { FormsModule } from '#angular/forms';
#Component({
selector: 'app-user-item',
templateUrl: 'user-item.component.html',
styleUrls: ['user-item.component.css']
})
export class UserItemComponent implements OnInit {
name: string;
constructor() {
this.name = 'test';
}
ngOnInit() {
}
}
user-item.component.html
<p>
user-item works!
</p>
this code app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { AppComponent } from './app.component';
import { UserItemComponent } from './user-item/user-item.component';
import { UserListComponent } from './user-list/user-list.component';
#NgModule({
declarations: [
AppComponent,
UserItemComponent,
UserListComponent,
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent, UserItemComponent]
})
export class AppModule { }
index.html
<body>
<app-user-item></app-user-item>
--
<app-user-list></app-user-list>
--
<!--<app-root></app-root>-->
-----
</body>
Related
Runtime Error
Cannot find module "angularfire2/database"
Stack
Error: Cannot find module "angularfire2/database"
Home.Ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { FirebaseProvider } from './../../providers/firebase/firebase';
//error
import { FirebaseListObservable } from 'angularfire2/database';
#Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
shoppingItems: FirebaseListObservable<any[]>;
newItem = '';
constructor(public navCtrl: NavController, public firebaseProvider: FirebaseProvider) {
this.shoppingItems = this.firebaseProvider.getShoppingItems();
}
addItem() {
this.firebaseProvider.addItem(this.newItem);
}
removeItem(id) {
this.firebaseProvider.removeItem(id);
}
}
The error is in this line
import { FirebaseListObservable } from 'angularfire2/database';
app.module.Ts
import { BrowserModule } from '#angular/platform-browser';
import { ErrorHandler, NgModule } from '#angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';
import { StatusBar } from '#ionic-native/status-bar';
import { SplashScreen } from '#ionic-native/splash-screen';
import { HttpModule } from '#angular/http';
import { AngularFireDatabaseModule } from 'angularfire2/database';
import { AngularFireModule } from 'angularfire2';
import { FirebaseProvider } from '../providers/firebase/firebase';
const firebaseConfig = {
apiKey: "$$$$$$$$$",
authDomain: "44444444.firebaseapp.com",
databaseURL: "https://44444.firebaseio.com",
projectId: "44444",
storageBucket: "i4444[enter image description here] [1]3.appspot.com",
messagingSenderId: "************"
};
#NgModule({
declarations: [
MyApp,
HomePage,
ListPage
],
imports: [
BrowserModule,
HttpModule,
AngularFireDatabaseModule,
AngularFireModule.initializeApp(firebaseConfig),
IonicModule.forRoot(MyApp),
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
ListPage
],
providers: [
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler},
FirebaseProvider
]
})
export class AppModule {}'
output:
Runtime Error
Cannot find module "angularfire2/database"
Stack
Error: Cannot find module "angularfire2/database"at Object.195 (http://localhost:8100/build/main.js:89:7)at webpack_require (http://localhost:8100/build/vendor.js:55:30)at Object.194 (http://localhost:8100/build/main.js:44:87)
try
import { AngularFireList } from 'angularfire2/database';
instead of
import { FirebaseListObservable } from 'angularfire2/database';
Which version do you use? In AngularFire 5.0 FirebaseListObservable is removed
I'm trying to upgrade an angularjs directive to use it my angular component. I've gotten the hybrid (ng1 + ng2) environment to work. I can also inject angularjs services in angular and use them in angular components (I actually got this working even with angularjs 1.4.x).
Now I'm trying to use an existing angularjs directive in angular, but not working.
For reference, are some snippets of my codes.
[index.html] (my-app is the Angular 4 root component)
...
<body>
<div class="banner">Angular Migration</div>
<my-app>Loading...</my-app>
...
</body>
...
[main.ts] (bootstrapping code)
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { UpgradeModule } from '#angular/upgrade/static';
import { Router } from '#angular/router';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
let upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.documentElement, ['sampleApp']);
platformRef.injector.get(Router).initialNavigation();
});
[app.module.ts] (Angular 4 module)
import { NgModule, Component } from '#angular/core';
import { HashLocationStrategy, LocationStrategy, CommonModule } from '#angular/common';
import { BrowserModule } from '#angular/platform-browser';
import { UpgradeModule } from '#angular/upgrade/static';
import { RouterModule, Routes, UrlHandlingStrategy } from '#angular/router';
import { HybridUrlHandlingStrategy } from './hybridUrlHandlingStrategy';
import { AppComponent } from './app.component';
export const routes: Routes = [
...
];
#NgModule({
imports: [
CommonModule,
BrowserModule,
UpgradeModule,
RouterModule.forRoot([], { useHash: true, initialNavigation: false })
],
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy },
{ provide: UrlHandlingStrategy, useClass: HybridUrlHandlingStrategy },
{ provide: 'appService', useFactory: (i: any) => i.get('appService'), deps: ['$injector'] },
{ provide: 'mdToHtml', useFactory: (i: any) => i.get('mdToHtml'), deps: ['$injector'] }
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule {
ngDoBootstrap() { }
}
[app.component.ts] (Angular 4 component)
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<router-outlet></router-outlet>
<div ng-view></div>
`,
})
export class AppComponent { }
[app.js] (AngularJs app)
'use strict';
angular.module('sampleApp', [
'ngRoute',
'app.components.services.appService'
])
.config(function ($routeProvider) {
$routeProvider
.otherwise({
template: ''
});
});
[myStars.js] (AngularJs directive)
'use strict';
angular.module('app.components.directives.myStars', [])
.controller('MyStarsCtrl', function() {
console.log("**** in MyStarsCtrl ")
})
.component('myStars', {
restrict: 'E',
bindings: {
count: '=count'
},
template: '<div>***** M Y S T A R S *****</div>'
});
[myStars.ts] (an attempt to migrate myStars directive to Angular 4)
import { Directive, ElementRef, Injector, Input, Output, EventEmitter } from '#angular/core';
import { UpgradeComponent } from '#angular/upgrade/static';
#Directive({
selector: 'my-stars'
})
export class MyStarsDirective extends UpgradeComponent {
#Input() count: number;
#Output() clicked: EventEmitter<number>;
constructor(elementRef: ElementRef, injector: Injector) {
super('myStars', elementRef, injector);
}
}
[test.module.ts] (Angular 4 test module)
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes} from '#angular/router';
import { TestComponent } from './test.component';
// importing the new MyStarsDirective)
import { MyStarsDirective } from '../../../components/directives/myStars/myStars';
const thisRoute: Routes = [
{
path: 'test/:id',
component: TestComponent
}
];
#NgModule({
declarations: [
TestComponent,
MyStarsDirective, // <<<< adding directive here
],
providers: [],
imports: [
CommonModule,
RouterModule.forChild(thisRoute)
],
exports: [
RouterModule
]
})
export class TestModule {}
[test.component.ts] (Angular 4 test component)
import { Component, Inject, OnInit } from '#angular/core';
import { ActivatedRoute } from '#angular/router';
import { FormsModule } from '#angular/forms';
import { HybridUrlHandlingStrategy } from '../../../hybridUrlHandlingStrategy';
import { MyStarsDirective } from '../../../components/directives/myStars/myStars';
#Component({
templateUrl: './test.component.html'
})
export class TestComponent implements OnInit {
routeParams: any
myService: any
mdToHtml: any
constructor(
#Inject('myService') myService: any,
#Inject('mdToHtml') mdToHtml: (str: string) => string,
private activatedRoute: ActivatedRoute
) {
this.myService = myService;
this.mdToHtml = mdToHtml;
}
ngOnInit() {
this.routeParams = this.activatedRoute.params.subscribe(params => {
console.log("params", params['groupId'])
...
}
ngOnDestroy() {
this.routeParams.unsubscribe();
}
}
[test.component.html] (Angular 4 html)
...
<my-stars></my-stars> <!-- <<<< using directive here -->
...
Note: I've also upgrade angularjs version to 1.5 just to make this hybrid app works.
Here's the error when I browser the test component page:
Any help would be greatly appreciated.
Thanks.
For anyone interested, here's the solution to this error.
[test.module.ts] (Angular 4 test module)
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule, Routes} from '#angular/router';
import { TestComponent } from './test.component';
// importing the new MyStarsDirective)
import { MyStarsDirective } from '../../../components/directives/myStars/myStars';
const thisRoute: Routes = [
{
path: 'test/:id',
component: TestComponent
}
];
#NgModule({
declarations: [
TestComponent,
MyStarsDirective, // <<<< adding directive here
],
providers: [
{
provide: '$scope',
useFactory: i => i.get('$rootScope'),
deps: ['$injector']
}, // <<<< added this section to fix the No provider for $scope error
],
imports: [
CommonModule,
RouterModule.forChild(thisRoute)
],
exports: [
RouterModule
]
})
export class TestModule {}
I found the answer in this link https://github.com/angular/angular/issues/14993 (inspired by BrunoPoeta)
See comment by gkalpak on March 10.
Now let's see if I can upgrade a regular directive and use 1.4.x.
I have two shared modules Core and MasterData.
I am facing issue to use MasterData module's components in my applcation though i can use Core Module's Components. Following is my code.
Core Module (core.module.ts)
import { NgModule, ModuleWithProviders, ComponentFactoryResolver } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import {
IgHierarchicalGridComponent,
IgPivotGridComponent,
IgGridComponent
} from 'igniteui-angular2';
import { CacheModule } from 'angular2-cache';
import { AUTH_PROVIDERS } from 'angular2-jwt';
import { CoreComponents, EntryCoreComponents } from './components';
import { CoreService } from './services';
import { ClientInfoServiceProvider } from './client-info';
import { AuthGuard } from './guards/auth.guard';
const IgniteuiComponents = [
IgHierarchicalGridComponent,
IgPivotGridComponent,
IgGridComponent
];
#NgModule({
declarations: [
...CoreComponents,
...IgniteuiComponents
],
providers: [
...CoreService,
AUTH_PROVIDERS,
AuthGuard,
ClientInfoServiceProvider
],
imports: [
CommonModule,
FormsModule,
RouterModule,
HttpModule,
CacheModule,
],
entryComponents: [
...EntryCoreComponents
],
exports: [
HttpModule,
CacheModule,
RouterModule,
FormsModule,
...CoreComponents,
...IgniteuiComponents
]
})
export class CoreModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: QmsCoreModule,
providers: [
...CoreService,
AUTH_PROVIDERS,
AuthGuard,
ClientInfoServiceProvider
]
};
}
}
Master Data Module (which is inheriting Core because I use infragistics library in core and masterdata components) (masterdata.module.ts)
import { NgModule, ModuleWithProviders, ComponentFactoryResolver } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { QmsCoreModule } from 'qms/core/qms-core.module';
import { MasterdataComponents } from './components';
import { MasterdataServices } from './services';
#NgModule({
imports: [
CommonModule,
FormsModule,
RouterModule,
HttpModule,
QmsCoreModule.forRoot()
],
declarations: [
...MasterdataComponents
],
providers: [
...MasterdataServices
],
exports: [
FormsModule,
RouterModule,
HttpModule,
QmsCoreModule,
...MasterdataComponents
]
})
export class QmsMasterdataModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: QmsMasterdataModule,
providers: [
...MasterdataServices
]
};
}
}
Master data Module has currently only one component name TeamGrid. (Component Selector is ‘team-grid’)
Main Application AppModule (app.module.ts)
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, Provider } from '#angular/core';
import { QmsMasterdataModule } from 'qms/masterdata/qms-masterdata.module';
import { SwacProxyInterface } from 'qms/core/swac';
import { AppRoutingModule } from './app-routing.module';
import { HomeModule } from './home/home.module';
import { ProjectModule } from './project/project.module';
import { AppComponent } from './app.component';
import { SharedServices } from './shared/services';
export const AppModule = (proxyInterface: SwacProxyInterface, provider: Provider[]) => {
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HomeModule,
ProjectModule,
QmsMasterdataModule.forRoot()
],
providers: [
SharedServices,
...provider
],
bootstrap: [AppComponent]
})
class AppModule {
}
return AppModule;
};
Error message is:
'team-grid' is not a known element:
1. If 'team-grid' is an Angular component, then verify that it is part of this module.
2. If 'team-grid' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message.
("
[ERROR ->]<team-grid></team-grid>
Can someone help me to find the correct solution for this?
Above Implementation is correct but only mistake is that each modules (Home.module / Project.module) under App.module should also import masterdata.module or core.module as per required compoenents.
This might help you to find out root cause
shared.module.ts
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { ReactiveFormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { QmsMasterdataModule } from 'qms/masterdata/qms-masterdata.module';
#NgModule({
declarations: [
],
imports: [
CoreModule,
QmsMasterdataModule
],
exports: [
CoreModule,
QmsMasterdataModule
]
})
export class SharedModule {
}
App Module
import {SharedModule} from './modules/shared/shared.module';
export const AppModule = (proxyInterface: SwacProxyInterface, provider: Provider[]) => {
#NgModule({
declarations: [
AppComponent
],
imports: [
SharedModule
],
providers: [
],
bootstrap: [AppComponent]
})
class AppModule {
}
return AppModule;
};
I am getting error "Can't resolve all parameters for RouteParams while creating a basic app for routing"
Below is my app.module.ts file looks like
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { App } from './app';
import { routing } from './components/appRouting/app.routing';
import { LoginComponent } from './components/login/loginComponent';
import {SliderMenuComponent} from './components/sliderMenu/sliderMenuComponent';
#NgModule({
imports: [
BrowserModule,
FormsModule,
routing,
HttpModule
],
declarations: [App,LoginComponent,SliderMenuComponent],
providers: [],
bootstrap: [App]
})
export class AppModule { }
My app.routing.ts looks like as below:
import { ModuleWithProviders } from '#angular/core';
import { Routes, RouterModule } from '#angular/router';
import {LoginComponent} from '../login/loginComponent';
import {SliderMenuComponent} from '../sliderMenu/sliderMenuComponent';
const appRoutes: Routes = [
{
path: '',
redirectTo: '/login',
pathMatch: 'full'
},
{ path: 'login', component: LoginComponent },
{ path: 'slider', component: SliderMenuComponent }
];
export const appRoutingProviders: any[] = [
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
My app.ts looks like below:
import {Component} from '#angular/core';
#Component({
selector: 'app',
template : `
<h1 class="title">Component Router</h1>
<nav>
<a routerLink="/slider" routerLinkActive="active">Slider</a>
<a routerLink="/login" routerLinkActive="active">Login</a>
</nav>
<router-outlet></router-outlet>
`
})
export class App {
}
updated the angular router to "#angular/router": "3.0.0-rc.2" and it's working now
app.routing.ts
import { Routes, RouterModule } from '#angular/router';
import { LoginComponent } from './components/login/login.component';
import { TestsComponent } from './components/tests/tests.component';
import { NotFoundComponent } from './components/notfound/notfound.component';
import { AppModule } from './app.module';
const appRoutes: Routes = [
{ path: 'anmelden', component: LoginComponent },
{ path: 'tests', component: TestsComponent },
{ path: '**', component: NotFoundComponent }
];
export const appRoutingProviders: any[] = [
];
export const routing: AppModule = RouterModule.forRoot(appRoutes);
app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { routing,
appRoutingProviders } from './app.routing';
import { AppComponent } from './components/app/app.component';
import { LoginComponent } from './components/login/login.component';
import { TestsComponent } from './components/tests/tests.component';
import { NotFoundComponent } from './components/notfound/notfound.component';
#NgModule({
declarations: [ AppComponent, LoginComponent, TestsComponent, NotFoundComponent ],
imports: [ BrowserModule, routing ],
providers: [ appRoutingProviders ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
The result:
Edit:
This errors only occurs when using npm start. If I delete the imports: row in the module run npm start and add this line again everything works fine.