I am new to angular and construction my first angular front end to use an OAS generated angular-typescript package. The OAS is also generated from code and then used to generate the angular-typescript package (angular version 8.2.14). Then I just created a new angular project with "ng new ..." and installed the before generated package with "npm install local/dir --save". Then I imported the module in the app.module.ts with "import { ApiModule } from "package name". So far it works (but also nothing happens).
When I import he ApiModule in the #NgModule angular just stops working, no error, no debug. I tried using demo apis from HowTos, these to import without problems. So I guess that there is a problem with the generated package, everything I tried and change in the last weeks didn't help.
Maybe you have some ideas where I can start debugging. Thank you.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from "../environments/environment";
import { HttpClientModule } from "#angular/common/http";
import { ApiModule, BASE_PATH} from "#angular-schule/book-monkey-api"; // Works
// import { ApiModule, BASE_PATH} from "#jakoberpf/congstats-typescript-angular-api"; // Does not work
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ApiModule,
],
providers: [{ provide: BASE_PATH, useValue: environment.CONGSTATS_BASE_PATH }],
bootstrap: [AppComponent]
})
export class AppModule { }
Found the issue. When importing an using an open api or swagger generated package you have to not only import the HttpClientModule ( see angular issue 20575 ) but also provide it in the providers of the app module.
ISSUE FIXED
Related
I am currently transforming an old Angular app to a new version (Angular 10) and there is a file in app folder called app.server.module.ts. However, asa far as I see, it seemsto be related to old versions (maybe AngularJS), but I am not sure how to remove this file (which changes should I made in app.module.ts, app.routing.module.ts, etc. Here is that file below:
app.server.module.ts
import { NgModule } from '#angular/core';
import { ServerModule } from '#angular/platform-server';
import { ModuleMapLoaderModule } from '#nguniversal/module-map-ngfactory-loader';
import { AppComponent } from './app.component';
import { AppModule } from './app.module';
#NgModule({
imports: [AppModule, ServerModule, ModuleMapLoaderModule],
bootstrap: [AppComponent]
})
export class AppServerModule { }
Will it be a problem to remove completely?
Update:
Here is the only file using this module in the entire frontend project:
tsconfig.server.json.ts:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"target": "es2016"
},
"angularCompilerOptions": {
"entryModule": "app/app.server.module#AppServerModule"
}
,
"files": [
"main.ts"
],
"include": [
"src/**/*.d.ts"
]
}
It's not related to AngularJS but to Angular.
If you want to remove this file (without knowing the whole context of your application), you would at least need to make two changes :
Add the bootstrap metadata into another module (AppModule ?) as it defines the root component of your app being bootstrapped from your index.html
bootstrap: [AppComponent]
Check your main.ts file as it might be the module used to bootstrap your application :
platformBrowserDynamic()
.bootstrapModule(AppServerModule)
.catch((err) => console.error(err));
If removing this module in benefit of your AppModule, you would as well need to add the imports ServerModule and ModuleMapLoaderModule into its medatdata.
I built a project using angular-elements and managed to successfully embed a component into another application. What I would like to do now is be able to debug the original component from the application it is included in.
All the logic for the component is in one file, which is a concatenation of 4 files created by Angular during build - runtime.js, polyfills.js, scripts.js, main.js.
The js.map files for those 4 files are also created during build and I can successfully place & hit a breakpoint in the original main.ts file (after including the jsmaps in the directory with the output file for the element). However, I have been unable to find a way to debug the actual component.ts file from the application that is using it. The js.map for that component is also included in the bundle and I can view the component.ts file through Chrome DevTools, but if I put any breakpoints they will never be hit.
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule, Injector } from '#angular/core';
import { createCustomElement } from '#angular/elements';
import { FormsModule } from "#angular/forms";
import { FirstWebElementComponent } from './first-web-element/first-web-element.component';
import { AppComponent } from './app.component';
import { HttpModule } from '#angular/http';
import { HttpClientModule } from '#angular/common/http';
import { ScenarioSelectorComponent } from './scenario-selector/scenario-selector.component';
#NgModule({
declarations: [
AppComponent,
ScenarioSelectorComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
HttpClientModule
],
providers: [],
entryComponents: [ScenarioSelectorComponent]
})
export class AppModule {
constructor(private injector: Injector) {}
ngDoBootstrap() {
const scenarioSelector = createCustomElement(ScenarioSelectorComponent, {injector: this.injector});
customElements.define('scenario-selector', scenarioSelector);
}
}
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);
To the best of my understanding, the component.ts file logic is included in main.js file during build, but there doesn't seem to be a map created describing
the connection between the two.
For reference, here is the stuff I read / watched.
Building Custom Elements / Web Components with Angular 6
Angular Elements – A Practical Introduction To Web Components With Angular 6
Angular CLI doesn't support inline source maps anymore. Your best bet is to replace ng build with ngx build plus - https://github.com/manfredsteyer/ngx-build-plus
Then add a build plugin to replace the devtool with inline-source-map which will inline the sourcemaps into your bundle file enabling you to debug.
See: https://stackoverflow.com/a/54548171/1829251
I am a newbie in Angular4
I want to integrate CKeditor in Angular4
As i follow this url but it's for Angular 2 not working in Angular 4.
As i have check there
System.config({
"map": {
"ng2-ckeditor": "npm:ng2-ckeditor",
},
"packages": {
"ng2-ckeditor": {
"main": "lib/index.js",
"defaultExtension": "js",
},
}
});
but there is no any option for System.config in Angular 4
Then i have integrated froala but it gives licence error and also not allow to configure and i tried but it's not effecting
How can i integrate CKeditor in Angular4?
I assume you use angular-cli to create your angular 4 project , you dont need system.config in angular-clli, that only used in system.js, and the code you have there is telling system.js where to find the ckeditor module.
in case you not clear, just check whether your project have an 'angular-cli.json' file, if there is, then you can follow the below steps:
use npm install ng2-ckeditor to install the ng2-ckeditor
in your app.module.ts, you should have something like this
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { CKEditorModule } from 'ng2-ckeditor';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
CKEditorModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
and then
in your index.html add
<script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>
inside head section. alternatively, you can save the js file inside your project, then insde .angular-cli.json file, add the file of that file into scripts array
then you are good to use ckeditor in your angular 4 project
I am trying to use the List module from immutable.js on a new Angular 2 project. When I do that, the browser tries to GET http://localhost:3000/immutable and fails with a 404 Not Found error.
Here is what I did:
I cloned the Angular 2 quickstart
repo from Github (https://github.com/angular/quickstart)
I ran npm install and npm install -D immutable
I then modified app.module.ts as follows:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { List } from 'immutable';
#NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {
constructor() {
let list = List.of(1,2,3);
}
}
When I npm start the project, I get the 404 error.
Am I missing something obvious?
After more googling, I found that the answer was pretty easy. I just needed to add a new element to the map in systemjs.config.js:
// other libraries
[...]
'immutable': 'node_modules/immutable/dist/immutable.js'
I'm ramping up on Angular 2 and have created my project using Angular 2 CLI's
ng new <my project name>
However, I noticed that this project doesn't include an app.module.ts file by default.
When I try creating my own file and setting it up with my default settings
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
#NgModule({
imports: [
BrowserModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
I get a build error saying
... #angular/core has no exported member 'NgModule'.
Any ideas on how to get the module file to work with Angular CLI?
Thanks
May be due to reasons please make sure
please update all your #angular dependencies in package.json to at least "2.0.0-rc.5"
check this property in tsconfig.json file
moduleResolution": "node", // <-----
like here https://stackoverflow.com/a/38900745/5043867