I created a module which has a directive in it (ObDatePickerModule).
Also I created a project which has ObDatePickerModule in it's dependencies (under dependencies in package.json).
Next I am importing Module A in my project's module:
import {BrowserModule} from '#angular/platform-browser';
import {NgModule} from '#angular/core';
import {FormsModule} from '#angular/forms';
import {ObDatePickerModule} from 'ng2-date-picker';
import {AppComponent} from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
ObDatePickerModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}
Here is the app.component of the project:
import {Component} from '#angular/core';
import {ObDayPickerComponent} from 'ng2-date-picker';
import * as moment from 'moment';
#Component({
selector: 'app-root',
template: '<ob-day-picker [(ngModel)]="date"></ob-day-picker>',
styleUrls: ['./app.component.css'],
entryComponents: [ObDayPickerComponent]
})
export class AppComponent {
date = moment();
}
Here is the error that I am getting:
main.bundle.js:66421 Unhandled Promise rejection: Template parse errors:
'ob-day-picker' is not a known element:
1. If 'ob-day-picker' is an Angular component, then verify that it is part of this module.
2. If 'ob-day-picker' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ob-day-picker [(ngModel)]="date"></ob-day-picker>
I checked that the component name is really ob-day-picker.
I have also consoled log both the module and the ObDayPickerComponent imports and it seems that the imports are correct.
What did I miss?
Checkout the module repo:
https://bitbucket.org/vlio20/ng2-date-picker
The project can be found here:
https://github.com/vlio20/3rd-ng2-module
If you want to use ObDayPickerComponent outside of ObDatePickerModule you have to export it like:
#NgModule({
declarations: [
AppComponent,
ObDayPickerComponent,
ObCalendarComponent
],
imports: [
BrowserModule,
FormsModule
],
exports: [ObDayPickerComponent], // this line
bootstrap: [AppComponent]
})
export class ObDatePickerModule {}
Related
I am moving from angular 1.5 to angular 2 for this project while setting up new app i came to this issue so i am adding this library to app.
https://www.npmjs.com/package/angular2-materialize but this one throws error this library is not compatible. I want to use angular materialize that supports angular 2. Any better source or how to implement using above library.
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
import { AppComponent } from './app.component';
import { StreamComponent } from './stream/stream.component';
import { StreamService } from './stream.service';
import { routing } from './app.routes';
import { MaterializeModule } from "angular2-materialize";
const ROUTES = [
{
path: '',
redirectTo: 'app',
pathMatch: 'full'
},
{
path: 'stream',
component: StreamComponent
}
];
#NgModule({
declarations: [
AppComponent,
StreamComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
MaterializeModule
],
providers: [StreamService],
bootstrap: [AppComponent]
})
export class AppModule { }
ERROR
angular-material.js:13 Uncaught TypeError: Cannot read property 'module' of undefined
at angular-material.js:13
at angular-material.js:14
at angular-material.js:36390
(anonymous) # angular-material.js:13
(anonymous) # angular-material.js:14
(anonymous) # angular-material.js:36390
index.js:4 Uncaught ZoneAwareError {__zone_symbol__error: Error: Couldn't find Materialize object on window. It is created by the materialize-css library. Ple…, …}
To import materialize you need to add import statement in your code
import { MaterializeModule } from "angular2-materialize";
and after declare it in imports
#NgModule({
imports: [
//...
MaterializeModule,
],
//...
})
I guess in your case problem with import, try to declare MaterializeModule before routing. If it does not help pls provide error message
I am running hybrid angular 1 app and angular 2 app. I have created a component ActivateAccount. While i am running this application.
I am getting console error while downgrading component. Cannot read property 'resolveComponentFactory' of undefined <activate-account class="ng-scope">
I do searched related to this error but i found nothing.
I am referring Using Angular Components from AngularJS Code
app.module.js
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UpgradeModule, downgradeComponent } from '#angular/upgrade/static';
import { HttpModule } from '#angular/http';
import { ActivateAccountComponent } from '/thinkshop/widgets2/thinkshopapplication/activateaccount/activateaccount.ts';
#NgModule({
imports: [
BrowserModule,
UpgradeModule ,
HttpModule
],
declarations: [
ActivateAccountComponent
],
entryComponents: [
ActivateAccountComponent
]
})
export class AppModule {
constructor(private upgrade: UpgradeModule) { }
ngDoBootstrap() {
var app= angular.module('IdeolveActivateAccount', ['ngMaterial', 'jlareau.bowser', 'validation.match', 'ngDialog', 'ngMessages']);
app.controller("ActivateAccountApp", loadActivateAccountApp);
angular.module('IdeolveActivateAccount').directive('activateAccount', downgradeComponent({ component: ActivateAccountComponent }));
app.component("ideolveformcomponent",{
bindings:{
showideolvelink: '<'
},
controller: 'ActivateAccountApp',
templateUrl: '/thinkshop/widgets2/thinkshopapplication/login/template/landingdisplay.html'
});
this.upgrade.bootstrap(document.body, ['IdeolveActivateAccount']);
}
}
activateaccount.ts
import { Component } from '#angular/core';
#Component({
selector: 'activate-account',
template: '<div class="ActivateAccountContainer marginlefttwentypx margintoptwentypx marginrighttwentypx marginbottomtwentypx heighthundredpercent"></div>'
})
export class ActivateAccountComponent {
constructor() {}
}
I think i am missing something. I have checked all my code against tutorial given into above link, But i am getting console error.
After a long discussion, the following steps helped:
app.module.ts
providers: [
{provide: 'CLIENT_ID', useValue: CLIENT_ID},
{provide: 'APP_NAME', useValue: APP_NAME},
{provide: 'AUTH_TOKEN', useValue: AUTH_TOKEN},
{provide: 'CAN_EDIT', useValue: CAN_EDIT},
//{provide: Http, useValue: Http}, <-- unneccesary, when import HttpModule
ActivateAccountService // <-- provide service in module, not component
]
activate-account.service.ts
Removing URLSearchParams from constructor, bacause it is not injectable object. Instead of this, you shoul use #angular/router module
I have an Angular 2 project with components that we bring on build into another project written in angular 1. The problem is the files are like 3rd party, we don't want any one to commit them only use them. The files are enter the "target" folder, but in App.Module.ts I can't set import to that folder. Any idea how to do that correctly?
What I don't understnad is how we can use componenet that written somewhere else if we must declare it in 'app.module.ts' files in order to use it in the project.
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { UpgradeModule } from '#angular/upgrade/static';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
/* HelloWorldComponent is a 3th party, its files are inside target folder,
so how to import it? */
/* import { HelloWorldComponent } from './app/hello-world.component';*/
#NgModule({
declarations: [
HelloWorldComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
UpgradeModule
],
exports: [
HelloWorldComponent
],
entryComponents: [
HelloWorldComponent
],
bootstrap: []
})
export class AppModule {
ngDoBootstrap() {}
}
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.body, ['myApp']);
;})
import * as _angular_ from 'angular';
declare global {
const angular: typeof _angular_;
}
import { downgradeComponent } from '#angular/upgrade/static';
angular.module('myApp')
.directive(
'helloWorld',
downgradeComponent({component: HelloWorldComponent}) as angular.IDirectiveFactory
);
I have my root module which looks like this:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { routing, appRoutingProviders } from './app.routing';
import { LoginModule } from './login/login.module';
import { UserModule } from './user/user.module';
import { NavbarModule } from './navbar/navbar.module';
import { AppComponent } from './app.component';
#NgModule({
imports: [ BrowserModule, routing, NavbarModule ],
declarations: [ AppComponent ],
providers: [ appRoutingProviders ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I am writing a navbar with various components that handle various parts of the navbar (Im just trying to be really granular, sort of like spotify's approach).
So in the end I will have lots of components that all add up to once navbar, so that felt like a pretty natural use of a module? So I created a navbar module:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { NavbarComponent } from './navbar.component';
#NgModule({
imports: [ ],
declarations: [ NavbarComponent ],
providers: [ ],
bootstrap: [ NavbarComponent ]
})
export class NavbarModule { }
for the sake of the example ill stick to one navbar component which looks like this
import { Component } from '#angular/core';
#Component({
selector: 'navbar',
templateUrl: './navbar.template.html'
})
export class NavbarComponent { }
the html template just contains standard bootstrap navbar code...
So as you can see I have imported the NavbarModule into the AppModule, which from my understanding of how modules work, should make the NavbarComponent available to all the components I define in the AppModule?
So when I use
in my html template for AppComponent it should render out the NavbarComponent stuff? Instead it just keeps an empty navbar tag?
Any ideas? Also if my understanding of how modules and their imports works is totally off, please could you link some material that could clarify this for me? I have read the angular docs and this is where I got my current understanding from.
Thanks
I found my problem. In the metadata of my navbar module, I was not exporting the navbar component, therefore it was not available to modules that imported it! Solution below
navbar.module
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { NavbarComponent } from './navbar.component';
#NgModule({
imports: [ ],
declarations: [ NavbarComponent ],
providers: [ ],
exports: [ NavbarComponent ],
bootstrap: [ NavbarComponent ]
})
export class NavbarModule { }
I'm having some troubles integrating the ng2-translate in angular 2 RC5 for other components different than the main app.
I want to use the pipe globally, and in a research i found that probably i need to use a "provider" (but that is on RC4), and then found that i need to use the "declarations". Any ideas?
As always... thanks so much for the help!
When i use in a template file, the:
{{ 'HOME.TITLE' | translate }}
I get this error on the browser:
The pipe 'translate' could not be found ("<h1>title test</h1>
<h2>[ERROR ->]{{ 'HOME.TITLE' | translate }}</h2>
This is my main.ts file:
// The browser platform with a compiler
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
// The app module
import { AppModule } from './app.module';
// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);
The main module file:
import {TranslateModule, TranslateService} from "ng2-translate/ng2-translate";
#NgModule({
imports: [
BrowserModule,
HttpModule,
RouterModule.forRoot(routes),
AboutModule,
HomeModule,
SharedModule.forRoot(),
TranslateModule.forRoot()
],
declarations: [AppComponent],
providers: [{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
}],
bootstrap: [AppComponent]
})
export class AppModule { }
Use shared.module and export TranslatePipe.
shared.module.ts
// libs
// libs
import { NgModule, ModuleWithProviders } from '#angular/core';
import { CommonModule } from '#angular/common';
import { TranslateModule, TranslatePipe } from 'ng2-translate/ng2-translate';
#NgModule({
imports: [
CommonModule,
TranslateModule
],
declarations: [
],
exports: [
CommonModule,
TranslateModule,
TranslatePipe
]
})
export class SharedModule {
static forRoot(): ModuleWithProviders {
return {
ngModule: SharedModule
};
}
}
ng2-translate updated just after the release of RC5. You no longer need to do anything to use the translatePipe globally, it is included in the TranslateModule.
Are you initializing TranslateService as in the documentation?
constructor(translate: TranslateService) {
// this language will be used as a fallback when a translation isn't found in the current language
translate.setDefaultLang('en');
// the lang to use, if the lang isn't available, it will use the current loader to get them
translate.use('en');
}
Hope this helps!!