I have an Angular 9 application where i am trying to import module which does not exists at the load time, it will appear later.
import('s1').then( m => {
});
Here s1 is a module which is not inside angular application, but it will be loaded from external resource by lazy loading for example.
for that, i created decl.d.ts file inside src folder and told to typescript that it is friendly module and do not throw error:
declare module "s1";
Here is my tsconfig.json and tsconfig.app.json
1.
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@services/*": ["./src/app/services/*", "./src/app/modules/form/services/*"],
"@typings/*": ["./src/app/typings/*"],
"@app/*": ["./src/app/*"],
"@env/*": ["./src/environments/*"]
},
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
}
}
{ "extends": "./tsconfig.json", "compilerOptions": { "outDir": "./dist", "types": ["node"] }, "exclude": [ "src/test.ts", "/.spec.ts" ], "include": [ "src//.d.ts" ], "angularCompilerOptions": { "enableIvy": false } }
and here is my webpack.config.dev.js
const AotPlugin = require("@ngtools/webpack").AngularCompilerPlugin;
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { resolve } = require('path');
const path = require('path');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
devtool: 'eval-cheap-source-map',
mode: "development",
entry: ["./src/polyfills.ts", "./src/main.ts"],
node: false,
output: {
path: resolve('./dist'),
publicPath: '/',
filename: '[name].bundle.js',
chunkFilename: '[id].chunk.js'
},
devServer: {
https: true,
host: 'dev.adjarabet.com',
port: 443,
historyApiFallback: true,
disableHostCheck: true,
watchOptions: {
ignored: /node_modules/
},
inline: true,
open: true,
hot: true,
//quiet: true
//stats: 'minimal'
stats: {
colors: true,
chunks: false,
hash: true,
version: true,
timings: true,
assets: false,
children: false,
source: true,
warnings: true,
noInfo: true,
contentBase: './dist',
hot: true,
modules: false,
errors: true,
reasons: true,
errorDetails: true,
},
},
resolve: {
extensions: ['.ts', '.js'],
plugins: [new TsconfigPathsPlugin(
{
configFile: path.resolve("./tsconfig.app.json")
})
]
},
performance: {
hints: false,
},
module: {
rules: [
{
test: /\.ts$/,
use: ['ts-loader', 'angular2-template-loader'],
exclude: path.resolve(__dirname, "node_modules")
},
{
test: /\.html$/,
use: 'html-loader'
},
{
test: /\.scss$/,
use: ['to-string-loader', 'css-loader', 'sass-loader']
},
{
test: /\.(eot|svg|cur|ico)$/,
loader: 'file-loader',
options: {
name: `[name].[ext]`,
limit: 10000
}
},
]
},
plugins: [
new ModuleFederationPlugin({
name: 'shell_app',
library: { type: 'var', name: 'shell_app' },
filename: 'remoteEntry.js',
remotes: {
s1: 's1'
},
exposes: {
},
shared: []
}),
new HtmlWebpackPlugin({
template: "./src/index.html"
}),
new ProgressPlugin({
activeModules: false,
}),
]
};
But when i run npm run srv ( "srv": "webpack-dev-server --config webpack.config.dev.js " ) I get following error:
ERROR in ./src/app/app.component.ts 78:8-20
Module not found: Error: Can't resolve 's1' in '/home/alecoder/Projects/JS/workable_shell/src/app'
resolve 's1' in '/home/alecoder/Projects/JS/workable_shell/src/app'
Parsed request is a module
using description file: /home/alecoder/Projects/JS/workable_shell/package.json (relative path: ./src/app)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
/home/alecoder/Projects/JS/workable_shell/src/app/node_modules doesn't exist or is not a directory
/home/alecoder/Projects/JS/workable_shell/src/node_modules doesn't exist or is not a directory
looking for modules in /home/alecoder/Projects/JS/workable_shell/node_modules
single file module
using description file: /home/alecoder/Projects/JS/workable_shell/package.json (relative path: ./node_modules/s1)
no extension
Field 'browser' doesn't contain a valid alias configuration
/home/alecoder/Projects/JS/workable_shell/node_modules/s1 doesn't exist
.ts
Field 'browser' doesn't contain a valid alias configuration
/home/alecoder/Projects/JS/workable_shell/node_modules/s1.ts doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/home/alecoder/Projects/JS/workable_shell/node_modules/s1.js doesn't exist
/home/alecoder/Projects/JS/workable_shell/node_modules/s1 doesn't exist
/home/alecoder/Projects/JS/node_modules doesn't exist or is not a directory
/home/alecoder/Projects/node_modules doesn't exist or is not a directory
/home/alecoder/node_modules doesn't exist or is not a directory
/home/node_modules doesn't exist or is not a directory
/node_modules doesn't exist or is not a directory
@ ./src/app/app.module.ts 16:0-47 63:22-34 80:16-28 87:24-36
@ ./src/main.ts 5:0-45 9:41-50
It seems it can't resolve include with d.ts files. I do not understand why.
