hy guys i have problem like this,
i have a app.typescript
and inside it i import
import { Component } from '#angular/core';
import {CORE_DIRECTIVES} from '#angular/common';
import { MODAL_DIRECTVES } from 'ng2-bootstrap';
#Component({
moduleId: module.id,
selector: 'my-app',
templateUrl: 'my-app.component.html',
styleUrls: ['my-app.component.css'],
directives: [MODAL_DIRECTVES]
})
export class my-appComponent {
title = 'Mp App';
}
but when i run it i got an error that say cant find module ng2-bootstrap
As per the documentation here. It appears you must import from a nested path:
import { MODAL_DIRECTIVES } from 'ng2-bootstrap/ng2-bootstrap';
or
import { MODAL_DIRECTIVES } from 'ng2-bootstrap/components/modal';
Related
I import MongooseModule and use it according the documentation of NestJS and when I compile the server locally I get this error node_modules/mongoose/index.d.ts:1883:33 - error TS2339: Property 'Buffer' does not exist on type 'typeof globalThis'. I installed #types/node but I don't know what to do from here.
app.module.ts
import { Module } from '#nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ClientsModule } from './clients/clients.module';
import { MongooseModule } from '#nestjs/mongoose';
#Module({
imports: [ClientsModule, MongooseModule.forRoot(`mongodb+srv://xxx:xxx#cluster0.ikjjp.mongodb.net/yyyyyyyy?retryWrites=true&w=majority`)],
controllers: [AppController],
providers: [AppService],
})
export class AppModule {}
Explicitly add '#types/node' by installing types. Should be fixed in mongoose, but works as of now.
npm i --save-dev #types/node#^14.0.0
I solved my problem by running npm i #types/node#15.14.1. After that, I could run the server. For anyone having this issue in a near future, try both solutions from Karunakaran and mine.
First question
Goal
I'm trying to add SSR to my Angular project with ng add #nguniversal/express-engine --clientProject [name] (so I can dynamically prerender meta tags)
Expected Result
I expected the command to execute successfully with all the scaffolding and necessary updates to my existing files, as demonstrated in this YouTube tutorial.
Actual Result
Instead, the console says this:
Installing packages for tooling via npm.
Installed packages for tooling via npm.
Cannot find BrowserModule import in /src/app/app.module.ts
But BrowserModule is imported in app.module.ts.
What I've Tried
Reinstalling package
I've tried uninstalling the package with npm uninstall #nguniversal/express-engineand re-running the ng add above, same issue.
Other posted questions about ng adding #nguniversal/express-server don't seem to apply here, as those guys actually got as far as creating some of the scaffolding and generating the new files - no files are created for me at all, but the module does get added to my node-modules folder.
Could it be an issue with simply reading the typescript in app.module.ts? The BrowserModule import is there, and in the imports array. This is the output for npm ls typescript:
+-- #angular-devkit/build-angular#0.901.8
| `-- #angular-devkit/build-optimizer#0.901.8
| `-- typescript#3.6.5
+-- #ng-toolkit/universal#1.1.21
| +-- #ng-toolkit/_utils#1.1.51
| | `-- #schematics/angular#7.3.10
| | `-- typescript#3.2.4
| `-- #schematics/angular#0.6.8
| `-- typescript#2.7.2
`-- typescript#3.8.3
Additional Info (for David)
app.module.ts
import { BrowserModule, Meta, Title } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { FooterComponent } from './footer/footer.component';
import { HomeComponent } from './home/home.component';
import { FontAwesomeModule } from '#fortawesome/angular-fontawesome';
import { SoftwareComponent } from './software/software.component';
import { MediaComponent } from './media/media.component';
import { ShopComponent } from './shop/shop.component';
import { FilmDetailsComponent } from './film-details/film-details.component';
import { ShareModalComponent } from './share-modal/share-modal.component';
import { ShareModule } from 'ngx-sharebuttons';
import { ShareButtonModule } from 'ngx-sharebuttons/button';
import { ShareIconsModule } from 'ngx-sharebuttons/icons';
#NgModule({
imports: [
ShareButtonModule,
ShareIconsModule // Optional if you want the default share icons
]
})
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
HomeComponent,
SoftwareComponent,
MediaComponent,
ShopComponent,
FilmDetailsComponent,
ShareModalComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FontAwesomeModule,
ShareModule,
ShareButtonModule,
ShareIconsModule
],
providers: [Meta, Title],
bootstrap: [AppComponent]
})
export class AppModule { }
main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
This error is caused by multiple NgModules in the app.module, as the first NgModule imports doesn't contain BrowserModule.
app would still work fine if you remove first NgModule since the modules in the imports are already imported in the second one
I have thoroughly followed the instructions in the following guides:
Get Started with ag-Grid in Your Angular Project
Angular Webpack 3
My app.module.ts includes:
import { AgGridModule } from 'ag-grid-angular';
...
#NgModule({
imports: [
...,
AgGridModule.withComponents([])
]
})
In vendor.css
#import "~ag-grid-community/dist/styles/ag-grid.css";
#import "~ag-grid-community/dist/styles/ag-theme-balham.css";
In the home.component.ts:
import { Component, OnInit } from '#angular/core';
import {GridOptions} from 'ag-grid-community';
#Component({
selector: 'jhi-home',
templateUrl: './home.component.html',
styleUrls: ['home.css']
})
export class HomeComponent implements OnInit {
private gridOptions: GridOptions;
public rowData: any[];
private columnDefs: any[];
constructor(
private accountService: AccountService,
private loginModalService: LoginModalService,
private eventManager: JhiEventManager
) {
this.gridOptions = <GridOptions>{
onGridReady: () => {
this.gridOptions.api.sizeColumnsToFit();
}
};
this.columnDefs = [
{headerName: 'Make', field: 'make'},
{headerName: 'Model', field: 'model'},
{headerName: 'Price', field: 'price'}
];
this.rowData = [
{make: 'Toyota', model: 'Celica', price: 35000},
{make: 'Ford', model: 'Mondeo', price: 32000},
{make: 'Porsche', model: 'Boxter', price: 72000}
];
}
ngOnInit() {
}
}
Eventually in the template I added the component:
<ag-grid-angular #agGrid style="width: 500px; height: 300px;"
[gridOptions]="gridOptions"
[columnDefs]="columnDefs"
[rowData]="rowData">
</ag-grid-angular>
Although there are no errors at build, the grid will not render. That is the way my HTML looks after compilation:
I presume there may be an incompatibility between Angular 7/Webpack 4/the way Jhipster loads the app and ag-grid-angular.
Would you suggest any solution? Thank you!
You should import the AgGridModule on each one of your 'entities' apps modules, not on your main apps.module.ts.
I'm sorry for my bad english.
my fault is that when I want to seo the joints in the module.browser class bootstrap does not appear
app.browser.module.ts;
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
#NgModule({
bootstrap: [
AppComponent
],
imports:[
BrowserModule.withServerTransition({appId: 'app-root'}),
AppModule,
]
})
export class AppBrowserModule {}
my bad eror
D:\çalışmalar\code\myWebSite>ng add #ng-toolkit/universal
Installing packages for tooling via npm.
INFO: Project property is set to 'myWebSite'.
ERROR: Bootstrap not found in ./src/.././src/app/app.browser.module.ts.
ERROR: If you think that this error shouldn't occur, please fill up bug report here: https://github.com/maciejtreder/ng-toolkit/issues/new
INFO: stacktrace has been sent to tracking system.
Nothing to be done.
help me please
After running once ng add #ng-toolkit/universal we got our initial files generated and retrieved this error.
For me this solution worked:
Delete app.browser.module.ts
In main.ts you need to insert AppModule (instead of AppBrowserModule) in the .bootstrapModule() function.
Now your main.ts looks like this:
import { AppBrowserModule } from '.././src/app/app.browser.module';
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
document.addEventListener('DOMContentLoaded', () => {
platformBrowserDynamic()
.bootstrapModule(AppModule)
.catch(err => console.log(err));
});
Add bootstrap: [AppComponent] to your app.module.ts #NgModule configuration
Run ng add #ng-toolkit/universal
This will run through successfully but ng-toolkit will leave an invalid line in app.module.ts .withServerTransition({appId:''}), which you can simply delete. Afterwards you can run ng run build:prod and deploy.
If this retrieved an error check if bootstrap: [AppComponent] exists in your app.module.ts and run ng run build:prod again.
You should check where you included Bootstrap.
ERROR: Bootstrap not found in ./src/.././src/app/app.browser.module.ts.
This error points that, it can not find the right path.
i'm new on angular and typescript, and i'm struggling for import the #types/three npm package, i just create a fresh angular project and i try to import and use the three package but i keep getting this error
Module not found: Error: Can't resolve 'three' in 'E:\wamp64\www\pro-website-angular5\src\app'
i must be doing some newby mistake but i can't figure out, and this is my code
import { Component } from '#angular/core';
import * as THREE from 'three';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
title = new THREE.Vector3(1,1,1);
}
Firstly install the required packages.
yarn add three #types/three
Then just import Vector3 from "three"
import { Component } from '#angular/core';
import { Vector3 } from "three";
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent{
title = new Vector3(1,1,1);
}