Angular 使用typescript 2路径别名汇总角度2

我正在尝试汇总Angular 2应用程序，但我有：

无法从xxxx\wwwroot\angular\app\app.module.js解析“app/components/xxx/xxxxx.component”

app.module对xxxxx.component的引用如下：

import { xxxxx } from 'app/components/xxx/xxxxx.component'

因此tsconfig.js具有：

"compilerOptions": {
  ...
  "paths": {
    "app/*": [ "./app/*" ],
    ...
  },
  "outDir": "wwwroot", 
  ...
},

如何在汇总中解析像typescript这样的路径别名

我试过了

(一)

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()
  ]
}

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()
  ]
}

(二)

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()
  ]
}

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()
  ]
}

---

但这些都不管用。有什么想法吗？提前感谢

您是否尝试过使用typescript插件进行汇总

使用

npm安装进行安装--保存开发汇总插件typescript

在rollup-config.js

中导入“rollup-plugin-typescript”中的类型脚本

并确保将其添加到插件部分，如

插件：[
typescript（）
]

根据您的项目设置，您可能需要更改依赖项以使用本地typescript安装，如

    plugins: [
    typescript({
            typescript: require('typescript')
        })
]

我在ASP.NET MVC环境中使用Angular 4，在我的
tsconfig.json
文件中使用“路径”时遇到了相同的问题

我还尝试使用了
rollup插件别名
，
rollup插件路径
，以及
rollup插件类型脚本
。这些都不起作用。然而，我发现
rollup plugin import alias
适合我

我的AOT
tsconfig.json
文件：

{
“编译器选项”：{
// ...
“baseUrl”：“/”，
“路径”：{
“myCommon/*”：[”/tmp/myCommonFolder/*“]
}
// ...
}
}

我的
汇总配置.js
文件：

从“汇总插件节点解析”导入节点解析；
从“汇总插件commonjs”导入commonjs；
从“汇总插件导入别名”导入导入导入；
导出默认值{
// ...
插件：[
nodeResolve（{jsnext:true，module:true}）
，commonjs({
包括：'node_modules/rxjs/**'
})
，importAlias({
路径：{
//“_dirname”内置于rollup中，是我获得正确路径所必需的
myCommon:uu dirname+'/tmp/myCommonFolder'
}
，扩展名：['js']
})
]
// ...
};

旁注：使用JIT时，我的公共文件路径可以位于根目录之外的其他文件夹结构中

“路径”：{
“myCommon/*”：[”/。/../../../../Scripts/myCommonFolder/*”]
}

但是，AOT和Rollup似乎无法超出应用程序根目录。因此，在执行AOT和汇总构建过程的gulp任务中，我将所有内容复制到应用程序根目录中的临时文件夹中

gulp.task（'tmp:copy'，function（）{
gulp.src（['Scripts/myCommonFolder/**'））
.pipe（gulp.dest（'Areas/Services/Scripts/MyAppRoot/tmp/myCommonFolder'）；
});
嗨！谢谢你的回复。但我有一个疑问，如果我使用typescript插件，它会再次编译吗？我已经生成了*.js