Hello Vaaadin Community, I am trying to integrate angular web component with Vaadin 14 project. I added my npm dependency to package.json and after npm install my project is available from node_modules. I also installed ts-loader and added my own web pack configuration to resolve typescript files but when i start my project i get ERROR in …/target/frontend/generated-flow-imports.js. Frontend compilation phase is looking for my project in frontend folder not in node_modules. Is that a problem with my java DesignerComponent class annotations? Or is it something wrong in configuration of web pack?
Webpack configuration:
const merge = require('webpack-merge');
const flowDefaults = require('./webpack.generated.js');
module.exports = merge(flowDefaults, {
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.ts$/,
use: ['ts-loader']
}
]
}
});
I’ve created my Java class like this
package com.finastra.ffc.ui.components.designer.editor;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
@Tag("ffc-designer")
@NpmPackage(value = "designer", version = "1.0.1-snapshot")
@JsModule("designer")
public class DesignerComponent {
}
When i run my project i get web pack error
------------------ Starting Frontend compilation. ------------------
2020-08-03 13:37:26.529 INFO 4224 --- [ main]
dev-webpack : Running webpack to compile frontend resources. This may take a moment, please stand by...
2020-08-03 13:37:33.669 ERROR 4224 --- [ webpack]
dev-webpack : ERROR in ../target/frontend/generated-flow-imports.js
2020-08-03 13:37:33.669 ERROR 4224 --- [ webpack]
dev-webpack : Module not found: Error: Can't resolve 'designer' in 'C:\Project\target\frontend'
2020-08-03 13:37:33.669 ERROR 4224 --- [ webpack]
dev-webpack : @ ../target/frontend/generated-flow-imports.js 198:0-18
2020-08-03 13:37:33.669 INFO 4224 --- [ main]
dev-webpack : Started webpack-dev-server. Time: 271786058ms
generated-flow-imports.js file fragment:
[Link to image]
(http://pasteboard.co/JkEl2LY.png)
Designer - angular web component in node_modules folder
[Link to image]
(https://pasteboard.co/JkEm2Gg.png)
