I'm trying to rollup an Angular 2 app but I have:
Could not resolve 'app/components/xxx/xxxxx.component' from xxxx\\wwwroot\\angular\\app\\app.module.js
The app.module have a reference to xxxxx.component
like this:
import { xxxxx } from 'app/components/xxx/xxxxx.component'
so the tsconfig.js has:
"compilerOptions": {
...
"paths": {
"app/*": [ "./app/*" ],
...
},
"outDir": "wwwroot",
...
},
How can I resolve path aliases like typescript in rollup?
I tried with
1) https://github.com/frostney/rollup-plugin-alias
rollup-config.js:
export default {
entry: 'wwwroot/angular/app/main-aot.js',
dest: 'wwwroot/dist/build.js',
sourceMap: false,
format: 'iife',
plugins: [
nodeResolve({jsnext: true, module: true}),
commonjs({
include: 'node_modules/rxjs/**',
}),
alias({
'app': '.' // asuming "wwwroot/angular/app/" is the working dir
}),
uglify()
]
}
2) https://github.com/dot-build/rollup-plugin-includepaths
rollup-config.js:
let includePathOptions = {
include: {},
paths: ['../'], // asuming "wwwroot/angular/app/" is the working dir
external: [],
extensions: ['.js']
};
export default {
entry: 'wwwroot/angular/app/main-aot.js',
dest: 'wwwroot/dist/build.js',
sourceMap: false,
format: 'iife',
plugins: [
nodeResolve({jsnext: true, module: true}),
commonjs({
include: 'node_modules/rxjs/**',
}),
includePaths(includePathOptions),
uglify()
]
}
But none of those works. Any idea? Thanks in advance!!!
I am using Angular 4 in an ASP.NET MVC environment and ran into the same problem when using "paths" in my tsconfig.json
file.
I also tried using rollup-plugin-alias
, rollup-plugin-paths
, and rollup-plugin-typescript
. None of those worked. However, I found that rollup-plugin-import-alias
worked for me.
My AOT tsconfig.json
file:
{
"compilerOptions": {
// ...
"baseUrl": "./",
"paths": {
"myCommon/*": ["./tmp/myCommonFolder/*"]
}
// ...
}
}
My rollup-config.js
file:
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import importAlias from 'rollup-plugin-import-alias';
export default {
// ...
plugins: [
nodeResolve({jsnext: true, module: true})
, commonjs({
include: 'node_modules/rxjs/**'
})
, importAlias({
Paths: {
// `__dirname` is built into rollup and was needed for me to get the right path
myCommon: __dirname + '/tmp/myCommonFolder'
}
, Extentions: ['js']
})
]
// ...
};
Side note: when using JIT, my path to the common files can be in some other folder structure outside the root...
"paths": {
"myCommon/*": ["./../../../Scripts/myCommonFolder/*"]
}
However, AOT and Rollup don't seem to be able to go outside the app root. So, in my gulp task that does the AOT and Rollup build process, I copy everything into a temp folder within the root of my app.
gulp.task('tmp:copy', function () {
gulp.src(['Scripts/myCommonFolder/**'])
.pipe(gulp.dest('Areas/Services/Scripts/MyAppRoot/tmp/myCommonFolder'));
});
have you tried using the typescript plugin for rollup?
https://github.com/rollup/rollup-plugin-typescript
install with npm install --save-dev rollup-plugin-typescript
import in your rollup-config.js import typescript from 'rollup-plugin-typescript';
and be sure to add it into the plugins section like
plugins: [ typescript() ]
depending on your project setup u might need to change dependency to use local typescript installation like
plugins: [
typescript({
typescript: require('typescript')
})
]
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.