我试图掌握使用Typescript 2,Webpack和Angular 1.5,但是在构建Webpack时一直抱怨它:
无法解析模块' @ types / angular'在C:\ play \ gt \ src
我很难过。谷歌搜索这个并搞砸了但是我无处可去。
我的app.ts看起来像:
import * as angular from "@types/angular";
let app = angular.module ("GT.module", []);
我的tsconfig看起来像:
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"sourceMap": true,
"typeRoots" : [
"node_modules/@types"
]
},
"exclude": [
"node_modules",
"**/*.spec.ts"
],
"include" : [
"src/**/*"
]
}
...最后是webpack配置:
module.exports = {
entry: './src/app.ts',
output: {
filename: './dist/app.js'
},
devtool: "source-map",
resolve: {
extensions: ['', '.webpack.js', '.web.js', '.ts', '.js'],
modulesDirectories: ["node_modules"]
},
module: {
loaders: [
{ test: /\.ts$/, loader: 'ts-loader' }
]
}
}
答案 0 :(得分:2)
您的目录树是什么样的? 它应该是这样的:
node_modules/
@types/
angular/
src/
tsconfig.json
webpack.config.js
然后你不需要"typeRoots" : ["node_modules/@types"]
和import * as angular from "@types/angular";
应该成为import * as angular from "angular";
Typescript编译器2.0将知道在哪里查找正确位置的输入(即:node_modules/@types
)
答案 1 :(得分:1)
@types
不是您可以导入的模块,它们是用于编译器引用的typedef。
@types/angular
包实际上没有实现.module
,您的代码将会中断(如果它编译)。
你可能想做更多的事情:
/// <reference path="../node_modules/@types/angular/index.d.ts" />
import * as angular from "angular";
let app = angular.module ("GT.module", []);
但,您通常甚至不需要reference
,因为编译器会自动包含@types/*
个包中的typedef,除非您告诉它不要(通过设置{您types
中的{1}}或typeRoot
。此行为已在v2中添加,并且是最新的。