ng build-prod失败(在'AppModule'不支持的导入语法的模板编译过程中出错,但是ng可以正常工作

时间:2018-06-19 14:44:49

标签: angular angular-cli

当我使用“ ng build --prod”(或“ ng build --aot”)时,出现以下错误:

ERROR in Error during template compile of 'AppModule' 
Unsupported import syntax

有趣的是,使用'ng build'命令就可以了。

对于在哪里寻找错误或如何获得更具体的错误消息,我有些迷茫。

在某些组件中,我使用这样的导入语法:

import TemplateEditorcomponent = require("./components/admin/templateEditor/templateEditor.component");
import TemplateEditorComponent = TemplateEditorcomponent.TemplateEditorComponent;

这是否是失败的原因(使用“ require”功能)?如果是这样,为什么“ ng build”可以正常工作?

我正在使用angular-cli 6.0.3

1 个答案:

答案 0 :(得分:1)

ng build --prod标志使编译过程更加严格,导致它尝试对最终代码运行更多优化,以使其更小,更快地在部署时交付。

您看到的其他错误很可能是treeshaking过程的结果,该过程试图确定是否有未使用的代码段。因此,它遍历了所有代码和导入。

您在此处使用的import语句确实为假,但是在ng build下的终端中运行node时,其中require()是有效的import statement。我不知道为什么编译器开始抱怨这种特定的构建方式的确切原因,因为它也应该在node下运行,但是最有可能的理由。

导入Angular组件(以@Component()装饰器为前缀)的默认方式是:

import { TemplateEditorModule } from './components/admin/templateEditor/templateEditor.component';

我想添加的最后注释,从我看到的相对路径来看;您可能需要考虑设置一个AdminModule,其中包含所有与管理员相关的组件,服务等,然后将AdminModule导入到AppModule中。

这使优化效果更好,因为您的AdminModule可以延迟加载/动态加载。值得深思。