Angular2 - Rollup Tree shaking(*.ngfactory - 无法解析)
Angular2 - Rollup Tree shaking (*.ngfactory - could not be resolved)
我尝试在 AOT 编译后对 Angular 2 个应用程序使用 Tree-shaking,我收到了下一条消息:
'Containers/module.ngfactory' is imported by Containers\module.aot.js,
but could not be resolved – treating it as an external dependency
No name was provided for external module 'Containers/module.ngfactory'
in options.globals – guessing 'Containers_module_ngfactory'
而且我不知道如何解决这个问题。
这是module.aot.js AOT编译后的代码:
import { enableProdMode } from '@angular/core';
enableProdMode();
import { platformBrowser } from '@angular/platform-browser';
import { ModuleNgFactory } from 'Containers/module.ngfactory';
platformBrowser().bootstrapModuleFactory(ModuleNgFactory);
//# sourceMappingURL=module.aot.js.map
rollup-config.js
'use strict';
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify'
export default {
entry: './Containers/module.aot.js',
dest: './module.vendor.js',
sourceMap: false,
format: 'iife',
onwarn: function(warning) {
// Skip certain warnings
if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
if ( warning.code === 'EVAL' ) { return; }
console.warn( warning.message );
},
plugins: [
nodeResolve({jsnext: true, module: true}),
commonjs({
include: 'node_modules/rxjs/**',
}),
uglify()
]
}
和tsconfig-aot.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"baseUrl": ".",
"paths": {
"app/*": [ "../src/*" ]
},
"typeRoots": [
"../node_modules/@types"
]
},
"files": [
"../src/globals.ts",
"../src/Containers/module.aot.ts"
],
"exclude": [
"node_modules",
"typings"
],
"angularCompilerOptions": {
"genDir": "../",
"skipMetadataEmit": false,
"skipTemplateCodegen": false
}
}
一般来说,AOT 工作正常,但我无法 运行 tree-shaking 将我的代码打包到一个文件中。
请帮我解决这个问题。
UPD
主要 module.aot.js 文件有问题。
有什么解决这个问题的建议吗?
我已经找到了这个案例的解决方案。很简单,但是我花了这么多时间:(
在每个 Angular 组件中,我们需要为其他服务、模块等打上正确的补丁。
例如:
如果我们有这样的项目结构:
|-main.ts
|-src
| - service
| - authorize.service.ts
| - login
| - login.component.ts
然后在 login.component.ts 中你想 import authorize.service.ts 从 service 文件夹,你需要像这样给这个服务打补丁:
import { donothing } from '../service/authorize.service'
这很奇怪,但是如果我们将下一个路径放入此服务,带有 JIT 或 AOT 的 Angular 应用程序运行良好:
import { donothing } from 'service/authorize.service'
第二种情况是指向当前目录中某些服务、模块等的路径。
例如:
我们有一个和以前一样的项目,但在根文件夹中我们有 helper.service.ts 文件。
|-main.ts
|-helper.service.ts
...
如果您尝试像这样在 main.ts 中包含 helper.service.ts:
import { donothing2 } from 'helper.service'
或
import { donothing2 } from '/helper.service'
它将与 JIT 和 AOT 一起工作,但是当我们尝试 运行 Rollup tree-shaking.
解决方案非常简单,但对我来说很奇怪。
我们需要在文件名前加上 .
,因为没有 .
它会被视为外部导入。
import { donothing2 } from './helper.service'
希望我的回答对大家有所帮助。
谢谢。
我尝试在 AOT 编译后对 Angular 2 个应用程序使用 Tree-shaking,我收到了下一条消息:
'Containers/module.ngfactory' is imported by Containers\module.aot.js, but could not be resolved – treating it as an external dependency
No name was provided for external module 'Containers/module.ngfactory' in options.globals – guessing 'Containers_module_ngfactory'
而且我不知道如何解决这个问题。
这是module.aot.js AOT编译后的代码:
import { enableProdMode } from '@angular/core';
enableProdMode();
import { platformBrowser } from '@angular/platform-browser';
import { ModuleNgFactory } from 'Containers/module.ngfactory';
platformBrowser().bootstrapModuleFactory(ModuleNgFactory);
//# sourceMappingURL=module.aot.js.map
rollup-config.js
'use strict';
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify'
export default {
entry: './Containers/module.aot.js',
dest: './module.vendor.js',
sourceMap: false,
format: 'iife',
onwarn: function(warning) {
// Skip certain warnings
if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
if ( warning.code === 'EVAL' ) { return; }
console.warn( warning.message );
},
plugins: [
nodeResolve({jsnext: true, module: true}),
commonjs({
include: 'node_modules/rxjs/**',
}),
uglify()
]
}
和tsconfig-aot.json
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"baseUrl": ".",
"paths": {
"app/*": [ "../src/*" ]
},
"typeRoots": [
"../node_modules/@types"
]
},
"files": [
"../src/globals.ts",
"../src/Containers/module.aot.ts"
],
"exclude": [
"node_modules",
"typings"
],
"angularCompilerOptions": {
"genDir": "../",
"skipMetadataEmit": false,
"skipTemplateCodegen": false
}
}
一般来说,AOT 工作正常,但我无法 运行 tree-shaking 将我的代码打包到一个文件中。
请帮我解决这个问题。
UPD
主要 module.aot.js 文件有问题。
有什么解决这个问题的建议吗?
我已经找到了这个案例的解决方案。很简单,但是我花了这么多时间:(
在每个 Angular 组件中,我们需要为其他服务、模块等打上正确的补丁。
例如:
如果我们有这样的项目结构:
|-main.ts
|-src
| - service
| - authorize.service.ts
| - login
| - login.component.ts
然后在 login.component.ts 中你想 import authorize.service.ts 从 service 文件夹,你需要像这样给这个服务打补丁:
import { donothing } from '../service/authorize.service'
这很奇怪,但是如果我们将下一个路径放入此服务,带有 JIT 或 AOT 的 Angular 应用程序运行良好:
import { donothing } from 'service/authorize.service'
第二种情况是指向当前目录中某些服务、模块等的路径。
例如:
我们有一个和以前一样的项目,但在根文件夹中我们有 helper.service.ts 文件。
|-main.ts
|-helper.service.ts
...
如果您尝试像这样在 main.ts 中包含 helper.service.ts:
import { donothing2 } from 'helper.service'
或
import { donothing2 } from '/helper.service'
它将与 JIT 和 AOT 一起工作,但是当我们尝试 运行 Rollup tree-shaking.
解决方案非常简单,但对我来说很奇怪。
我们需要在文件名前加上 .
,因为没有 .
它会被视为外部导入。
import { donothing2 } from './helper.service'
希望我的回答对大家有所帮助。
谢谢。