Question

更新

关于＆＃34;错误中的错误：没有为“AppModule＆＃39;”找到NgModule元数据。＆＃34;我认为这是一个单独的问题，但万一它会帮助任何人。我发现在某些条件下包含使用AngularCompilerPlugin （也暗示了ng cli），如果以这种方式声明main.ts的相关部分，则会出现此错误：

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

请注意，虽然以下应表示完全相同的事情，但以下调用bootstrapModule的方法在某些情况下为我解决了这个问题：

platformBrowserDynamic().bootstrapModule(AppModule);

摘要

当条目应用程序与Angular安装位于同一目录中时，使用Webpack构建Angular应用程序时，AngularCompilerPlugin无法找到@NgModule装饰器。

版本

Angular CLI: 1.6.3
Node: 8.9.1
OS: darwin x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

@angular/cli: 1.6.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.3
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

Repro步骤

我们有一组依赖于node_modules和其他资产的共同核心的应用程序。我们的文件结构大致如下：

project
└───app1
│   │   package.json
│   │   tsconfig.json
│   │   ...
│   └───src
│   └───node_modules
└───app2
│   │   package.json
│   │   tsconfig.json
│   │   ...
│   └───src
│   └───node_modules
└───commons
│   │   package.json
│   │   tsconfig.base.json
│   │   ...
│   └───assets
│   └───node_modules
│   └───angular-commons
│       │   tsconfig.json
│       │   CommonModule.ts
│       │   lib.ts
│       │   ...

所有共享node_modules和其他资产都存在于公共区域中，并且只有给定应用程序唯一的node_modules位于其自己的目录中。我们正在采用Webpack来获得它带来的诸多好处，其中最重要的是AngularCompilerPlugin。只要子模块是构建目录的子目录，我就可以使构建按预期工作并且构建目录包含所有公共node_modules（例如Angular）。虽然这是一个可能的解决方案，但我们的首选解决方案允许我们维护当前的目录结构。不幸的是，这是我遇到问题的地方。

一旦子目录离开构建目录的根目录，我就会遇到AngularCompiler的问题。在我当前的设置中，我从webpack构建中收到以下消息：ERROR in Error：找不到＆＃39; AppModule＆＃39;的NgModule元数据。这告诉我AngularCompiler没有成功找到NgModule装饰器，因为Webpack似乎成功地遍历了应用程序的树。我尝试使用mainPath选项和entryModule选项将其指向正确的位置以查找NgModule。这使我仔细检查了AngularCompilerPlugin的配置选项以及"moduleResolution": "node"和"moduleResolution": "classic"中TypeScript的特定路径行为，并试验了许多不同的配置和目录结构。在每种情况下，唯一的工作结构似乎是使根构建文件夹成为@angular和我们的应用程序的根文件夹。值得注意的是，指明Angular应该寻找其路径/依赖关系的困难与驱使我们远离使用Angular编译器的原因相同，我理解包装Webpack。

我尝试在独立仓库中重现此行为，并遇到了可能相关的一组不同问题。回购与我们的项目有一些相似之处。但是，在这种情况下，构建在app.module.ngfactory处失败，无法找到@ angular / common。为了使用TypeScript模块解析消除路径模糊，我将相对导入直接用于相应的node_modules。我怀疑这个示例repo中的路径问题与我们在项目中看到的问题有关，即使它们表现不同。任何帮助解决这个问题都将非常感激。

git clone --recursive -j8 https://github.com/mscottnelson/ngWebpackCompile.git
cd ngWebpackCompile/commons
npm install
npm run watch:app1

观察到的行为

ERROR in Error: No NgModule metadata found for 'AppModule'.
    at NgModuleResolver.resolve (/Users/me/project/commons/node_modules/@angular/compiler/bundles/compiler.umd.js:20276:23)
    at CompileMetadataResolver.getNgModuleMetadata (/Users/me/project/commons/node_modules/@angular/compiler/bundles/compiler.umd.js:15229:60)
    at visitLazyRoute (/Users/me/project/commons/node_modules/@angular/compiler/bundles/compiler.umd.js:31090:104)
    at AotCompiler.listLazyRoutes (/Users/me/project/commons/node_modules/@angular/compiler/bundles/compiler.umd.js:31058:20)
    at AngularCompilerProgram.listLazyRoutes (/Users/me/project/commons/node_modules/@angular/compiler-cli/src/transformers/program.js:156:30)
    at Function.NgTools_InternalApi_NG_2.listLazyRoutes (/Users/me/project/commons/node_modules/@angular/compiler-cli/src/ngtools_api.js:44:36)
    at AngularCompilerPlugin._getLazyRoutesFromNgtools (/Users/me/project/commons/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:248:66)
    at Promise.resolve.then.then (/Users/me/project/commons/node_modules/@ngtools/webpack/src/angular_compiler_plugin.js:562:50)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
    at Function.Module.runMain (module.js:678:11)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

期望的行为

允许将AngularCompiler配置为编译位于除安装角度编译器及其依赖项的目录之外的目录中的应用程序。

提及可能有用的任何其他细节

我可以使用如下所示的目录结构成功构建和运行应用程序：

project
└───commons
│   │   package.json
│   │   tsconfig.base.json
│   │   ...
│   └───assets
│   └───node_modules
│   └───angular-commons
│       │   tsconfig.json
│       │   CommonModule.ts
│       │   lib.ts
│       │   ...
│   └───app1
│   │   │   package.json
│   │   │   tsconfig.json
│   │   │   ...
│   │   └───src
│   │   └───node_modules
│   └───app2
│   │   │   package.json
│   │   │   tsconfig.json
│   │   │   ...
│   │   └───src
│   │   └───node_modules

没有为“AppModule”找到NgModule元数据＆＃39;使用webpack AngularCompilerPlugin

更新

摘要

版本

Repro步骤

观察到的行为

期望的行为

提及可能有用的任何其他细节

0 个答案: