A few days back I switched to Angular 7 and not able to locate declarations.d.ts.
In Angular 2 and 4, I used declarations.d.ts to define the typing for JQUERY and others -
interface JQuery {
datepicker(options: any): JQuery;
modal(options: any): JQuery;
}
Where to define unknown element interface in Angular 7 ?
Note: I used Angular CLI to generate the project.
Use typings.d.ts in /src folder.
More info here: TypeScript Configuration
UPDATE
Better way of achieving your goal is to use jQuery's typings.
Be sure to add:
"typeRoots": [
"node_modules/#types"
],
to your tsconfig.json so typescript knows where to search for types.
Most famous libraries will have their typings package out there, so first try to get it from npm, if not found than you always can define them in typings.d.ts
Related
After upgrading from Vaadin 14.5 to 14.6 I'm facing problems with CSS that contains URL's that point to content.
For example, the following CSS no longer works:
:host([part="my-part"]) [part="reveal-button"]::before {
content: url("../images/my-image.svg");
}
It fails to "compile" when running the build-frontend goal of the Vaadin Maven plugin with the following error:
ERROR in ../node_modules/#vaadin/flow-frontend/styles/components/my-component.css
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '../images/my-image.svg' in '<Project Path>\node_modules\#vaadin\flow-frontend\styles\components'
The same error appears in the browser if I try to run the project. This CSS has worked fine in all previous versions of Vaadin 14.
Has anyone encountered anything similar, or have any ideas as to what has changed that might cause this?
With the new custom theme feature the .css loader has changed from raw-loader to css-loader but it shouldn't touch urls outside of frontend/themes/[theme-name] or node_modules
Is the styles/components/my-component.css located in src/main/resources/META-INF/frontend, src/main/resources/META-INF/resources/frontend or src/main/resources/META-INF/resources to be packaged as an add-on jar or compatibility mode?
As in that case the css would end up inside node_modules which might make a difference to the resolving.
As a workaround if you are not building an add-on you should be able to move the css and image to {project_root}/frontend and it should build fine.
Until release of 14.6.2 you can add the raw-loader dependency to a java class with
#NpmPackage(value = "raw-loader", version = "3.1.0")
and then add to webpack.config.js the lines
if(flowDefaults.module.rules[2].test.toString().includes('.css')) {
flowDefaults.module.rules[2].use = [ {loader: 'raw-loader' }];
} else if(flowDefaults.module.rules[1].test.toString().includes('.css')) {
flowDefaults.module.rules[1].use = [ {loader: 'raw-loader' }];
}
Did you change the css structure to follow the new theme structure introduced in 14.6? It is not needed, but it is important context. I think it is at least related to your issue.
The path seems a little weird in your error messages, ending up in a node_modules folder. Could you share where this file is in, and what loads the file to your project?
With the new theme structure, I've used the following css to import images in css:
background: url('./images/fire.png');
And that was placed in a file: frontend/themes/mythemename/mythemefile.css
I am going to develop a very large application using Angular 7 Framework.
I have created a blank angular workspace using
ng new angular-app --create-application=false
And in this workspace I have two angular applications created using the following commands:
ng generate application app-one
ng generate application app-two
Inside each of the two applications, I am going to have multiple components each working independently of each other.
I am looking for a way to create a separate javascript build file for each of the component so as to reduce the build size.
And use each of the separately build js files to use each component as a web component.
Please read what I have already tried to get a better idea.
I have tried the following steps:
Create a repository with prefix custom for custom angular elements:
ng new app-name --prefix custom
Add the angular elements package:
ng add #angular/elements
Create custom element component with encapsulation as native/emulated/none as required:
ng g component my-component --inline-style --inline-template -v Native
Define the custom element in app.modulte.ts
import { Injector} from '#angular/core';
import { createCustomElement } from '#angular/elements';
...
export class AppModule {
constructor(private injector : Injector){
const el = createCustomElement(MyComponent, {injector : this.injector});
customElements.define('my-component',el);
}
ngDoBootstrap(){ }
}
Install ngx-build-plus package for building a single bundle (e. g. for Angular Elements):
npm i ngx-build-plus
Update application's builder section within the angular.json file so that it points to ngx-build-plus:
"builder": "ngx-build-plus:build",
Add script in package.json to run builder:
"build:ngx": "ng build --prod --output-hashing none --single-bundle true"
If required, Combine scripts.js and main.js in the created dist folder by creating a js file "concat_ngx.js":
const fs = require('fs-extra');
const concat = require('concat');
(async function build() {
const files = [
'./dist/<your_project>/scripts.js',
'./dist/<your_project>/main.js',
]
await fs.ensureDir('elements_ngx')
await concat(files, 'elements_ngx/combined-script.js');
})()
Run file to get single js file:
node concat_ngx.js
Use js file in any Angular/Other project to use the custom component created.
But the problem here is I have to change the component bootstrap every time in app-module.ts
I needed an automated way to change the bootstrapping in app-module.ts at runtime.
But the problem here is I have to change the component bootstrap every time in app-module.ts
I needed an automated way to change the bootstrapping in app-module.ts at runtime.
In Angular 7, Add Default or Automatic bootstrapping :-
It is the default way an angular application bootstraps and main.ts holds the starting point of an application.
platformBrowserDynamic().bootstrapModule(AppModule);
For more information see here: -https://medium.com/learnwithrahul/ways-of-bootstrapping-angular-applications-d379f594f604
ng serve -o app-one
or
ng serve -o app-two
For more information see here https://medium.com/#klauskpm/change-the-default-angular-project-27da8fca8721
I am putting an angular portion into my MVC app. As such, I have added a tag to my layout view to find the Angular source code, and this is working great.
My issue arises in trying to add a 3rd party module to my project. I added it through the package.json with no problem, and added the module to my app.module.ts as follows:
import { FileUploadModule } from 'primeng/fileupload';
The reference is found, Visual Studio is happy, everything is fine. However, when I run the project locally, I get the following 404 error:
GET http://localhost:59911/src/primeng/fileupload 404 (Not Found)
It seems to me likely that the tag is causing the issue, but I can't remove it without killing the rest of the Angular functionality. Any hints? Can I add an override to the imports call?
Thanks, Mike
On PrimeNG's official website they suggested using import { FileUploadModule } from 'primeng/fileupload'; but it doesn't work any more. I guess they didn't update the docs.
You need { FileUploadModule } from 'primeng/primeng';
The structure is
In the primeng.d.ts file PrimeNG re-exported all modules.
export * from './components/fileupload/fileupload';
For now, no matter which PrimeNG module is used, it is all from primeng/primeng. Here's the imported modules in my project:
import {
ButtonModule,
CodeHighlighterModule,
ConfirmDialogModule,
FieldsetModule,
FileUploadModule,
GrowlModule,
MessagesModule
} from 'primeng/primeng';
The version I use is "primeng": "^4.2.1"
The issue was that primeng was not in the mapping, so it was looking for it in src.
I added the following to systemjs.config.js:
in maps:
'primeng': 'npm:primeng',
in packages:
primeng: {
defaultExtension: 'js'
}
Thanks for the help everyone!
I understand how to import one dart-polymer package into another package and use a component from the imported package.
There seems to be a difference in angular2-dart.
I created an angular2-dart component in package A and import it into package B.
The specific component I want to use is NameComponent.
In polymer I would simply do the following to used the imported component's markup
<name-component></name-component>
Doing something similar does not work in angular2-dart.
I have not been able to find information on importing a component from one dart package into another for angular2-dart.
A graphical summary of what I am trying to do is shown below - package B. The name-component is from package A.
Does anyone know how this is done?
EDIT 1
After making the suggested corrections I receive the following
"P:\Program Files\Dart\dev\dart-sdk\bin\pub.bat" serve web --port=57435
Loading source assets...
Loading angular2 and dart_to_js_script_rewriter transformers...
Serving epimss_ng2_app web on http://localhost:57435
[DirectiveProcessor on epimss_ng2_reg|lib/components.dart]:
ERROR: Invalid argument (url): "Could not read asset at uri asset:epimss_ng2_reg/lib/name_component.html"
[Warning from TemplateCompiler on epimss_ng2_app|lib/app_component.ng_meta.json]:
Could not find Directive entry for name: NameComponent
. Please be aware that Dart transformers have limited support for reusable, pre-defined lists of Directives (aka "directive aliases"). See https://goo.gl/d8XPt0 for details.
Build completed with 1 errors.
[web] GET Served 13 assets.
[web] GET packages/epimss_ng2_reg/components.dart => Could not find asset epimss_ng2_reg|lib/components.dart.
[web] GET Served 17 assets.
I am going to place the components directory directly on lib and see if it makes a difference.
My package is actually packages/epimss_ng2_reg/src/components.dart.
I can only think of 2 things you might be missing.
You need to add the component to directives
#Component(..., directives: const [NameComponent]) af the parent component.
You need to add the Angular2 transformer in pubspec.yaml of the component
transformers:
angular2
Running into an weird issue when I use Angular 2.0 Dart. Basically I'm trying to use Router and using pub serve to transform it to JS using the angular transformer. However I get the following error
Cannot find reflection information on RouteRegistry
at dart.wrapException (http://localhost:8080/main.dart.js:2834:17)
at NoReflectionCapabilities.dart.NoReflectionCapabilities.factory$1 (http://localhost:8080/main.dart.js:31991:17)
at Reflector.dart.Reflector.factory$1 (http://localhost:8080/main.dart.js:15565:46)
at Binding.dart.Binding.resolve$0 (http://localhost:8080/main.dart.js:13499:41)
at dart.resolveBindings (http://localhost:8080/main.dart.js:13766:90)
at dart.Injector.static.Injector_resolve (http://localhost:8080/main.dart.js:13898:63)
at bootstrap_closure.dart.bootstrap_closure.call$0 (http://localhost:8080/main.dart.js:9374:37)
at dart._rootRun (http://localhost:8080/main.dart.js:20637:16)
at _ZoneDelegate.dart._ZoneDelegate.run$2 (http://localhost:8080/main.dart.js:22730:41)
at NgZone.dart.NgZone._run$4 (http://localhost:8080/main.dart.js:5098:24)
But removing the transformer
- angular2:
entry_points: web/main.dart
I can see my app and navigate through the routes properly, however the downside is that my Dart2JS file is now 2.8megs
Currently as of Alpha 28, this is not supported. Alpha 30 will have this fixed.
https://github.com/angular/angular/issues/1950
You could add "mirror_mode: verbose" to the angular2 transformer.
Does RouteRegistry come from a different package? If so make sure the angular transformer has also been added to that package (it doesn't have to specify any entry points). The new angular transformer works a lot differently than the old one and it is required on all packages, not just the application package.