[英]Rollup Angular 2 with typescript 2 path alias
I'm trying to rollup an Angular 2 app but I have: 我正在尝试汇总一个Angular 2应用程序,但我有:
Could not resolve 'app/components/xxx/xxxxx.component' from xxxx\\wwwroot\\angular\\app\\app.module.js 无法从xxxx \\ wwwroot \\ angular \\ app \\ app.module.js解析'app / components / xxx / xxxxx.component'
The app.module have a reference to xxxxx.component
like this: app.module引用了xxxxx.component
如下所示:
import { xxxxx } from 'app/components/xxx/xxxxx.component'
so the tsconfig.js has: 所以tsconfig.js有:
"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 1) https://github.com/frostney/rollup-plugin-alias
rollup-config.js: 汇总-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 2) https://github.com/dot-build/rollup-plugin-includepaths
rollup-config.js: 汇总-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. 我在ASP.NET MVC环境中使用Angular 4,并在我的tsconfig.json
文件中使用“paths”时遇到了同样的问题。
I also tried using rollup-plugin-alias
, rollup-plugin-paths
, and rollup-plugin-typescript
. 我还尝试使用rollup-plugin-alias
, rollup-plugin-paths
和rollup-plugin-typescript
。 None of those worked. 这些都没有奏效。 However, I found that rollup-plugin-import-alias
worked for me. 但是,我发现rollup-plugin-import-alias
对我有用。
My AOT tsconfig.json
file: 我的AOT tsconfig.json
文件:
{
"compilerOptions": {
// ...
"baseUrl": "./",
"paths": {
"myCommon/*": ["./tmp/myCommonFolder/*"]
}
// ...
}
}
My rollup-config.js
file: 我的rollup-config.js
文件:
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... 旁注:使用JIT时,我的公共文件路径可以在根目录外的其他文件夹结构中...
"paths": {
"myCommon/*": ["./../../../Scripts/myCommonFolder/*"]
}
However, AOT and Rollup don't seem to be able to go outside the app root. 但是, AOT和Rollup似乎无法超越应用程序根目录。 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. 因此,在执行AOT和Rollup构建过程的gulp任务中,我将所有内容复制到应用程序根目录下的临时文件夹中。
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? 你尝试过使用typescript插件进行汇总吗?
https://github.com/rollup/rollup-plugin-typescript https://github.com/rollup/rollup-plugin-typescript
install with npm install --save-dev rollup-plugin-typescript
使用npm install --save-dev rollup-plugin-typescript
import in your rollup-config.js import typescript from 'rollup-plugin-typescript';
import typescript from 'rollup-plugin-typescript';
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')
})
]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.