使用angular2-logger的Angular 5项目出错

Question

我在一个Angular CLI项目中使用angular2-logger版本0.6.0。当我尝试升级到Angular CLI 1.5和Angular 5时，出现以下错误

ERROR in ./node_modules/angular2-logger/app/core/level.ts
Module build failed: Error: C:\test\sample-5\sample\node_module\angular2-logger\app\core\level.ts is not part of the compilation. Please make sure it is in your tsconfig via the 'files' or 'include' property.

at AngularCompilerPlugin.getCompiledFile (C:\test\sample-5\sample\node_modules\@ngtools\webpack\src\angular_compiler_plugin.js:624:23)
at plugin.done.then (C:\test\sample-5\sample\node_modules\@ngtools\webpack\src\loader.js:467:39)
at <anonymous>
@ ./node_modules/angular2-logger/core.js 6:9-36
@ ./src/app/app.module.ts
@ ./src/main.ts
@ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

这是app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Logger } from 'angular2-logger/core';

import { AppComponent } from './app.component';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [Logger],
  bootstrap: [AppComponent]
})
export class AppModule { }

这个示例项目是由ng new sample创建的，所以每个设置都是Angular CLI默认值。

Answer 1

我找到了一个临时的解决方案。

转到node_modules\angular2-logger\app\core，在那里删除所有.ts文件。

更多信息：https://github.com/code-chunks/angular2-logger/issues/175

Answer 2

对我有效的Temprory解决方案。

已安装的软件包具有dist目录node_modules/angular2-logger/dist/es6/。

在node_modules/angular2-logger/package.json中，main设置为

"main": "./dist/cjs/core.js",

将其更改为

"main": "./dist/es6/core.js",

您可能具有不同的目录结构，因为dist是在安装过程中创建的。因此，目标应该是将main指向已编译的core.js文件。

将Logger的所有导入语句更改为

import { Logger } from 'angular2-logger';

编译和运行，并保持快乐。

我不知道这是一个拼写错误还是一个深思熟虑的决定，但这对ng build --prod也是有效的

Answer 3

从链接的angular2-logger问题：

如错误所示，您需要包含对angular2-logger导入的Typescript文件的引用，以便TypeScript知道它们。编辑tsconfig.json (如果使用的是angular cli，则编辑tsconfig.app.json )以包含以下代码段：

"include": [
    "../node_modules/angular2-logger/app/core/level.ts",
    "../node_modules/angular2-logger/app/core/logger.ts",
    "../node_modules/angular2-logger/app/core/providers.ts",
    "**/*.ts"
],

*根据您的node_modules和tsconfig.json位置，路径可能会有所不同。我不得不这样使用：

"node_modules/angular2-logger/app/core/level.ts",

因为我不喜欢通配符，所以我删除了最后一行"**/*.ts“，并得到了关于文件的错误信息，这些文件直接位于src下。因此，我最终将这些也列在了列表中。这就是结果，它对我很有效：

  "include": [
    "node_modules/angular2-logger/app/core/level.ts",
    "node_modules/angular2-logger/app/core/logger.ts",
    "node_modules/angular2-logger/app/core/providers.ts",
    "src/main.ts",
    "src/polyfills.ts"
  ]