不使用AOT / rollup的ui-路由器/角混合
我试图使用户界面路由器工作的角度混合应用程序。它在使用JIT编译时工作，但当我试图使它与AOT和rollup一起工作时，rollup步骤在错误映射中失败：
‘@ui路由器/角-杂交’是由src\app.module.js导入的，但无法解决--将其视为外部依赖项。
我已经在github 这里上打开了一个问题。该错误可以通过下载角混合极小示例并在此示例上按照角指南中描述的方式设置AOT和汇总来再现，如这个柱塞中的文件所示。从‘@uirouter/角-杂交’的导入是不可能被汇总解决的。
import { UIRouterUpgradeModule } from '@uirouter/angular-hybrid';有没有人有一些经验，试图使角-混合工作结合AOT/汇总？有人成功这样做了吗？
更新
我已经设法使汇总步骤工作，通过添加一个自定义插件到rollup配置，解决角混合包。但即使如此，应用程序在运行时失败，而引导角并在其中请求UrlService。使用以下调用找不到UrlService提供程序(有趣的是，UrlService存在于注入器的注册提供程序中，但使用UrlService令牌是不可能找到的)：
var router = injector.get(UrlService);下面是调整后的，我不确定它是否正确，因为DI不工作。然而，前一个问题是，如何使角-混合与汇总兼容仍然存在。
import nodeResolve from "rollup-plugin-node-resolve"
import commonjs from "rollup-plugin-commonjs";
import uglify from "rollup-plugin-uglify";
import progress from "rollup-plugin-progress";
class UIRouterHybridResolver
{
constructor(options)
{
this.options = options;
}
resolveId(id, from)
{
if (id.startsWith("@uirouter/angular-hybrid"))
{
return `${__dirname}/node_modules/@uirouter/angular-hybrid/lib/angular-hybrid.js`;
}
return null;
}
}
const uIRouterHybridResolver = (config) => new UIRouterHybridResolver(config);
export default {
entry: "src/main.js",
dest: "src/build.js", // output a single application bundle
sourceMap: false,
format: "iife",
onwarn: function (warning) {
// Skip certain warnings
// should intercept ... but doesn't in some rollup versions
if (warning.code === "THIS_IS_UNDEFINED") { return; }
// console.warn everything else
console.warn(warning.message);
},
plugins: [
commonjs({
include: [
"node_modules/rxjs/**",
"node_modules/@uirouter/core/**"
]
}),
nodeResolve({ jsnext: true, module: true }),
uIRouterHybridResolver(),
uglify(),
progress({ clearLine: true })
],
globals: { angular: "angular" },
external: ["angular"]
};回答 2
Stack Overflow用户
发布于 2017-08-10 13:54:00
你快到了。我们的rollup.js包的最后一个本质是：
一个
UIRouter COREesm版本(参见https://stackoverflow.com/q/38832384/1679310)。
这段代码可以在node_modules\@uirouter\core\lib-esm\上使用(最后是\lib-esm )。要使用它，我们需要调整UIRouterHybridResolver插件：
class UIRouterHybridResolver
{
resolveId(id, from)
{
if (id.startsWith("@uirouter/core"))
{
return `${__dirname}/node_modules/@uirouter/core/lib-esm/index.js`;
}
if (id.startsWith("@uirouter/angular-hybrid"))
{
return `${__dirname}/node_modules/@uirouter/angular-hybrid/lib/angular-hybrid.js`;
}
}
}
const uIRouterHybridResolver = () => new UIRouterHybridResolver();我们还必须确定，这将是我们导出的配置的第一个插件：
export default {
entry: "src/main.js",
dest: "src/build.js",
...
plugins: [
uIRouterHybridResolver(),
commonjs({
include: [
"node_modules/rxjs/**"
]
}),
...注意:另外，
commonjs插件不需要(不应该有)"node_modules/@uirouter/core/**"，只包括"node_modules/rxjs/**"
...and就是这样..。混合UIRouter与AOT正在工作.
延展
另外，请确保我们遵循这里描述的说明：https://www.npmjs.com/package/@uirouter/angular-hybrid。大多数情况下，package.json包含--仅键@uirouter/angular-hybrid
dependencies: {
...
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/upgrade": "^4.0.0",
...
"@uirouter/angular-hybrid": "3.1.2",
...也就是说，不要附加诸如"@uirouter/angular": "1.0.0-beta.7"等内容，最后通过调用npm i来确保依赖项是最新的。
Stack Overflow用户
发布于 2017-08-15 22:41:21
@uirouter/angular-hybrid的3.1.4版本解决了导致此问题的根本问题。module:条目在package.json中应该指向ES6模块文件。但是，它指向的是无效路径。在3.1.4中，它再次指向正确的路径。
https://stackoverflow.com/questions/45506379
复制相似问题
腾讯云开发者
