自动在Typescript Angular cli项目中将node_modules之外的库的声明文件包括在内

时间:2018-09-28 09:14:43

标签: angular typescript

我有一个Angular Project,其中有一个lib文件夹,用于需要修改node_module的情况。我可以使用tsconfigs路径选项连接lib文件夹,并且实际上可以编译该应用程序可以正常运行。问题在于,vscodes tslint仍然无法识别lib文件夹。

enter image description here

lib文件夹位于项目的根目录中:

root/lib/ng2-smart-table

该项目的tsconfig设置为:

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "es2015",
    "baseUrl": "./",
    "types": [],
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ],
      "@lib/*": [
        "../lib/*"
      ],
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts",
    "../node_modules/@nebular/**/*.spec.ts"
  ],
  "include": [
    "../src/*.ts",
    "../src/**/*.ts",
    "../node_modules/@nebular/**/*.ts",
    "../lib/**/*.ts",
  ]
}

如果您要下载此问题的基本示例,也可以使用公共回购协议。链接:https://github.com/Jonathan002/tslint-cannot-find-module-example

如何删除vscode中的棉绒错误?

1 个答案:

答案 0 :(得分:0)

enter image description here下面的配置文件对我有用。看一下路径,做了一些修改:

import React from 'react';
import { bindActionCreators } from 'redux';

import {connect}  from 'react-redux'

import {postsActions,postsSelectors} from '../store/userList/index';    

class ProgramManager extends React.Component {

    constructor(props, context) {
        super(props, context);              
      }
    componentDidMount() {
        this.fetchPosts({});
    }    
    fetchPosts(params) {
        this.context.store.dispatch(postsActions.fetchPosts(params));
    }    

    render() {
        return (
            <div className="right-container">
               ....
            </div>    
        )        } 
}

function mapStatetoProps(state) {
    debugger;
    return {
        //users: state.Users
        params: postsSelectors.getParams(state),
        posts: postsSelectors.getPosts(state),
    };
}

export default connect(mapStatetoProps)(ProgramManager);