Angular2 - тряска дерева свертки (*.ngfactory - не удалось разрешить)

Я пытаюсь использовать Tree-shaking для приложения Angular 2 после компиляции AOT и получаю следующее сообщение:

«Containers/module.ngfactory» импортируется Containers\module.aot.js, но не может быть разрешен — рассматривается как внешняя зависимость

Не было указано имя для внешнего модуля «Containers/module.ngfactory» в options.globals — предположение «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 rollup rollupjs angular2-aot tree-shaking
person Taras Kovalenko    schedule 23.05.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел решения для этого случая. Это очень просто, но я потратил на это много времени :(

В каждом компоненте Angular нам нужно установить правильный патч для другого сервиса, модуля и т. д.

Например:

Если у нас есть такая структура проекта:

|-main.ts
|-src
        | - service
                | - authorize.service.ts
        | - login
                | - login.component.ts

затем в login.component.ts вы хотите импортировать authorize.service.ts из папки service, нужно поставить патч на этот сервис вот так:

import { donothing } from '../service/authorize.service'

Это очень странно, но приложение Angular с JIT или AOT работает хорошо, если мы укажем следующий путь к этому сервису:

import { donothing } from 'service/authorize.service'

А во втором случае это путь к какому-то сервису, модулю и т.п., находящемуся в текущем каталоге.

Например:

У нас есть проект, похожий на предыдущий, но в корневой папке у нас есть файл helper.service.ts.

|-main.ts
|-helper.service.ts
...

Если вы попытаетесь включить helper.service.ts в main.ts следующим образом:

import { donothing2 } from 'helper.service'

or

import { donothing2 } from '/helper.service'

Это будет работать с JIT и AOT, но не будет работать, когда мы попытаемся запустить Rollup для tree-shaking. сильный>.

Решение очень простое, но для меня странное.

Нам нужно поставить . перед именем файла, потому что без . это рассматривается как внешний импорт.

import { donothing2 } from './helper.service'

Надеюсь, мой ответ будет кому-то полезен.

Спасибо.

person Taras Kovalenko    schedule 27.05.2017